20 April 2014

Memasang Tombol Konversi Emoticon di Form Threaded Comments


Konversi Emoticon

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...
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic