Cara Membuat Tombol Show Hide Emoticon Di Atas Komentar Blog

Ivo Blog │Untuk artikel saya kali ini merupakan permintaan dari salah satu teman Blogger saya yang menanyakan bagaimana cara membuat Tombol Show Hide emoticon di Blog saya itu?.Nah dari sana saya kepikiran untuk membuatkannya tentang tutorial cara membuat Tombol Emoticon ini.Tapi ingat ya sobat bukan berarti tutorial ini hanya untuk dia saya buatkan melainkan untuk sobat Blogger semua.

Tombol Emoticon ini mungkin wajib dipasang untuk Blogger yang memasang Emoticon di Blog nya.Kenapa?,karena dengan adanya tombol ini membuat tampilan Blog kita lebih indah dan lebih sederhana.Untuk sobat yang penasaran dengan Contohnya silahkan lihat Screen Shotnya dibawah ini.

Tombol Show Hide Emoticon 

Atau Lihat Langsung Demonya Disini.
Demo

Oke sobat berikut Tutorialnya :
  • Pertama silahkan Loggin dulu ke Blog sobat.
  • Setelah itu sobat klik Template > Edit Html,Lalu silahkan sobat cari kode ]]></b:skin> .Biar lebih mudah gunakan F3 atau CTRL+F di Keyboard PC sobat.
  • Jika sudah ketemu silahkan sobat copy kode dibawah ini dan taruh tepat di atas kode ]]></b:skin>.
-----@ak~emoticon----
#comments .red-button{
color:#fff;
margin-right:10px;
padding:4px 15px;
background-color:#A00F0F;
font-size:12px;
font-family: &#39;Open Sans&#39;, sans-serif, &#39;Segoe UI&#39;,Arial,Tahoma;
font-weight:400;
text-transform:none;
border-radius:4px;
text-decoration:none;
outline:none;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #333;
text-shadow:0px -1px 0px rgba(0,0,0,0.3);
transition: background-color 1s ease-out 0s;
cursor:pointer;
}
#comments .red-button a{
color:#fff !important;
}
#comments .red-button a:hover{
text-decoration:none;
}
#comments .red-button:hover {
background-color:#6F0A0A;
color:#ffffff;
}
#comments .blue-button{
color:#fff;
margin-right:10px;
padding:4px 15px;
background-color:#38f;
font-size:12px;
font-family: &#39;Open Sans&#39;, sans-serif, &#39;Segoe UI&#39;,Arial,Tahoma;
font-weight:400;
text-transform:none;
border-radius:4px;
text-decoration:none;
outline:none;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #333;
text-shadow:0px -1px 0px rgba(0,0,0,0.3);
transition: background-color 1s ease-out 0s;
cursor:pointer;
}
#comments .blue-button a{
color:#ffffff !important;
}
#comments .blue-button a:hover{
text-decoration:none;
}
#comments .blue-button:hover {
background-color:#000264;
color:#ffffff;
}
.myframe {
    display: none;
    background: none repeat scroll 0% 0% transparent;
    width: 100%;
    height: 315px;
    margin: 5px 0;
}
.emotki {
margin:10px 0;
width:100%;
font-size: 80%;
color:red;
text-align:center;
display: inline-block;
}
  • Nah setelah itu jangan di save dulu sobat,sekarang saatnya sobat cari kode berikutnya yaitu kode <p><data:blogcommentMessage/></p>.Biasanya kode ini terdapat 4 buah dalam setiap template silahkan sobat copy kode dibawah ini dan pastekan tepat sebelum kode penutup </p>.silahkan sobat pastekan pada kode ke 2 dan ke 4.
<br/>
<span class='buka_emo blue-button' style='background:#38F'>Emoticon</span>
  • Kemudian terapkan kode dibawah ini setelah tag penutup </p>.terapkan juga pada kode ke 2 dan ke 4.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('.buka_emo').click(function() {
        $('.emotki').slideToggle('slow');
    });
});
//]]>
</script>
<strong class='emotki' style='display:none'>
<div style='overflow:auto; width:100%px; height:auto; padding:5px 5px 5px 5px; background: #000000;'>
Tulisan Silahkan Taruh kode emoticonnya disini
</div>
</strong>
  • Silahkan ganti Tulisan Silahkan Taruh kode emoticonnya disini dengan kode emotikon sobat masing-masing.
  • Untuk langkah terakhir silahkan cari kode </head>.Dan pastekan kode Jquery dibawah ini diatas kode tersebut.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
  • Terakhir Save Template.
Demikianlah Artikel dari saya semoga bermanfaat.Jika ada pertanyaan silahkan beri komentar dibawah.Jangan lupa untuk tekan tombol G+ agar blog ini bisa selalu berbagi artikel bermanfaat untuk sobat semua.Terima kasihh....

13 Responses to "Cara Membuat Tombol Show Hide Emoticon Di Atas Komentar Blog"

  1. kebetulan ane lagi nyari nih, kalo bikin recent komentar di sebelah kanan blog gimana yah? hehe

    ReplyDelete
  2. gan req tutorial menu horizontal yang ngikut kalo scrool ke bawah ikut ke bawah dong

    ReplyDelete
  3. mantaps gan ! punya ane juga sudah tak pasang kayak gitu :D

    ReplyDelete
  4. cara taro kode emoticonnya gimana gan? hehe sorry banyak nanya? :b

    ReplyDelete
    Replies
    1. taruh kode emoticon ini pada tulisan yang saya bikin SILAHKAN TARUH KODE EMOTICON DISINI gan.... nih scriptnya
      <blockquote><img border='0' src='http://3.bp.blogspot.com/-IMZRWcicLy0/VJwlNxSBZTI/AAAAAAAAH0c/sjZFFVhcjV0/s1600/20.gif'/>:a

      <img border='0' src='http://3.bp.blogspot.com/-fsoA2BMN4iI/VJwgWT0NTsI/AAAAAAAAHyA/YLPR9-Yk7I8/s1600/1.gif'/>:b

      <img border='0' src='http://1.bp.blogspot.com/-XVwYGjE6ETE/VJwgf6K1mNI/AAAAAAAAHzU/c63-ee5iLhc/s1600/2.gif'/>:c

      <img border='0' src='http://4.bp.blogspot.com/-kZdjM8FlnTE/VJwghhEWx6I/AAAAAAAAHzc/pCweMDj8lGQ/s1600/3.gif'/>:d

      <img border='0' src='http://3.bp.blogspot.com/-aGrGq0SL4hA/VJwgiIg4WZI/AAAAAAAAHzg/PzsDwnNZPU8/s1600/4.gif'/>:e

      <img border='0' src='http://4.bp.blogspot.com/-HbPjEQkchhs/VJwgiY9KCSI/AAAAAAAAHz4/TedM5FNl1sk/s1600/5.gif'/>/:f

      <img border='0' src='http://3.bp.blogspot.com/-yy05tw8HEkU/VJwgipgxLMI/AAAAAAAAHzk/WxV7KdWAmkE/s1600/6.gif'/>:g

      <img border='0' src='http://2.bp.blogspot.com/-E7JV23N0Zv0/VJwgjein7-I/AAAAAAAAHzw/pYWJ5bSV58U/s1600/7.gif'/>:h

      <img border='0' src='http://4.bp.blogspot.com/-PLy7gAMZzgI/VJwgkMtJ6mI/AAAAAAAAHz0/QHo_7PpUdRc/s1600/8.gif'/>:i

      <img border='0' src='http://3.bp.blogspot.com/-t7Fsv8B2t2Y/VJwglQLmadI/AAAAAAAAH0E/O-tCvs0dR2k/s1600/9.gif'/>:j

      <img border='0' src='http://2.bp.blogspot.com/-aOg2ntoqjQs/VJwgW7ZHt-I/AAAAAAAAHyI/Ulg15rY7FSc/s1600/10.gif'/>:k

      <img border='0' src='http://4.bp.blogspot.com/-fYFeVNA9L58/VJwgWBaVSLI/AAAAAAAAHx8/zuuFnOD3ujU/s1600/11.gif'/>:l

      <img border='0' src='http://2.bp.blogspot.com/-rJkFzjmTvnE/VJwgaCXosBI/AAAAAAAAHyY/Bq6NxKdeWQ4/s1600/12.gif'/>:m

      <img border='0' src='http://4.bp.blogspot.com/-NQmbTmM4V4w/VJwgZ6A62FI/AAAAAAAAHyU/VgmJoGT-SYw/s1600/13.gif'/>:n

      <img border='0' src='http://1.bp.blogspot.com/--svIFGl5GbU/VJwgaW-IZoI/AAAAAAAAHyc/BWNwVuUsDi4/s1600/14.gif'/>:o

      <img border='0' src='http://2.bp.blogspot.com/-lARLakqOw8c/VJwgb-j-w6I/AAAAAAAAHys/Fob_5_Bl6Yo/s1600/15.gif'/>:p

      <img border='0' src='http://4.bp.blogspot.com/-4rdtUL0cREg/VJwgcTd5psI/AAAAAAAAHyw/-HAOrOTeNGA/s1600/16.gif'/>:q

      <img border='0' src='http://1.bp.blogspot.com/-hM7efGibkZM/VJwgcSZjNqI/AAAAAAAAHy4/8hKOfil_fvM/s1600/17.gif'/>:r

      <img border='0' src='http://2.bp.blogspot.com/-5qfqOximDDM/VJwgd-t_eWI/AAAAAAAAHzE/fUWXBTsaM4c/s1600/18.gif'/>:s

      <img border='0' src='http://3.bp.blogspot.com/-377nNXRIY_I/VJwgeflev9I/AAAAAAAAHzI/w98cVMvz8-o/s1600/19.gif'/>:t</blockquote>

      Delete
  5. silahkan agan hapus kode blockquotenya..... dan tambahkan kode ini diatas kode </body> <script src='https://aakyos.googlecode.com/svn/smiley_komentar.js' type='text/javascript'/>

    ReplyDelete
  6. setelah format gif'> silahkan agan tambahkan kode pemnaggil emotikon misalnya :l

    ReplyDelete
  7. Aduh gan makasih udah dijawab, ini saya pengen masang emoticonnya tapi dari kemaren gak jadi2 makasih ye sekali lagi..

    ReplyDelete
  8. keren gan,langsung tak praktekkin

    ReplyDelete

>>>>>Peraturan Berkomentar di Blogger Ini.<<<<<

[+] Komentar membangun lebih disukai
[+] Kami wajib menghapus komentar yang melecehkan, kasar, dan bertendensi SARA.
[+] Link aktif dalam komentar akan terhapus secara otomatis.
[+] Jika ingin menaruh Link Aktif Silahkan klik menu Tukar Link.
[+] Jika ingin berkomentar diluar topik postingan harap beri tanda OOT atau Klik Tombol OOT.
[+] Jika Ingin menggunakan Emoticon silahkan Klik Tombol Emoticon.
[+] Jika Ingin Request Tutor silahkan Klik Tombol OOT dibawah atau pergi ke Menu OOT.

Terima Kasih........

Konversi Kode Emoticon OOT