Trik Menambahkan Konversi Kode Di Blog

Author : UnknownTidak ada komentar

Hai sobat blogger muicyan, 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...

kalau ada masalah komen aja brooo.... salam blogger by muizcyan-xp

tag cara membuat tampilan komentar jadi lebih keren | cara membuat komentar tampil menarik di blogspot| trik mempercantik tampilan komentar \ cara membuat tombol konversi kode dan show hide emoticon di komentar blogger| trik menambah emoticon di komentar blogspot

Posted On : Jumat, 09 Mei 2014Time : 04.33

Trik Menambahkan Konversi Kode Di Blog

Blog Archives

Mengenai Saya