Memasang Tombol Konversi Emoticon di Form Threaded Comments

Memasang Tombol Konversi Emoticon di Form Threaded Comments

Rio Ilham Hadi

20 April 2014

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,,,

             BERIKUT  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 diatas dengan kode dibawah 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. Langkah selanjutnya beri CSS dibawah ini dan letakan di atas ]]><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; 
} 

Langkah terakhir Simpan Template sobat...

Jika ada yang kurang jelas silahkan beritahu masalahnya dalam kolom komentar, jika ada pertanyaan saya akan secepatnya membalas pertanyaan tersebut,,, dan jangan lupa Like dan Share Tutorial ini,, siapa tahu masih banyak sobat blogger diluar sana yang mencari2 tutorial ini...

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

Cara Merubah Konversi Kode...

Share This