Cara Membuat Tombol Hident Show (Spoiler) dan Scrollbar

Cara Membuat Tombol Hident Show (Spoiler) dan Scrollbar

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

3. Merubah Blogspot ke Sub-Domain Sendiri

1. Cara Setting/Setelan di Dynadot.com

2. Cara Setting/Setelan di Admin Blogger.com

3. Cara Menghapus Blogger Custom

APA ITU SPOILER HIDE & SHOW

Supaya mudah dimengerti, berikut contoh spoiler:

Kata-kata sebelum di HIDE and SHOW

Setelah di HIDE AND SHOW (klik Show)

Tulis artikel di sini!

CARA MEMBUAT SPOILER TOMBOL HIDE SHOW DI ARTIKEL BLOG

Cara ini dapat dipakai untuk blog Blogger atau Wordpress. Caranya mudah, ikuti panduan berikut:

1. 1. Buka halaman untuk menulis artikel -> pastikan dalam mode Edit HTML (untuk Blogger) atau HTML (untuk Wordpress)
2. 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

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).

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.

Sumber Artikel; alkhoirot.net