Memasang Tombol Konversi Emoticon di Form Threaded Comments

Hai,Bro Chibiblogs sekarang saya akan memberikan tutorial dari blog sebelah nih (http://idblanter.com),tentunya tutorial ini sangatlah menarik dan sangat sayang untuk di lewatkan 
Judul dari tutorial ini Membuat Tombol konversi code ala idblanter di comment kalian ,Jika kalian seorang blogger pemula atau blogger professional pasti kalian pernah melihat ini kan di blog-blog professional,,Jika pernah maka kalian beruntung sekali karena dapat melihat Tutorial ini.
Dan sekarang saya akan memberikan tutorial HIDE/SHOW Emo dan bonus konversi code.

Hai,Bro Chibiblogs sekarang saya akan memberikan tutorial dari blog sebelah nih (http://idblanter.com),tentunya tutorial ini sangatlah menarik dan sangat sayang untuk di lewatkan 
Judul dari tutorial ini Membuat Tombol konversi code ala idblanter di comment kalian ,Jika kalian seorang blogger pemula atau blogger professional pasti kalian pernah melihat ini kan di blog-blog professional,,Jika pernah maka kalian beruntung sekali karena dapat melihat Tutorial ini.
Dan sekarang saya akan memberikan tutorial HIDE/SHOW Emo dan bonus konversi code.

Berikut Tutorialnya :
1.Masuk ke Blogger
2.Pilih template >> Edit HTML
3.Cari code ini 

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

4. Ganti kode di atas dengan Kode di bawah 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> 

5. Langkah selanjutnya beri CSS dibawah ini dan letakan di atas ]]><b:skin> atau </style>   .

 #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;
} 

Langkah Terakhir Simpan template Bro and sis...

Jika ada yang kurang jelas dapat berkomentar di bawah ini.. silahkan beritahu masalahnya nanti kita selesaikan sama-sama 

Sekian..