ุจِุณْููููููููููููููููู
ِ ุง๏ทฒِุงูุฑَّุญْู
َِู ุงุงุฑَّุญِูู
Assalamualikum Wr. Wb. Hari ini saya
akan membuat artikel tentang
Cara
Membuat Show Hide Emoticon Di Blog. Sebelumnya saya minta maaf karena
beberapa hari tidak mempostingkan artikel. Sebelum memulai backup data blog anda
dulu untuk hal-hal yang tidak diinginkan.
BISMILLAH langsung aja ke
TKP
Show & Hide Emoticon
Bila sobat tertarik untuk mencobanya, silahkan ikuti langkah-langkahnya di bawah ini:
1. Masuk ke Dashboard blog sobat kemudian masuk ke menu "Template > Edit HTML".
2. Hapus kode CSS untuk menyembunyikan emoticonnya. Hapus kode yang seperti ini:
.comment_emo_list {
display: none;
}
3. Temukan dan hapus kode <div class='comment_emo_list'/> pada bagian comment_form
seperti di bawah ini:
<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>
Sehingga menjadi seperti ini:
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<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>
4. Cari kode <b:includable id='comment-form' var='post'> kemudian scroll ke bawah sedikit
dan temukan kode <data:blogTeamBlogMessage/> yang paling bawah, lalu copy dan
paste kode berikut ini tepat di atasnya.
<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 Emoticon';}else{this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display='none';this.innerText='';this.value='Show Emoticon';}' style='background-color: #21afa4; border: none; border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 2px #222; color: #fff; cursor: pointer; display: block; font-family: "Open Sans", sans-serif; font-size: 12px; padding: 3px 10px; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); width: 100%;' type='button' value='Show Emoticon'/>
<div class='alt1'>
<div style='display: none;'>
<br/>
<div style='text-align: center;'>
<div class='comment_emo_list'/>
</div>
</div>
</div>
</div>
5. Cari kode <b:includable id='threaded-comment-form' var='post'> kemudian scroll ke
bawah sedikit dan temukan kode <data:blogTeamBlogMessage/> yang paling bawah,
lalu copy dan paste kode berikut ini tepat di atasnya.
<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 Emoticon';}else{this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display='none';this.innerText='';this.value='Show Emoticon';}' style='background-color: #21afa4; border: none; border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 2px #222; color: #fff; cursor: pointer; display: block; font-family: "Open Sans", sans-serif; font-size: 12px; padding: 3px 10px; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); width: 100%;' type='button' value='Show Emoticon'/>
<div class='alt1'>
<div style='display: none;'>
<br/>
<div style='text-align: center;'>
<div class='comment_emo_list'/>
</div>
</div>
</div>
</div>
6. Simpan template dan lihat hasilnya.
Source Code: http://mangtekno.blogspot.com/2014/03/membuat-show-hide-emoticon-pada-komentar-blog.html
