Tuesday, May 1, 2012

Cara Memodifikasi Kolom Komentar dengan Spoiler

AB | Cara Memodifikasi Kolom Komentar dengan Spoiler - Ketemu dengan AB kembali. Setelah memperbaiki template blog pada Bos Ringo Blog, baru bisa membagikan sesuatu di blog ini. Penasaran kah mau melihat Bos Ringo Blog, klik saja yah disini.

Oh iya, kali ini AB akan membagikan bagaimana Cara Memodifikasi Kolom Komentar dengan Spoiler. Kawan-kawan sudah pernah toh menggunakan spoiler. Kalau belum silahkan baca lagi disini. Menggunakan spoiler pada blog, baik itu di tampilan awal blog atau di dalam postingan bisa dibilang untuk mempercantik blog, bisa juga untuk menghemat tempat sehingga tidak terlihat ramai. Semua tergantung yang empunya blog.

Contohnya
Oh iya, contoh hasil Cara Memodifikasi Kolom Komentar dengan Spoiler kawan-kawan bisa lihat pada komentar di blog ini, atau silahkan deh jalan-jalan ke blog AB yang lain, ehem... Bos Ringo Blog.

Beginilah Cara Memodifikasi Kolom Komentar dengan Spoiler:
1. Seperti biasa, bukalah akun blog kawan sendiri.
2. Bila menggunakan tampilan blog lawas, masuklah ke Rancangan pilih Edit HTML, bila menggunakan tampilan blog yang baru, Pilih  Opsi Lain (ada gambar panah bawah) tepatnya sebelah kiri Lihat Blog, lalu pilih Template.
3. Setelah berubah tampilan, maka pilihlah Edit HTML (sebelah kanan Ubahsesuaikan), lalu klik Lanjutkan
4. Jangan lupa centang Expand Template Widget
5. Carilah kode : <dl id='comments-block'>, jika tidak ada cari yang ini : <dl expr:class='data:post.avatarIndentClass' id='comments-block'> (gunakan Ctrl + F untuk memudahkan pencarian).
6. Copylah Script di bawah ini (bila anda sudah pernah buka Cara menggunakan spoiler, anda tinggal mem-parse-nya saja, karena yang digunakan adalah hasil parse HTML)

&lt;div style=&quot;margin: 5px 20px 20px;&quot;&gt;
&lt;div class=&quot;smallfont&quot; style=&quot;margin-bottom: 2px;&quot;&gt;&lt;b&gt;Ehem! Bos-bos Mau Lihat Komentar! Silahkan&lt;/b&gt;: &lt;input value=&quot;View&quot; style=&quot;margin: 0px; padding: 0px; width: 55px; font-size: 12px;&quot; onclick=&quot;if (this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display != &#039;&#039;) { this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display = &#039;&#039;; this.innerText = &#039;&#039;; this.value = &#039;Hidden&#039;; } else { this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display = &#039;none&#039;; this.innerText = &#039;&#039;; this.value = &#039;View&#039;; }&quot; type=&quot;button&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;alt2&quot; style=&quot;border: 1px inset ; margin: 0px; padding: 6px;&quot;&gt;
&lt;div style=&quot;display: none;&quot;&gt;

7. Paste atau tempatkanlah script yang sudah di copy tadi tepat diatas kode : <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

8. Setelah anda pastekan, carilah lagi kode </dl>, kawan tinggal memindahkan scroll ke bawah dengan menggeser mouse pelan-pelan.

9 Setelah ketemu, copy kode di bawah ini dan paste-lah kode tersedbut tepat di bawah </dl>
&lt;br /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
10. Sudah selesai, siimpan template blog anda kawan. Lihat hasilnya.

Catatan : 
  • Untuk tulisan warna merah silahkan anda ganti sesuka anda kawan
  • untuk tulisan biru silahkan anda ganti juga, Misal: View jadi Open atau Buka atau Lihat, Hidden jadi Close atau Tutup

Demikianlah tulisan AB tentang Cara Memodifikasi Kolom Komentar dengan Spoiler. Selamat mencoba dan Semoga bermanfaat. Salam Sukses. Salam Blogger. Kumpulan Adsen Blogspot.

No comments:

Post a Comment