Cara memakai navbar auto hide.

Cara memakai navbar auto hide.

Screenshot :

Kali ini saya ingn membagikan sebuah navbar yang bagus ketia di sentuh mouse akan keluar dan jika di biarkan akan diem, untuk mempercantik blog sobat, yag berminat sialhkan baca di bawah cara penerapannya, dan jika ada yang kurang paham sialahkan komen ya..









Cara Penerapannya tinggal kita menambahkan aja ke add gatget (script html)
kemudian kopas kode di bawah ini.

<style> ul#navigation1 {position: fixed;margin: 0px;padding: 0px;top: 150px;right: 0px;list-style: none;z-index:9999;} ul#navigation1 li {width: 40px;border:0px;display: block;padding:1px;} ul#navigation1 li a {display: block;width: 150px;height: 30px;padding: 5px 10px 0 20px;margin-top: 10px;color: #F00;text-align: center;font-family:"Tahoma", Verdana;font-size:16px;font-weight:bold;background-color:transparent;background-repeat:no-repeat;background-position:left center;border:1px solid #ccc;-moz-border-radius:100px;-html-border-radius: 100px;-webkit-border-radius: 100px;opacity: 0.8;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);} ul#navigation1 .Home a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjALfAAomdjqrw_VQW75yt5u4KzmjwzjyLwjC5eVco7RZc93QWPdsE2v80wQLvhcVa202ArTqPf3DGrPc1v7HFpqm9oY9mAGgDQpMr_xjhf4YD3I4mfAyoK4FkBxl1xxqkeAtvpBtB_Jeq2/s1600/Home.png);} ul#navigation1 .Daftar-isi a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNY66gVAD_pTRMyTvxsE0ZepaUICdbORQqtJx6jG8t9gCsI1_NvnFCcI9kzWjnr-cPaDkXoX2cdJCXNQiB7yX2-vmPtwEW0siKcsbtB0nTtIfM3JuXfXJRd3LYS5zVg14nrw1v52Or3yQf/s1600/Daftar+Isi.png);} ul#navigation1 .Hubungi-saya a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwYiW0o6zw7ympX9L7KgZ4fh4tfm9EsR29yjhSTH1Eo9O55sgkonXhppa_oTP1TacJCG1auA3DrYBSt_ZuFxU9jqMr-oJyFF8rqmXZ__31DCOfKcyWLdlyoioCOZIGSQSOKhBn5fHyBlLE/s1600/Hubungi+saya.png);} ul#navigation1 .Template a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ZVnFyoZ4bV7m7TPbhKe3l1qCVGUZ6zJj66b1tiZ_zNqk1zg69-3-KJawgLL7OBb7dSP6tkrw5SF2YoIYfuyldW0Uej2iFNq8Go8AojU2ZT0qrkGYfV2gGkw0u-HDRkDoQmKlr16iYX1p/s1600/Template.png);} </style> <script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() { $('#navigation1 a').stop().animate({'marginLeft':'5px'},1000); $('#navigation1 > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-112px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'5px'},200); } ); }); </script> <ul id="navigation1"> <li class="Home"><a href="http://URL-Anda.blogspot.com/" target="_blank" title="Kembali ke Halaman Depan">BERANDA</a></li> <li class="Daftar-isi"><a href="http://URL-Anda.blogspot.com/" title="Daftar Isi BlogBego Creation">DAFTAR ISI</a></li> <li class="Hubungi-saya"><a href="URL-Anda.blogspot.com/" title="Cara menghubungi saya">CONTACT US</a></li> <li class="Template"><a href="http://URL-Anda.blogspot.com/" target="_blank" title="Template Gratis untuk kawan">TEMPLATE</a></li> </ul>

Selesai, lihat hasilnya,
ubah url-anda dengan url yang sobat inginkan

Share

Like

G+

Tweet

Tweet

Ditulis Oleh : Unknown ~ Czikart Software

Anda sedang membaca sebuah artikel yang berjudul Cara memakai navbar auto hide., Silahkan download software, games, Antivirus ataupun tutorial sepuasnya secara gratis di czikart software dan tetap kunjungi czikart software. Dan bagi yang ingin Copy Paste, Silahkan sertakan link sumbernya karena kami tidak bertanggung jawab jika blog/web anda dihapus oleh google kareana tidak menyertakan link sumbernya sesuai aturan dari google, Semoga artikel tersebut bermanfaat untuk anda, Mohon maaf apabila konten yang anda baca rusak atau salah dalam penulisan. Jika ada pertanyaan, kritik, dan saran yang ingin di sampaikan silahkan komentar.

:: Terima Kasih ! ::

Artikel Terkait Menarik Lainnya :

Posted in: Tutorial Blog