Pasang Tombol Konversi Kode dan Emoticon di Komentar Blog

Pasang Tombol Konversi Kode dan Emoticon di Komentar Blog 

 sobat bloggers, kembali saya share tips blogger untuk Anda. Kali ini akan saya bahas mengenai cara membuat atau cara pasang tombol konversi kode dan emoticon di kolom komentar blog. Cara pemasangannya sangatlah mudah :) ..ahanya perlu kejelian sobat untuk mengikuti tutorial ini.

Tips dan Cara Pasang Tombol Konversi Kode dan Emoticon di Blog :

1. Login ke akun Blogger Anda
2. masuk ke menu edit HTML
3. Anda copy  kode css di bawah ini dan taruh di atas kode ]]></b:skin> atau </style> dan Simpan.

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

4. Anda cari kode html berikut

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

lalu ganti 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. Save template Anda. Selamat mencoba semoga berhasil :)

sekian tutorial blogger Pasang Tombol Konversi Kode dan Emoticon di Komentar Blog, senang berbagi !!