Cara Membuat Tombol Emoticon Dan Konversi Kode Di Blog

"Tombol Emoticon Dan Konversi Kode"

Selamat datang agan atau aganwati kali ini Saya akan membawakan cara membuat tombol emoticon dan konversi kode di Blog, Sekaligus menjawab OOT temann saya yang request cara-caranya, artikel ini memudahkan pengunjung untuk menggunakan emoticon maupun tombol konversi kode, jadi jika ingin menerapkannya kalian harus menyimak cara-caranya: 

Langkah-langkah:

1. Silahkan agan/aganwati buka dashbor terlebih dahulu www.blogger.com

2. Pilih Menu Template => Edit HTML

3. Cari Kode Seperti ini terlebih dahulu Untuk memudakannya gunakan: 

Ctrl+F

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

4. Ganti Kode Diatas 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>

5. Jangan Lupa Menambah Kode CSS ini diatas Kode ]]></b:skin> untuk mencarinya gunakan :

 Ctrl +F 

Kode Seperti Ini:

 #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;  } .comment_emo_list {  display : none;  } 

   

6.  Simpan Template Dan Coba Lihat Hasilnya 

7. Selamat Mencoba

Sekian Dari Semoga Arttikel ini dapat berguna, Selamat Mencoba!! 

Published By: Tsani Aziz | Jika Ingin Copas Tolong Sertakan Sumber Di Bawah ini

Terimah Kasih telah membaca artikel Cara Membuat Tombol Emoticon Dan Konversi Kode Di Blog. Yang ditulis oleh Tsani Aziz .Pada hariSabtu, 13 Desember 2014. Jika anda ingin sebarluaskan artikel ini, mohon sertakan sumber link asli. Kritik dan saran dapat anda sampaikan melalui kotak komentar Dan Jika Anda Memberi Like/Share Saya Sangat Berterima Kasih. Sekian Trimakasih ^_^

<a href="http://juragandawet69.blogspot.com/2014/12/cara-membuat-tombol-emoticon-dan.html" target="_blank">Cara Membuat Tombol Emoticon Dan Konversi Kode Di Blog</a>