Tutorial tersebutlah yang kali ini akan Oto Website bagikan kepada Anda. Untuk cara pembuatannya sendiri kita membutuhkan bantuan dari jQery agar Komentar Slide Panel ini berjalan dengan semestinya.
Sceenshot dan Cara kerja
1. Cara Menginstal di Blogger
2. Masuk ke akun Blogger Anda.3. Pada Dasor pilih Template >> Edit HTML.
4. Lalu temukan tag-tag berikut:
5. Letakkan tag berikut di bawah tag <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_container").hide();
$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
6. Letakkan di atas ]]></b:skin>
/*----- Komentar Slide Panel by www.otowebsite.com ----*/
h3.trigger {
background: url(https://code-otowebsite.googlecode.com/svn/trunk/komentar slide panel.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}
- Untuk mengganti tombol panel cukup rubah kode ini 518
- Anda juga dapat menyesuaikan kode yang lainnya sesuai keinginan Anda, contoh kode yang di block kuning adalah kode untuk mengganti jenis font huruf.
7. Selanjutnya cari tag berikut:
<b:includable id='comment-form' var='post'>
lalu letakkan tag berikut di bawahnya
<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>
<div class='block'>
8. Scroll sedikit kebawah dan letakkan tag berikut di atas tag </b:includable>
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://otowebsite.blogspot.com/2013/04/komentar-slide-panel.html' style='color:#CAC8C8;'><i>Oto Website</i></a></p>
</div>
</div>
Penampilan peletakkan tag/kode nomer 7 dan 8 adalah seperti ini:
9. Simpan Tempalate Anda.
Dari Meja Editor
Saya rasa cukup sekian untuk tutorial blogger kali ini yang membahas Komentar Slide Panel, mudah-mudahan dapat bermanfaat untuk teman-teman semua. Bila ada kesulitan dalam peenginstalan Komentar Slide Panel maka silahkan ajukan pertanyaan Anda dalam komentar.
cara kopi javascript'a gmna?? bingung -_-
BalasHapusmohon pengarahannya
BalasHapus