Tombol Konversi Emotion Dan Out of Topic pada komentar Threaded bertujuan mempermudah pengunjung memberikan komentar misalnya buat mengkonversian kode dan emotion buat menunjukan bahasa tersendiri yang sulit diurai dengan kalimat.
Memang terlambat posting mengenai Tombol Konversi Emotion Dan Out Of Topic Threaded, akan tetapi kode berikut tidak memblokir render atau kesalahan pada google speed insight dan sudah valid html 5.
Nah selanjutnya langsung saja Cara Membuat Tombol Konversi Emotion Dan Out Of Topic Komentar Threaded :
1. Pertama seperti biasa masuk Masuk ke Blogger.com, Template dan pilih Edit Template (Jangan Lupa Back Up dulu Templatenya), untuk mempercepat pencarian gunakan CTRL+F cari kode berikut seperti kode dibawah:
<b:includable id='threaded-comment-form' var='post'>...</b:includable>
2. Kemudian ganti dengan kode seperti dibawah ini :
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'><div class='comment-form' id='comment-form'>
<b:if cond='data:mobile'>
<div class='my-konversi'><br/>
</div>
<b:else/>
<p><data:blogCommentMessage/>
<br/><br/><span class='konversi pencet'><i class='icon-circle-arrow-right'/>Konversi Kode</span><span class='tutup pencet' style='display:none'>Tutup Konverter!</span>
<span class='show_emo pencet'><i class='icon-smile'/>Emotion</span>
<a class='oot' href='https://www.facebook.com/God.of.justice?ref=tn_tnmn' target='blank'>
<i class='icon-question-sign'/>Out Of Topic</a>
</p>
<div class='my-konversi'><br/>
<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>
<style scoped='scoped' type='text/css'>
#codes {
border: none;
width: 98%;
height: 150px;
margin: 10px auto 10px;
display: block;
background-color: #42576c;
padding: 5px;
font: normal 12px 'Courier New',Monospace;}
#codes:focus {
background-color: #384c60;
color: white;}
.button-group {
margin: 0px auto 0px;
text-align: center;}
button,button[disabled]:active {
background-color: #384c60;
font: bold 11px Tahoma,Verdana,Arial,Sans-Serif;
color: #999;
padding: 5px 10px;
border: none;
cursor: pointer;}
button:active {
background-color: #21afa4;
color: black;}
button[disabled],button[disabled]:active {
opacity: 0.4;
cursor: default;}
#opt1, #opt2, #opt3, #opt4, #opt5 {
display: none;}
</style>
</div>
<textarea id='codes' placeholder='Tulis/paste kode di sini lalu klik 'Konversi'' spellcheck='false'/>
<div class='button-group'>
<button id='cvrt' onclick='cdConvert();this.disabled = true;'>Konversi</button>
<button onclick='cdClear();'>Bersihkan</button>
</div>
<input id='opt1' type='checkbox'/>
<input id='opt2' type='checkbox'/>
<input id='opt3' type='checkbox'/>
<input id='opt4' type='checkbox'/>
<input id='opt5' type='checkbox'/>
<script type='text/javascript'>
//<![CDATA[
function cdClear(){var wtarea=document.getElementById('codes');wtarea.value='';wtarea.focus();document.getElementById('cvrt').disabled=false}function cdConvert(){var ctarea=document.getElementById('codes'),cv=ctarea.value,opt1=document.getElementById('opt1'),opt2=document.getElementById('opt2'),opt3=document.getElementById('opt3'),opt4=document.getElementById('opt4'),opt5=document.getElementById('opt5');cv=cv.replace(/\t/g," ");if(opt1)cv=cv.replace(/&/g,"&");if(opt2.checked)cv=cv.replace(/'/g,"'");if(opt3.checked)cv=cv.replace(/"/g,""");if(opt4)cv=cv.replace(/</g,"<");if(opt5)cv=cv.replace(/>/g,">");if(cv.lastIndexOf('\n')!=-1||cv.length>40){cv=cv.replace(/^/,"<i rel=\"pre\">")}else{cv=cv.replace(/^/,"<i rel=\"code\">")}cv=cv.replace(/$/,"</i>");ctarea.value=cv;ctarea.focus();ctarea.select()};
//]]>
</script>
</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></div>
</b:includable>
3. Ketiga, memasukan kode CSS berikut di atas kode
]]></b:skin> atau
</style>
#opt1, #opt2, #opt3, #opt4, #opt5 {display: none;}
.comment_emo_list {display : none;clear : both; width : 100%;}
#comments .pencet{color:#fff;margin-right:10px;padding:4px 15px;background-color:#e74c3c;
font-size:12px;font-weight:400;text-transform:none;text-decoration:none;outline:none;cursor:pointer;}
#comments .pencet a {color:#fcf !important;}
#comments .oot {color:#ffffff;margin-right:10px;padding:4px 15px;background-color:#F1C40F;
font-size:12px;font-weight:400;text-transform:none;text-decoration:none;outline:none;cursor:pointer;}
.my-konversi {display:none;background:none;width:100%;height:265px;margin-bottom:5px;}
4. Save Template.
Selesai, Cara Membuat Tombol Konversi Emotion Dan Out Of Topic