Cara Membuat Tombol Show Hide Komentar

Share :

Tweet

Cara Membuat Tombol Show Hide Komentar - Mungkin sudah banyak yang menjelaskan tentang Cara Membuat Tombol Show Hide Komentar, sedikit berbeda dari penjelasan blog lain yang menggunakan jquery untuk membuatnya, kali ini saya hanya memanfaatkan Spoiler Show Hide. Jadi, lumayan ringan dan hemat tempat juga sob.

Gambar di atas adalah contoh penggunaan Tombol Show Hide Komentar,  untuk live demo bisa di lihat di blog ini. Jika sobat ingin membuat blog sobat lebih minimalis silahkan ikuti langkah-langkah dibawah ini.

• Login ke akun blogger sobat
• Pergi ke halaman Template >> Edit HTML >> Checklist Expand Template Widget
• Cari kode ]]></b:skin>
• Letakkan CSS di bawah ini tepat diatas kode ]]></b:skin>


.ruang_spoiler {padding: 5px 10px;}
.button_spoiler {cursor: pointer;;color: #333;padding: 5px 25px;display: inline-block;text-decoration: none;border: 1px solid #9c9c9c;text-shadow: 1px 1px 0px #c7c7c7;font: bold 16px Arial, Helvetica, sans-serif;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;box-shadow: inset 0px 1px 0px 0px #ffffff;background-color: #ebebeb;background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ebebeb), color-stop(1, #919191) );background: -moz-linear-gradient( center top, #ebebeb 5%, #919191 100% );filter:progid: DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#919191');}
.button_spoiler:hover {background-color: #919191;background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #919191), color-stop(1, #ebebeb) );background: -moz-linear-gradient( center top, #919191 5%, #ebebeb 100% );filter:progid: DXImageTransform.Microsoft.gradient(startColorstr='#919191', endColorstr='#ebebeb');}
.button_spoiler:active {position: relative;top: 1px;}

• Lalu cari kode  <div class='comments' id='comments'> (jika ada dua pilih yang atas).
• Copy paste kode di bawah ini tepat di atas kode yang sudah sobat temukan


<div><div style='margin-bottom: 2px; text-align:center;'><i><b><small/></b></i><input class='button_spoiler' 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;Tutup Komentar&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;Poskan Atau Lihat Komentar&apos;; }' type='button' value='Poskan Atau Lihat Komentar'/></div>
<div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>

• Cari kode <b:includable id='backlinkDeleteIcon' var='backlink'>.
• Lihat baik-baik diatas kode <b:includable id='backlinkDeleteIcon' var='backlink'> terdapat kode </b:includable>. Copy paste kode di bawah ini tepat diatas kode </b:includable>.

</div></div></div>

• Yang terakhir klik Simpan Template
• Nah, jika sobat mengikuti langkah-langkah diatas dengan baik maka insyaallah hasilnya sama seperti di blog saya. 

Mungkin itu saja yang bisa saya sampaikan pada post yang berjudul Cara Membuat Tombol Show Hide Komentar, semoga bermanfaat.... :)

Tag : Blogging