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: 'Open Sans', sans-serif, 'Segoe UI',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: 'Open Sans', sans-serif, 'Segoe UI',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;
}
|
Loading...
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() {
$('.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>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>
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>
<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>
//<![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!
