Cara Memasang Tombol Konversi Emoticon di Form Threaded Comments

Selamat Siang Sahabat Blogger..
Pada siang ini Admin Maf tuhi Mu share
Tutorial Memasang Tombol Konversi Emoticon di Form
Untuk demo Bisa Lihat di Blog ini Atau Lihat SS yang saya berikan
yuk langsung aja simak ..,Tenang aja caranya mudah kok ^_^

TUTORIAL

1. Cari kode berikut untuk mempermudah pencarian Tekan CTL+F

<b:includable id='threaded-comment-form' var='post'>...</b:includable>

2.Ganti kode yang tadi 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> 

3.jika sudah Copy kode dibawah ini dan letakan di atas ]]><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; 
} 

 
4. Langkah Terakhir save template sahabat..

semoga bermanfaat jangan lupa tinggalkan jejak yah.. !! Salam Blogger

Share artikel ke: Facebook Twitter Google+ Linkedin Technorati Digg

Ditulis Oleh : Unknown

Sahabat sedang membaca artikel tentang Cara Memasang Tombol Konversi Emoticon di Form Threaded Comments. Jika Berkenan Klik Tombol Share di atas yah ..!!! <a href="https://caramaftuhi.blogspot.com/2014/04/cara-memasang-tombol-konversi-emoticon.html" target="_blank">Cara Memasang Tombol Konversi Emoticon di Form Threaded Comments</a>

:: Get this widget ! ::