Membuat Show Hide Konversi kode & Emoticon pada Komentar Blog

Membuat Show Hide Konversi kode & Emoticon pada Komentar Blog

Sudah banyak tutorial tentang membuat show hiden konversi & emoticon pada komentar Blogger, saat ini saya akan mencoba menuliskan tentang cara tentang membuat show hiden konversi & emoticon pada komentar Blogger. sedikit cerita ketika pemasangan ada sedikit problem yang saya temukan yaitu show hide Konversi kode dan emoticon ketika saat saya klik tidaklah berfungsi, dan kolom komentar tidaklah terbentuk sempurna menjadi ganda.


 Saya mencoba memperbaikinya. Jika sobat ingin menerapkannya, berikut ini penerapannya ;

1. langkah pertama Kita akan membuat tombol untuk membunculkan dan menyembunyikan konversi kode dan emoticon, latakkan kode CSS dibawah ini sebelum ]]></b:skin>

 -----@ak~konversi&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>, terdapat 4 buah kode tersebut letakan kode dibawah ini pada  kode ke 2 dan ke 4 dan terapkan sebelum tag penutup </p>


 <br/>
<span class='konversi red-button'>Konversi Kode</span>
<span class='tutup red-button' style='display: none;'>Tutup Konversi Kode</span>
<span class='buka_emo blue-button' style='background:#38F'>Emoticon</span>

 Gambar :


3. Langkah ke 3 sobat terapkan kode dibawah ini pada  kode ke 2 dan ke 4 dan terapkan sesudah tag penutup </p>

 <script>
$(document).ready(function() {
     $(&#39;.konversi&#39;).click(function() {
$(&#39;.myframe&#39;).show();
        $(&#39;.tutup&#39;).show();
        $(&#39;.konversi&#39;).hide();
     });

     $(&#39;.tutup&#39;).click(function() {
        $(&#39;.myframe&#39;).hide();
        $(&#39;.tutup&#39;).hide();
        $(&#39;.konversi&#39;).show();
     });

     $(&#39;.buka_emo&#39;).click(function() {
        $(&#39;.emotki&#39;).slideToggle(&#39;slow&#39;);
     });
});
</script>
<div class='myframe' style='display:inline-block;display:none;'>
   <iframe allowfullscreen='allowfullscreen' class='myframe' src='https://googledrive.com/host/0B-GXzRKoPbNnRkdncDdGbDNhZkk'/>
</div>
<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

Demikian cara Membuat Show Hide Konversi kode & Emoticon pada Komentar Blog, Semoga bermanfaat.

Banyak dibaca:

Loading...
Buka Komentar