Cara Membuat Show Hide Emoticon Dan Konversi Kode Di Form Threaded Comments

Cara Membuat Show Hide Emoticon Dan Konversi Kode Di Form Threaded Comments - Tutorial blogger lagi. Tutorial kali ini terlihat beda dengan tutorial yang lain. Yang membedakan hanya terletak pada judul. Judul tutorial yang satu cukup panjang seperti kereta api. -_- tutorial tersebut adalah Cara Memasang Show Hide Emoticon Dan Konversi Kode Di Form Threaded Comments. Sebenarnya judul itu harus pendek. Misal: cara membuat show hide emoticon pada komentar blog, membuat show hide emoticon dan konversi kode pada komentar blog. Ternyata sama aja panjang nya. :3

Saya tertarik untuk membahas tutorial yang satu ini karena beberapa alasan, ada yang request, gak ada ide buat tutorial blogger lagi, entah apalagi. :v yang pasti, tutorial yang satu ini saya buat khusus untuk sobat yang membaca dan spesial untuk sobat setia saya yang request tutorial ini.

Emoticon, sering digunakan oleh para web designer dan bisanya diletakkan diatas threded form comments (kotak komentar). Tujuan utama web designer dan juga pembuat template sehingga banyak sekali para blogger atau pembuat blog yang menggunakan template terdapat emoticon untuk form threaded tersebut adalah agar tulisan komentar dari para pengunjung sobat terlihat lebih hidup meskipun hanya sebuah gambar. Jika tidak ada gambar komentar, mata juga tidak nyaman untuk memandang nya.

Apalagi mungkin si pengomentar blog sobat ingin memberi senyuman kepada sobat karena rasa terima kasih telah membuat artikel yang unik dan menarik, dengan cara apalagi selain dengan gambar emoticon. Facebook, twitter, whatsapp, bbm, line saja banyak sekali gambar dan animasi emticon nya.

Untuk tombol konversi kode yang biasanya terpasang di blog orang lain, itu mempunyai fungsi tersendiri.  Fungsi nya sama dengan parse HTML. Karena konversi bisa disebut juga dengan parse atau convert (dalam bahasa Inggris). Untuk lebih detail tentang konversi kode HTML, sobat bisa baca di Parse HTML

Sebelum pergi ke penjelasan, disini saya akan beri 2 cara berbeda untuk tutorial ini. Cara memasang show hide emoticon pada komentar blog dan cara memasang show hide emoticon dan konversi kode pada komentar blog.

Cara Membuat Show Hide Emoticon Dan Tombol Konversi Kode Pada Komentar Blog

1. Login Blogger
2. Template
3. Edit HTML
4. Cari kode

 <b:includable id='threaded-comment-form' var='post'> 

(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)
5. Setelah ketemu, GANTI kode  <b:includable id='threaded-comment-form' var='post'>  dan juga kode </b:includable> Untuk lebih jelasnya, lihat gambar dibawah ini.

*Keterangan: kode yang didalam kotak warna merah hapus semua. Kemudian GANTI dengan kode dibawah ini

<b:includable id='threaded-comment-form' var='post'> 
<div class='comment-form'> 
<b:if cond='data:mobile'> 
<p><data:blogCommentMessage/> <br/><br/>
<span class='konversi pencet'>Konversi Kode</span><span class='tutup pencet' style='display:none'>Tutup Konverter</span><span class='show_emo pencet'>Emoticon</span></p> 
<script type='text/javascript'> 
$(document).ready(function() { 
$(&#39;.konversi&#39;).click(function() { 
$(&#39;.my-konversi&#39;).show(); 
$(&#39;.tutup&#39;).show(); 
$(&#39;.konversi&#39;).hide(); }); 
$(&#39;.tutup&#39;).click(function() { 
$(&#39;.my-konversi&#39;).hide();
$(&#39;.tutup&#39;).hide(); 
$(&#39;.konversi&#39;).show(); }); 
$(&#39;.show_emo&#39;).click(function() { 
$(&#39;.comment_emo_list&#39;).toggle(&#39;slow&#39;);
 }); }); 
</script> 
<div class='my-konversi'><br/> 
<script src='http://yourjavascript.com/84141947611/konversi-kode.js' type='text/javascript'/>
</div> 
<div class='comment_emo_list'/> 
<data:blogTeamBlogMessage/> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/> 
</b:if> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/> 
</b:if> 
<iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor'/> 
<b:else/> 
<p><data:blogCommentMessage/> <br/><br/>
<span class='konversi pencet'>Konversi Kode</span><span class='tutup pencet' style='display:none'>Tutup Konverter!</span><span class='show_emo pencet'>Emoticon</span></p>
<script type='text/javascript'> 
$(document).ready(function() { 
$(&#39;.konversi&#39;).click(function() { 
$(&#39;.my-konversi&#39;).show(); 
$(&#39;.tutup&#39;).show(); 
$(&#39;.konversi&#39;).hide(); 
}); 
$(&#39;.tutup&#39;).click(function() { 
$(&#39;.my-konversi&#39;).hide(); 
$(&#39;.tutup&#39;).hide(); 
$(&#39;.konversi&#39;).show(); 
}); 
$(&#39;.show_emo&#39;).click(function() { 
$(&#39;.comment_emo_list&#39;).toggle(&#39;slow&#39;); 
}); }); 
</script> 
<div class='my-konversi'><br/> 
<script src='http://yourjavascript.com/84141947611/konversi-kode.js' type='text/javascript'/></div> 
<div class='comment_emo_list'/> 
<data:blogTeamBlogMessage/> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
<a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/> 
</b:if> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/> 
</b:if> 
<iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor'/> 
</b:if> 
<data:post.friendConnectJs/> 
<data:post.cmtfpIframe/> 
<script type='text/javascript'> BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;); </script> 
</div> 
</b:includable>

6. Cari lagi kode

]]></b:skin> 

7. Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode ]]></b:skin> 

 #comments .pencet {  
color : #fff;  
margin-right : 10px;  
padding : 4px 15px;  
background-color : #e74c3c;  
font-size : 12px;  
font-weight : 400;  
text-transform : none;  
border-radius : 4px;  
text-decoration : none;  
outline : none;  
box-shadow : 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 2px #333;  
text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.3);  
transition : background-color 1s 0s ease-out;  cursor : pointer;  }  
#comments .pencet a {  color : #fff !important ;  }  
.my-konversi {  
display : none;  
background : none;  
width : 100%;  
height: 265px;  
margin-bottom : 5px;  }

8. Simpan

Cara Membuat Show Hide Emoticon Pada Komentar Blog

Sebelum sobat menerapkan tutorial ini, sobat harus menerapkan tutorial yang saya berikan sebelum nya. Yaitu Cara Pasang Emoticon Pada Komentar Blog. Tujuan dari sobat harus membaca dulu tutorial tersebut, karena tutorial ini sangat berkaitan dengan tutorial tersebut. Jika sobat sudah menerapkannya, dan emoticon sudah terpasang, maka sobat baca tutorial ini.

1. Login Blogger
2. Template
3. Edit HTML
4. Cari kode

 .comment_emo_list {
display: none;
}

5. Cari dan hapus kode dibawah ini

<div class='comment_emo_list'/>

6.  Cari dan hapus kode diatas pada bagian comment_form seperti dibawah ini

<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>

7. Cari lagi kode

<b:includable id='comment-form' var='post'>

8. Setelah ketemu kode diatas, kemudian klik titik titik disebelah kode tersebut. Untuk lebih jelasnya, lihat gambar dibawah ini

9. Kemudian scroll ke bawah sedikit dan temukan kode

<data:blogTeamBlogMessage/>

Cari yang paling bawah kemudian paste kode dibawah ini tepat DIATAS kode <data:blogTeamBlogMessage/> 
*Keterangan: Ingat! Scroll kebawah sedikit, lalu cari yang paling bawah.

<div style='margin-bottom: 5px;'>
<input 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;Hide Emoticon&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;Show Emoticon&apos;;}' 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: &quot;Open Sans&quot;, 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>

10. Simpan
Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger

Judul	Cara Membuat Show Hide Emoticon Dan Konversi Kode Di Form Threaded Comments
Deskripsi	Cara membuat show hide emoticon dan tombol konversi kode di form threaded comments yang dapat memudahkan pengunjung Anda berekspresi.
Author	Google
Author Rating	95%/ 100% Suara Dari 2759 votes