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.

 

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

Tweet