Hai sobat Blanter, sekarang saya akan memberikan tutorial yang sangat menarik, tutorial ini sambungan dari Tutorial yang lalu yaitu ''Membuat Threaded Comment Hack'' ada seseorang yang bertanya pada saya, kok di Threaded Comment Hacknya nggak kelihatan emoticonnya,, dan sekarang saya akan memberikan tutorial dari pertannyaan tersebut bedanya ini bukan hanya show emoticon melainkan SHOW HIDE emoticon, dan bonus Konversi Kode,,,
Langsung Lihat Tutorialnya
1. Masuk ke Blogger
2. Pilih Template >> Edit HTML
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. 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;
}
UPDATE !!!
Jika Emoticon timbul ganda seperti yang dibawah ini
Silahkan hapus kode pemanggil emoticon-nya yang ada di Comment_Form seperti ini :
<div class='comment_emo_list'/>Code Ini Biasanya Ada Tiga, Coba hapus code yang Terakhir
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
Source : http://the-anarchyta.blogspot.com/2014/04/memasang-tombol-konversi-emoticon-di.html
