Membuat Slide Top Panel di Blogspot

Sudah tahukan Stripe Ads ala Blogger Navbar buatan Om Agus ? Untuk kesempatan kali ini, saya 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 </b:skin>


/*--- 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 <body>

<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.

Tinggalkan komentar jika ada masalah ya . Happy Blogging :$.

10 komentar:

15 Juli 2009 pukul 22.53 Unknown mengatakan...

Thanks friends.

www.friendzetta.blogspot.com

Follow Me Please...

I appreciated it.

18 Juli 2009 pukul 12.49 Pujangga mengatakan...

Thank's atas tipsnya, bro..
Salam akrab ya...

26 Juli 2009 pukul 21.09 Tongkonan mengatakan...

Keren mas, saya mau pasang ah diblog-ku.

27 Juli 2009 pukul 22.26 Aku Tidak Juga Kau mengatakan...

menarik sekali, pengin coba, terima kasih :D

8 September 2009 pukul 14.36 ardianzzz mengatakan...

oh, pake mootools ya..

22 Mei 2010 pukul 16.49 Bursa Bisnis Gratis mengatakan...

sangat menarik dan bermanfaat sob..jangan lupa kunjungan balik anda sangat kami nantikan untuk kelangsungan hidup blog kami =))

24 Mei 2010 pukul 08.37 Unknown mengatakan...

Kok gak mau di Hide Bos panel nya??? Lihat Blog we: http://nasakomputer.co.cc

3 Juni 2010 pukul 20.38 th3software mengatakan...

sipp..!!!

27 Oktober 2010 pukul 15.55 Unknown mengatakan...

mas maaf mau tannya kalo tampilannya tidak langsung kebuka gimana ya.
jadi tampilannya di klik baru terbuka slide nya.
kalau tidak di klik tampilan biasa hanya terlihat hide panel.

mungkin bisa gak ya jadi Open Panel

trims
Mohon Bantuannya

20 April 2012 pukul 08.45 Unknown mengatakan...

Thanks friends.

www.didiksus4nto.blogspot.com

Follow Me Please...

I appreciated it.

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

Anda bisa menggunakan HTML seperti <b> , <i>, <s>, <a> ... Jangan spamming, komentar bernada spam akan kami hapus.
Terima kasih telah berkomentar di JogjaWiki

 

Post yang berkaitan :

Grab this Widget ~ Blogger Accessories
 
© Copyright 2010 - Jogja Wiki Blog - Best viewed in 1152 x 864 pixel by Mozzila Firefox
Our Network at Bloggercustom and Healthy Tips | Post Entries | Comments -