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 ...
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('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
<script type='text/javascript'>
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', 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>
<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
Tidak ada komentar:
Posting Komentar