Cara Membuat Tampilan Slide TOP Panel di blogspot

Ketemu Lagi kawan
saya habis keliling ke blog sahabat semua eh dari salah satu blog ada yang unik loh cara memasang slide top panel di blogspot.
Nah pada kesempatan kali ini, saya coba berikan tutorial tentang Slide panel yang juga dapat difungsikan layaknya stripe ads tadi, namun dengan variasi desain dan animasi yang berbeda :). Mau coba memasang slide panel ini di blogspot anda ?

Saya sarankan untuk mem-backup template anda dengan mengklik Download Template lengkap" di bagian atas Edit HTML. Kalau sudah silahkan lanjut dibaca tutorialnya ...

Klik teks Hide Panel dan slider akan sembunyi

Langusng saja, masih ditempat yang sama ( Edit HTML ) silahkan pasang kode CSS ini diatas kode

/*--- Slide Panel --- */
#top-panel{
 background:white;
 border-bottom:5px solid #a6c34e;
 padding:14px 20px;
 text-align:right;
}
#sub-panel{
 text-align:center;
}
#sub-panel a{
 width:150px;
 float:right;
 color:#FFFFFF;
 text-decoration:none;
 margin-right:30px;
 font-weight:bold;
 background:url(http://trojanbuster.googlepages.com/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
 padding:6px;
 background:url(http://trojanbuster.googlepages.com/sub-right.png) right bottom no-repeat;
 display:block;

}
strong{color:#000000;}
.face{border:solid 2px #a6c34e; margin-left:10px; float:right;}
/*--- End Slide Panel --- */

Kalau sudah, sekarang cari kode </head> dan pasang Javascript ini diatasnya :

<script src='http://trojanbuster.googlepages.com/mootools.svn.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent(&#39;domready&#39;, function(){
var mySlide = new Fx.Slide(&#39;top-panel&#39;);

$(&#39;toggle&#39;).addEvent(&#39;click&#39;, function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>

Sudah ? Terakhir pasang kode HTML-nya pasang dibawah kode

<div id='top-panel'>
<img class='face' height='40' src='http://trojanbuster.googlepages.com/face.jpg' width='40'/><strong>Berlangganan Artikel di JogjaWiki.com yuk !</strong><br/>

<a href='data:blog.url/feeds/posts/default'><img src='http://trojanbuster.googlepages.com/feed.gif'/> <i>Berlangganan via RSS</i> Feed</a>

<br/><img src='https://www.co.cc/img/favicon.ico'/><a href='http://www.linkreducer.com/WPOQIWRJ11801' target='new'><b>Domain .CO.CC gratis!</b></a></div>

<div id='sub-panel'><a href='/#' id='toggle'><span>Hide Panel</span></a></div>

Selesai. Tapi ada beberapa konfigurasi yang harus disesuaikan seperti konten didalam slide panel tadi. Bisa RSS Feed atau link referal :D

Saya sarankan, gambar dan javascriptnya kamu pindahkan ke hosting kamu sendiri. Caranya, download dulu gambar atau file JS tersebut ( kopi paste di adress - tekan enter - dan simpan filenya ) baru diupload ke Google Pages atau di Geocities.

Sealamat Mencoba tutorial cara memasang slide top panel di blogspot