Cara Memasang Tombol Konversi dan Emoticon di Threaded Comment

Cara Memasang Tombol Konversi dan Emoticon di Threaded Comment - Tutorial Ini Mungkin Sudah Sering Terdengar dan Populer di Kalangan Blogger. Tapi Kali Ini J4rviz Blog Akan Mengulasnya Kembali Untuk Sobat Sobat Blogger Yang Ingin Memasang Tombol Konversi dan Emoticon di Threaded Comment. Tombol Konversi Berguna Untuk Memparse Code HTML Sedangkan Tombol Emoticon Berguna Untuk Show dan Hide Emoticon pada Threaded Comment. Tidak Berlama Lama Lagi . Simak Tutorialnya..

TUTORIAL

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. Dan Tambahkan CSS Berikut, Letakan diatas Code ]]></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;
    }
    .comment_emo_list {
    display : none;
    clear : both;
        width : 100%;
}

6. Dan Yang Terakhir, Simpan Template Dan Lihat Hasilnya :D

Oke... Sekian Dari Saya Semoga bermanfaat.
terima kasih sudah berkunjung dan jangan lupa Comment Dan Follow Blog ini Untuk Mengikuti Update Terbaru dari J4rviz Blog

Sumber: http://the-anarchyta.blogspot.com/2014/04/memasang-tombol-konversi-emoticon-di.html