Memasang Tombol Konversi Emoticon di atas Kotak Komentar

zoct net cinema

blogger, tutorial

Belum ada komentar

Selamat malam sobat blogger semua, pada malam ini saya coba akan berbagi trik Memasang Tombol Konversi Emoticon di Form Threaded Comments... Artikel ini sebenarnya udah populer di kalangan blogger, tapi apa salahnya untuk berbagi ilmu kepada sobat blogger semua sekaligus sebagai jawaban pada OOT yg menyankan gimana nambahin tombol show hide konversi kode dan emoticon di bawah pesan komentar?

Berikut tutorialnya

1. Masuk ke Blogger.com
2. Template dan pilih Edit Template (Jangan Lupa Back Up dulu Templatenya)
3. Cari Kode berikut di bawah 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. Kalau sudah jangan lupa untuk memasukan kode CSS berikut di atas kode ]]></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; 
}

Terakhir "Save" template sobat..
Sekian tutorial mengenai Memasang Tombol Konversi Emoticon di Form Threaded Comments. Semoga bermanfaat untuk sobat blogger semua. Jika sobat menyukai Artikel ini silahkan beri vote dengan meng-klik salah satu tombol di bawah ini.
Terima kasih buat sobat blogger semua :D