Posted by Aak
Aak-share.com Updated at: 6:21:00 PM

Membuat Show Hide Emoticon pada Komentar Blog

23 comments:
Sebelumnya saya telah menulisakn artikel membuat konversi kode & show hide emoticion komentar, namu untuk kali ini saya akan menulisakan membuat show hide emoticon. saya membuat tulisan ini untuk sobat yang hanya ingin terlihat lebih simpel dengan menerapkan show hide emoticon saja pada komentar tanpa ada konversi kode.


Ada beberapa langkah dalam penerapannya, jika sobat ingin menerapkannya berikut ini cara penerapannya :

1. Langkah pertama kita akan membuat untuk memunculkan emoticonnya,  sobat bisa terapkan kode CSS berikut ini sebelum ]]></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;
}


2. Langkah ke 2 sobat cari kode <p><data:blogcommentMessage/></p> , ada terdapat empat buah kode tersebut. Sobat letakkan kode dibawah ini di kode ke 2 dan ke 4 terapkan sebelum tag penutup </p>
<br/>
<span class='buka_emo blue-button' style='background:#38F'>Emoticon</span>


3. Langkah ke 3 sobat letakkan juga kode berikut di kode ke 2 dan ke 4 dan terapkan sesudah tag penutup </p>

<script>
$(document).ready(function() {
     $(&#39;.buka_emo&#39;).click(function() {
        $(&#39;.emotki&#39;).slideToggle(&#39;slow&#39;);
     });
});
</script>
<strong class='emotki' style='display:none'>
<div style='overflow:auto; width:100%px; height:auto; padding:5px 5px 5px 5px; background:#000000;'>
</div>
</strong>

4. Langkah ke 4 simpan Template

Jika Jquery di atas tidak berfungsi, Anda bisa menggunakan cara lain.
Jika Anda belum menambahkan Javascript , salin kode dibawah ini dan terapkan diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Kode diatas bertujuan untuk memfungsikan Jquery.

Kemudian terapakan kode dibawah ini sesuai langkah ke-2.

<br/>
<span class='buka_emo blue-button' style='background:#38F'>Emoticon</span>

Selanjutnya terapkan Jquery dibawah ini sesuai Langkah ke 3 , terapkan sesudah tag penutup </p>

<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;'>
</div>
</strong>

Semoga bermanfaat!
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

23 comments

emo nya sudah bekerja gan tpi tombolnya belum bekerja gan.... coba agan lihat ini ivo25.blogspot.com ...... coba liat artikel baru saya tentang related post .. liat komentnya...klo emonya bekerja tpi tombolnya itu gan yg ngk bekerja////

Balas

Jika agan ingin menampilkan emonya, coba agan tambahkan Javascript di atas /head

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>



Selanjutnya ganti dengan Jquery ini



<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

$('.buka_emo').click(function() {

$('.emotki').slideToggle('slow');

});

});

//]]>

</script>



Ganti Jquery keduanya gan

Balas

itu diganti apa cuma ditambahkan gan??

Balas

tambahkan Javascriptnya di atas /head
di ganti Jquerynya saja gan, atasnya jangan di ganti.

Balas

yang jquery itu di hapus gan??? atau cuma ditambahkan saja??

Balas

dihapus gan, di ganti dengan yang ada di komentar,

Balas

jika agan berkenan apa boleh saya request tutor postingan yg ini ditambahin gan?? ^_^ sesuai yang agan suruh diatas...soalnya saya masing bingung...... sebelumnya maaf klo saya sedikit merepotkan agan ^_^ saya mau request itu aja gan.... tutor tambahannya.....

Balas

yang diatas ></b:skin masih tetep di pakai kan gan???

Balas

Kode CSS nya masih gan itu tidak di ubah ,

Balas

satu pertanyaan lagi gan...kode script yg agan suruh pasang di atas /body masih tetep dipakai juga kan???

Balas

dan naruh kode emo nya dimana gan??

Balas

Di bawah body saja gan , agar cepat terbaca oleh template
sebagai contoh agan bisa kunjungi url berikut

http://aakyos.blogspot.com/2015/01/puisi-cinta-romantis.html

Saya coba pasang kodenya support gan.

Balas

tempat naruh emonya dimana gan???

Balas

wiihhhhh ane berhasil gan..... trus klo buat nambah tombol oot gimana gan??? :hah:

Balas

tpi ane letak tombolnya bukan di atas komentar gan tpi malah dibwah komentar :hah:

Balas

cara nambahin tombol oot gmn gan??

Balas

|o| selamat gan
Itu sesuai kehendak Agan baik mau diatas maupun dibawah komentar,
Untuk menambahkan komentar diluar topik , itu perlu penambahan CSS , HTML , dan Jquery gan.

Balas

nah yg ditambah apa aja gan???

Balas

satu lagi gan..cara ngubah backgroundnya gimana gan???

Balas

Pada Kode ini gan untuk mengubah background

<div style='overflow:auto; width:100%px; height:auto; padding:5px 5px 5px 5px; background:#000000;'>

Balas

cara nambahin tombol oot gimna gan???

Balas

dan cra menulis kode script di komentar gimana gan???

Balas

Perlu penambahan Javascript di editor template gan ,

Balas