Demo :
Lihat ke bawah, dan letakkan kursor mouse diatasnya.
Copyright © 2010-2011 Nano Yulianto | Template HTML 5
Hak Cipta seluruh artikel dan template dilindungi Undang-Undang. Plagiat artikel tanpa mencantumkan sumber atau menghapus nama template yang saya buat, saya tidak segan-segan menegur atau memposting Link Blog tersebut secara permanen.
Stop Plagiarism Didukung oleh Creative Commons - Google - Yahoo - Weblogs - Blogger
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
.expstickybar{
position:fixed;
color: white;
padding: 5px;
right:0;
left:0;
visibility:hidden;
background: #e43a3d;
z-index: 10000;
width:auto;
font-weight:bold;
}
.expstickybar a{
color: white;
}
Langkah kedua > Penempatan URL JavaScript
dibawah ]]></b:skin>
........
diatas </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://pagenano.googlecode.com/files/Menu%20Bawah.js"></script>
Teks berwarna merah, jika sudah ada tidak perlu lagi !.
Penempatan
dibawah <body>
........
diatas </body>
<div id="stickybar" class="expstickybar">
<a href="#togglebar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidbNLa33zXS4U4H6WxkKXTHQTIX9uCHyu11hfodiUu9p-I861UW-wz-knqnnLMV2eJjwRsK6UmheLJ4qyCpUrYnjc0ziID7SiL6q6zTeD66mq5TRVHGxp26xB8phCCPfBwHYMVtxx9y2hH/s1600/Nano+Yulianto+-+open.gif" data-closeimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmbunpNXSDhZSWKIKc7D-Q9ogTogU4J8LOEHNlq4PzyhPyTRYb_jZu6KpxUIuQAByzkRsPPErmLjlrexRODrPh0ATdx5FM4Wa0ZIOG4g_8I6Ps8l_vxMGhT6Rbuz8y5Ag7ZM0gfllJf8EF/s1600/Nano+Yulianto+-+close.gif" data-openimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidbNLa33zXS4U4H6WxkKXTHQTIX9uCHyu11hfodiUu9p-I861UW-wz-knqnnLMV2eJjwRsK6UmheLJ4qyCpUrYnjc0ziID7SiL6q6zTeD66mq5TRVHGxp26xB8phCCPfBwHYMVtxx9y2hH/s1600/Nano+Yulianto+-+open.gif" style="border-width:0; float:right;" /></a>
<div style="text-align:center;padding-top:3px">Copyright © 2010-2011 <a href='/'>Nama Blog Anda</a></div>
Isi sesuai keinginan anda. Bisa di isi dengan teks atau dengan menu berkolom-kolom.
</div>
Credit : Dynamic Drive
Alhamdulillah
4 comments:
kalau menu bawah ini keluar kalau di hover,
kalau di ganti keluar kalau di Klik gimana?
Download Menu Bawah.js dan bagian bawah scriptnya :
revealtype:'mouseover',
mouseover diganti dengan < manual
dan upload deh... ribet kan.... hehehehe.
maksudnya
manual:'mouseover'
Atau..
revealtype:'manual'
maksudnya :
revealtype:'manual',
Posting Komentar