Membuat Tombol Konversi kode dan Emoticon Pada Threaded Komentar
Tutorial Ini Mungkin Sudah Sering Terdengar dan Populer di Kalangan Blogger. Tapi Kali Ini Blog Rumah No 48 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.
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() { $('.konversi').click(function() { $('.my-konversi').show(); $('.tutup').show(); $('.konversi').hide(); }); $('.tutup').click(function() { $('.my-konversi').hide(); $('.tutup').hide(); $('.konversi').show(); }); $('.show_emo').click(function() { $('.comment_emo_list').toggle('slow'); }); }); </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 == "static_page"'> <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + 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() { $('.konversi').click(function() { $('.my-konversi').show(); $('.tutup').show(); $('.konversi').hide(); }); $('.tutup').click(function() { $('.my-konversi').hide(); $('.tutup').hide(); $('.konversi').show(); }); $('.show_emo').click(function() { $('.comment_emo_list').toggle('slow'); }); }); </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 == "static_page"'> <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + 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('<data:post.appRpcRelayPath/>', '<data:post.communityId/>'); </script> </div> </b:includable>
5. Dan Tambahkan CSS Berikut, Letakan diatas Code ]]></b:skin>
6. Simpan Dan Lihat Hasilnya.
7. Jika emoticon muncul double atau sudah terdapat emoticon bawaan template, Silahkan hapus kode pemanggil emoticon-nya yang ada di Comment_Form seperti ini :
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() { $('.konversi').click(function() { $('.my-konversi').show(); $('.tutup').show(); $('.konversi').hide(); }); $('.tutup').click(function() { $('.my-konversi').hide(); $('.tutup').hide(); $('.konversi').show(); }); $('.show_emo').click(function() { $('.comment_emo_list').toggle('slow'); }); }); </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 == "static_page"'> <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + 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() { $('.konversi').click(function() { $('.my-konversi').show(); $('.tutup').show(); $('.konversi').hide(); }); $('.tutup').click(function() { $('.my-konversi').hide(); $('.tutup').hide(); $('.konversi').show(); }); $('.show_emo').click(function() { $('.comment_emo_list').toggle('slow'); }); }); </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 == "static_page"'> <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + 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('<data:post.appRpcRelayPath/>', '<data:post.communityId/>'); </script> </div> </b:includable>
5. Dan Tambahkan CSS Berikut, Letakan diatas Code ]]></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;
}
.comment_emo_list {
display : none;
}6. Simpan Dan Lihat Hasilnya.
7. Jika emoticon muncul double atau sudah terdapat emoticon bawaan template, Silahkan hapus kode pemanggil emoticon-nya yang ada di Comment_Form seperti ini :
<div class='comment_emo_list'/>