Cara menyembunyikan Emoticon dengan tombol

DEMO

Tombol Spoiler banyak fungsinya salah satunya untuk menyembunyikan emoticon di kolom komentar blog. Sebelum anda melakukan langkah ini pastikan dulu emoticon yang muncul di kolom komentar tidak pindah ke bawah, bila tampilan emoticon pindah ke bawah untuk solusinya silahkan baca posting sebelumnya Mengatasi pesan komentar yang pidah ke bawah.

Cara menyembunyikan Emoticon dengan spoiler hanya untuk emoticon yang sudah saya share posting sebelumnya. Karena emoticon di dalam komentar memiliki fungsi yang tertentu tidak semuanya sama. Jadi sekali lagi posting ini hanya untuk emoticon yang sudah saya share di posting sebelumnya yaitu:

• Memasang Emoticon di komentar blog dan 
• Memasukkan Emoticon Kaskus di komentar blog.

Atau supaya anda tidak bingung saya berikan urutan secara jelas bagaimana memasukkan emoticon ke dalam komentar blog:

• 1. Tambah emoticon ke dalam komentar: link1 atau  link2 (kaskus) 
• 2. Mengatasi  emoticon yang pindah ke bawah: link (masalah ini terjadi pada template blog tertentu saja, jadi bila template blog anda tidak terjadi masalah tersebut, maka lewati saja tahap ini)
• 3. Menyembunyikan emoticon dengan tombol spoiler:

Nah, posting ini pada tahap no.3 yaitu menyembunyikan emoticon dengan tombol Spoiler. Caranya adalah sebagai berikut:

Langkah #1

Pada fungsi emoticon sebelumnya (di atas </body> ) kita dapati script fungsi berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "iframe#comment-editor",
emoMessage = "To insert emoticon you must added at least one space before the
.........................dst............

Lihat tulisan yang saya kasih warna merah iframe#comment-editor, gantilah dengan #cahlaban, hmmm...kok diganti cahlaban sih?...:27::27:

iya karena nanti kita akan buat tombol spoiler dengan elemen div dengan id cahlaban..hehehe :21:

Langkah #2

Langkah selanjutnya adalah menaruh tombol spoiler. Cari script dengan CTRL+F <p><data:blogCommentMessage/></p> atau data:blogCommentMessage. Setelah ketemu ternyata jumlahnya ada 4 atau 2 tergantung template blog tertentu, nah copy lah script di bawah ini tepat dibawah  semua <p><data:blogCommentMessage/></p>

<div id='spoiler'>
<div><input name='button' onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[&apos;show&apos;].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[&apos;show&apos;].style.display = &apos;&apos;; this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[&apos;hide&apos;].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos;Sembunyikan&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[&apos;show&apos;].style.display = &apos;none&apos;; this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[&apos;hide&apos;].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Tampilkan&apos;; }' style='background: #006699; color: #FFFFFF; font-size: 11px; font-family: Arial, Tahoma, Verdana; margin-left: 5px; border: 1px solid #234B69; padding:3px 5px 3px 5px; font-weight: bold;' type='button' value='Lihat Emoticon'/></div>
<div id='show' style='border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;'>
<div id='coba'><div id='cahlaban'/></div>
</div><div id='hide'/></div>

Langkah #3 terakhir 

Seperti biasanya Simpan template nya..hehehe :c::c:

Semoga berhasil...terimakasih... :14::14: