Sharing kali ini adalah membuat show and hide emoticon pada threaded comment hack bagi Anda yang sedang menggunakannya. Bagi Anda yang sedang mencoba untuk validasi HTML5, saya sarankan untuk menggunakan threaded comment hack untuk mengurangi error validasi HTML5 di daerah postingan. Karena kita tahu bahwa threaded comment bawaan blogger menyumbangkan lumayan banyak error pada validasi HTML5.
Untuk tutorial pemasangan threaded comment hack ini bisa Anda kunjungi blognya Kang Ismet. Nah bagi Anda yang sudah memasangnya tentu sudah tahu bahwa threaded comment hack ini sudah dilengkapi dengan emoticon atau smiley. Namun kebanyakan pengguna akhirnya menyembunyikan icon emoticon-nya, mungkin alasannya sama dengan saya yaitu tampilan icon emoticon ini mengganggu pemandangan hehehehe...
Sebenarnya icon emoticon ini sangat berguna bagi mereka yang berkomentar dan belum paham kode-kode emoticon-nya. Untuk kita kita bisa menambahkan tombol show and hide untuk icon emoticon ini agar tidak mengganggu pemandangan namun bisa dimunculkan untuk melihat kode-kodenya.
Nah bagi yang tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini.
Langkah Pertama
Bagi Anda yang sudah menyembunyikan icon emoticon, silahkan hapus kode CSS yang menyembunyikan emoticonnya. Biasanya seperti ini:
.comment_emo_list {display:none}Langkah Kedua
Silahkan hapus juga kode html pemanggilnya yang berada di Comment_form. Silahkan cari kode di bawah ini dan hapus kode <div class='comment_emo_list'/>
<div class='comment_form'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<div class='comment_emo_list'/>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
</b:if>
</b:if>
</div>
</b:if>
</div>Langkah Ketiga
Tambahkan kode di bawah ini pada daerah Comment-form. Cari kode <b:includable id='comment-form' var='post'> kemudian scroll ke bawah sedikit dan temukan kode <data:blogTeamBlogMessage/> yang paling bawah dan simpan kode di bawah ini DI ATASNYA.
<div style='margin-bottom:10px'>
<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 Smiley'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show Smiley'; }' style='border:1px solid #343333;color:#fff;font:italic 12px Georgia;cursor:pointer;font-weight:400;margin:0 auto;text-decoration:none;text-transform:none;text-shadow:none;border-radius:2px;display:block;box-shadow:inset 0 1px 1px 0 #B0B0B0;background-color:#686986;padding:3px 10px;text-align:center;width:100%' type='button' value='Show Smiley'/>
<div class='alt1'>
<div style='display: none;'>
<br/>
<div style='text-align: center;'>
<div class='comment_emo_list'/>
</div>
</div>
</div>
</div>Langkah Keempat
Tambahkan kode di bawah ini pada daerah threaded-comment-form. Cari kode<b:includable id='threaded-comment-form' var='post'> kemudian scroll ke bawah sedikit dan temukan kode <data:blogTeamBlogMessage/> yang paling bawah dan simpan kode di bawah ini DI ATASNYA.
<div style='margin-bottom:10px'>
<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 Smiley'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show Smiley'; }' style='border:1px solid #343333;color:#fff;font:italic 12px Georgia;cursor:pointer;font-weight:400;margin:0 auto;text-decoration:none;text-transform:none;text-shadow:none;border-radius:2px;display:block;box-shadow:inset 0 1px 1px 0 #B0B0B0;background-color:#686986;padding:3px 10px;text-align:center;width:100%' type='button' value='Show Smiley'/>
<div class='alt1'>
<div style='display: none;'>
<br/>
<div style='text-align: center;'>
<div class='comment_emo_list'/>
</div>
</div>
</div>
</div>Langkah Kelima
Silahkan save template Anda dan lihat penampakannya pada postingan blog Anda.
Selamat mencoba...
Berkomentarlah :
1.Dengan kata-kata yang sopan
2.Tidak menaruh link aktif ataupun non aktif
3.No spam, no sara, and no porn
4.Tidak promosi blog
5.Komentar yang tidak sesuai dengan isi konten akan langsung saya hapus
6.Komentar yang bagus akan saya publish dan saya beri komentar balik