Monday, September 17, 2012

Membuat Tombol Hide Show (Spoiler) dan Scrollbar


Tombol Hide Show Spoiler

Cara membuat tombol teks spoiler seperti di Kaskus dengan Hide and Show di mana artikel yang kita sembunyikan (HIDE) tidak akan tampak sampai pengunjung mengklik tombol SHOW. Trik ini dapat dipakai untuk Blogger BLogspot atau Wordpress

DAFTAR ISI
  1. Apa itu Spoiler Tombol Hide & Show
  2. Cara Membuat Spoler Tombol Hide & Show di Artikel Posting
  3. Cara Membuat Spoler Tombol Hide & Show di Komentar Blogger
  4. Cara Membuat Scrollbar
    1. Apa itu Scrollbar?
    2. Fungsi Scroll-bar
    3. Cara Menaruh Scrollbar di Blog
    4. Cara Buat Scrollbar
  5. Cara Merubah Blogspot ke Top Domain
    1. Cara Setting/Setelan di Dynadot.com
    2. Cara Setting/Setelan di Admin Blogger.com
  6. Merubah Blogspot ke Sub-Domain Sendiri
    1. Cara Setting/Setelan di Dynadot.com
    2. Cara Setting/Setelan di Admin Blogger.com
  7. Cara Menghapus Blogger Custom

APA ITU SPOILER HIDE & SHOW
Supaya mudah dimengerti, berikut contoh spoiler:

Kata-kata sebelum di HIDE and SHOW

Bagi seorang PNS (Pegawai Negeri Sipil) atau pejabat tinggi, hidup sederhana adalah keharusan untuk menghilangkan nafsu korupsi dan godaan tamak.

Bagi seorang jutawan, hidup sederhana membuat hidup lebih real, tanpa topeng dan lebih berbahagia karena terasa mudah untuk berbagi harta dengan yang lemah.

Bagi seorang ulama, ustadz, dan kyai yang hartawan, hidup sederhana adalah fardhu ‘ain karena mereka adalah simbol nilai ideal tertinggi dan penuntun umat yang mayoritas miskin. Miskin harta atau miskin jiwa. [Sumber link]

Setelah di HIDE AND SHOW (klik Show)


Bagi seorang PNS (Pegawai Negeri Sipil) atau pejabat tinggi, hidup sederhana adalah keharusan untuk menghilangkan nafsu korupsi dan godaan tamak.

Bagi seorang jutawan, hidup sederhana membuat hidup lebih real, tanpa topeng dan lebih berbahagia karena terasa mudah untuk berbagi harta dengan yang lemah.

Bagi seorang ulama, ustadz, dan kyai yang hartawan, hidup sederhana adalah fardhu ‘ain karena mereka adalah simbol nilai ideal tertinggi dan penuntun umat yang mayoritas miskin. Miskin harta atau miskin jiwa.[Sumber link]

CARA MEMBUAT SPOILER TOMBOL HIDE SHOW DI ARTIKEL BLOG
Cara ini dapat dipakai untuk blog Blogger atau Wordpress. Caranya mudah, ikuti panduan berikut:

1. Buka halaman untuk menulis artikel -> pastikan dalam mode Edit HTML (untuk Blogger) atau HTML (untuk Wordpress)
2. Copy dan paste kode di bawah ke halaman posting. Klik View pl`in untuk mengcopy.

<div id="spoiler">
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 75px;" type="button" value="Show" /></div>
<div class="alt2" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(225, 228, 242) none repeat scroll 0% 0%; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Tulis artikel di sini!
</div>
</div>
</div>

3. Taruh tulisan yang akan di HIDE AND SHOW di Tulis artikel di sini!


CARA MEMBUAT SPOILER TOMBOL HIDE SHOW DI KOMENTAR BLOG BLOGGER
Panduan ini khusus membuat spoiler di blog Blogger Blogspot bukan di blog Wordpress atau Joomla. Tujuannya agar artikel yang banyak komentarnya tampak lebih rapi seperti di blog ini.

1. Login/masuk ke Blogger.com -> Template -> Edit HTML -> Lanjutkan -> kasih tanda tik/centang "Expand Template Widget"
2. Cari kode berikut (gunakan Ctrl + F untuk mempermudah pencarian):

<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>

3. Masukkan kode berikut di atas kode no.2
<!-- spoiler komentar part1 alkhoirot.net -->
<div><div style='margin-bottom: 2px;'><i><b><small/></b></i><input onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Hide&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos;Lihat Komentar&apos;; }' style='margin: 0px; padding: 0px; width: 180px; font-size: 12px;font-weight:bold;' type='button' value='Lihat Komentar'/></div>
<div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>
<!-- spoiler komentar part1 end alkhoirot.net-->

4. Masukkan kode beerikut di bawah kode no.2
<!-- spoiler komentar part2 alkhoirot.net -->
</div></div></div>
<!-- spoiler komentar part2 end alkhoirot.net -->

5. Klik Simpan. Selesai.

______________________________________________


CARA MEMBUAT SCROLLBAR

Membuat Scrollbar scroll bar


Cara Membuat Scrollbar di halaman utama blog Blogger atau Wordpress. Scrollbar berbeda dengan pull-down atau text-area.


Apa itu scrollbar?

Scrollbar adalah satuan kode html yang berfungsi membuat scroll (makna literal, gulungan). Scrollbar dikenal juga dengan istilah handle.
Contoh, lihat gambar bawah. Live demo lihat di halaman situs ini di bawahnya Featured Slider (gambar bergerak).

Scrollbar

Apa fungsi dari Scrollbar?

Untuk menghemat tempat.

Apa yang dapat ditaruh di dalam scrollbar?

Apa saja. Seperti untuk menyimpan link-link artikel penting seperti di blog ini supaya cepat terlihat oleh pengunjung. Bisa juga untuk menampilkan banner tukar link.


CARA MENARUH SCROLLBAR DI BLOG

Di mana saja. Umumnya di sidebar blog seperti di blog ini.


CARA MEMBUAT SCROLLBAR

1. Copy kode berikut dan letakkan di sidebar blog Anda (Desain -> Elemen -> Javascript/HTML).
<div style="overflow:auto;width:90%;height:150px;padding:20px;margin-bottom:10px">
<ol>
<li><a href="http://www.alkhoirot.net/2011/07/konsultasi-agama-islam.html">Konsultasi Islam </a></li>
<li><a href="http://www.alkhoirot.net/2011/11/panduan-bisnis-online.html">Bisnis Online </a></li>
</ol>
</div>

2. Ganti link tersebut dengan link Anda. Atau dapat juga di isi dengan teks info dan pengumuman atau kutipan, dll.

Catatan:

Height adalah ukuran tinggi. Angkanya bisa dirubah sesuai dengan kebutuhan Anda.

____________________________


Tutorial cara membuat Blogger custom domain atau merubah blog.blogspot.com ke www.domain-sendiri.com atau dari blogger.blogspot.com ke blog.domain-sendiri.com di mana domainnya memakai layanan dynadot.com

Bagi yang membeli domain di dynadot.com dan ingin menggunakannya sebagai Blogger Custom Domain, maka berikut cara mensetting DNS-nya:


CARA MERUBAH BLOGSPOT KE TOP DOMAIN DI DYNADOT

Ada dua tahap setting yaitu di dynadot dan di blogger.com sebagai berikut:

CARA SETTING/SETELAN DNS DI DYNADOT

Seumpama Anda punya domain iqbalali.com. Dan hendak merubah iqbalali.blogspot.com ke www.iqbalali.com. Caranya sebagai berikut:

1. Masuk/login ke dynadot.com
2. Klik Domains -> Tanda tik pada domain Anda
3. klik Set Name Servers -> DNS
4. Record Type: pilih CNAME
5. IP Address or Target Host, tulis -> ghs.google.com
6 Di Subdomain Records (optional) isi kotak-kotak sebagai berikut:
a. Subdomain -> www
b. Record Type -> CNAME
c. IP Address or Target Host -> ghs.google.com
d. Klik Use Dynadot DNS Selesai.


CARA SETTING/SETELAN DI ADMIN BLOGGER.COM

Panduan ini berdasarkan dasbor admin interface (antarmuka) baru. Silahkan upgrade Dasbor admin Anda kalau belum.

1. Login ke Blogger.com
2. Klik Setelan -> Dasar -> Penerbitan
3. Pada Alamat Blog -> klik +Tambahkan domain khusus -> klik Alihkan ke setelan lanjutan
4. Pada "Setelan lanjutan" masukkan nama domain Anda. Contoh: www.iqbalali.com
5. Klik Simpan.
6. Selesai.


MEMBUAT CUSTOM SUB-DOMAIN BLOG.CONTOH.COM

Sama dengan top domain, mengarahkan blogspot.com ke subdomain juga memerlukan dua 2 tahapan yaitu mengarahkan DNS di dynadot dan di admin blogger.com


CARA SETTING/SETELAN DNS DI DYNADOT
Seumpama Anda punya domain iqbalali.com. Dan hendak merubah iqbalinggris.blogspot.com ke en.iqbalali.com. Caranya sebagai berikut:

1. Masuk/login ke dynadot.com
2. Klik Domains -> Tanda tik pada domain Anda
3. klik Set Name Servers -> DNS
4. Record Type: pilih CNAME
5. IP Address or Target Host, tulis -> ghs.google.com
6 Di Subdomain Records (optional) isi kotak-kotak sebagai berikut:
a. Subdomain -> blog
b. Record Type -> CNAME
c. IP Address or Target Host -> ghs.google.com
d. Klik "Use Dynadot DNS".

Selesai.

Setelah itu, baru masuk ke blogger.com untuk merubah setelan Blogger. Ikuti panduannya di sini: Merubah Blogspot.com dengan Domain Sendiri (Blogger Custom Domain)


CARA SETTING/SETELAN DI ADMIN BLOGGER.COM

Panduan ini berdasarkan dasbor admin interface (antarmuka) baru. Silahkan upgrade Dasbor admin Anda kalau belum.

1. Login ke Blogger.com
2. Klik Setelan -> Dasar -> Penerbitan
3. Pada Alamat Blog -> klik +Tambahkan domain khusus -> klik Alihkan ke setelan lanjutan
4. Pada "Setelan lanjutan" masukkan nama subdomain Anda. Contoh: en.iqbalali.com
5. Klik Simpan.
6. Selesai.

Jangan lupa uncheck/buang tanda tik pada "Alihkan iqbalali.com ke en.iqbalali.com"


CARA MENGHAPUS SETELAN BLOGGER CUSTOM DOMAIN

Cara menghapus setelan Blogger Custom baik yang top domain atau sub-domain sendiri itu mudah sbb:

1. Login ke Blogger.com
2. Klik Setelan -> Dasar -> Penerbitan
3. Pada "Alamat blog" -> klik tanda "x" pada domain khusus yang sudah ditambahkan.
4. Klik OK.
5. Klik Simpan.



Cari artikel lain:




Copy link berikut untuk referensi kutipan:

Jangan lupa baca yang ini juga ..