Wednesday 31 July 2013

Cara Menampilkan Dan Menyembunyikan Kotak Komentar Secara otomatis



Lansung aja gan pada episode kali ini kita akan mempelajari tentang cara membuat Show-Hide Pada kotak komentar dengan cara yang sangat mudah...silahkan agan simak baik - baik tutorialnya...

Masuk blog agan
pilih template/edit html
cari kode ]]></b:skin> gunakan ctrl + f untuk mempermudah agan dalam pencarian kodenya
jika sudah ketemu copas kode dibawah ini dan letakan diatas tag ]]></b:skin>



/* Panel Comments */
a.openpanel {
display:block;
width:auto;
padding:0px 0px;
text-align:center;
font-weight:bold;
line-height:32px;
background-color:#000;
color:white;
text-decoration:none;
margin:0px 0px;
-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(0,0,0,0.2);
position:relative;
}
a.openpanel em {
width:0px;
height:0px;
display:block;
position:absolute;
top:15px;
right:15px;
border:6px solid transparent;
border-top-color:white;
}
a.openpanel.active {background-color:#303030;}
a.openpanel.active em {
top:6px;
border-color:transparent transparent white transparent;
}
div.paneline {
height:0px;
border-bottom:4px inset #1a1a1ab;
}
div.hompiPanel {
padding:10px 20px 20px;
-webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
-moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
margin:0px 0px !important;
}
Jangan beranjak dari situ gan cari kode </head> letaknya juga tidak jauh dibawah kode ]]></b:skin> kok...
jika sudah ketemu copas lagi kode dibawah ini dan letakan diatas tag </head>
<script src='http://reader-download.googlecode.com/svn/trunk/blogger-slide-panel-comments.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var panelSelector       = '#comments',
    openPanelText       = "Open Comment",
    closePanelText      = "Close Comment",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed   = 400;
//]]>
</script>
Setelah Dimodifiikasi




Langkah terakhir save template agan dan lihat hasilnya....
selamat mencoba gan semoga bermanfaat........ 

No comments:

Post a Comment

Silahkan Komen Rider,