Menu Navbar Auto Hidden disisi Kanan

Kastaone - Kamis, 02 Januari 2014 - 23:16 wita
Sebelumnya saya membahas tentang Cara Membuat Navigasi Menu Share Auto Hidden, :q; sekarang kembali saya akan membahas Menu Navigasi yang pada umumnya Navbar berada diatas atau dibawah Header Blog, tapi yang ini letaknya di sisi kanan Blog dengan variasi Auto Hidden :y; [akan keluar kalau mouse kawan dekatkan, dan akan kembali sembunyi bila mouse kawan pindahkan] yang saya beri Nama Menu Navbar Auto Hidden disisi kanan :z;



Cara membuatnya :

  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Tata Letak - Tambah Gadget
  • Pilih tanda [+] pada HTML / JavaScript
  • Copas kode berikut kedalamnya

<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(http://2.bp.blogspot.com/-hPC_WIKIgB8/UsQkB1XYkvI/AAAAAAAAJUs/MMUHK4qpCcU/s1600/Home.png);}
ul#navigation1 .Daftar-isi a {background-image: url(http://3.bp.blogspot.com/-TcnyBuwQqXA/UsQkB6EoscI/AAAAAAAAJU0/mdnOVdS3uI0/s1600/Daftar+Isi.png);}
ul#navigation1 .Hubungi-saya a {background-image: url(http://4.bp.blogspot.com/-A72doDO--Vs/UsQkByBOK3I/AAAAAAAAJUw/p_4VoJV6CeI/s1600/Hubungi+saya.png);}
ul#navigation1 .Template a {background-image: url(http://2.bp.blogspot.com/-uHuDphfm8Mg/UsQkq5zNucI/AAAAAAAAJVM/ce3F4dKvcXA/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://blogbego-creation.blogspot.com/" target="_blank" title="Kembali ke Halaman Depan">BERANDA</a></li>
<li class="Daftar-isi"><a href="http://blogbego-creation.blogspot.com/2012/01/site-map-blogbego-creation.html" target="_blank" title="Daftar Isi BlogBego Creation">DAFTAR ISI</a></li>
<li class="Hubungi-saya"><a href="http://blogbego-creation.blogspot.com/2012/01/contact-us.html#.UsQxJdJdVQo" target="_blank" title="Cara menghubungi saya">CONTACT US</a></li>
<li class="Template"><a href="http://blogbego-creation.blogspot.com/search?q=template+blogger" target="_blank" title="Template Gratis untuk kawan">TEMPLATE</a></li>
</ul> 

  • Teks yang saya beri warna biru [top:150px] posisi Navbar dari atas
  • Silahkan kawan ganti teks yang berwarna merah dengan Link kawan 
  • Teks yang saya beri warna violet adalah Jquery, seandainya pada Template kawan sudah ada bisa dihilangkan [ biasanya berada dibawah ]]></b:skin> ]
  • Silahkan ganti Nama Navbar yang saya beri huruf tebal atau kawan bisa menambahkan dengan Menu yang lain sesuai kebutuhan 
  • Simpan Blog kawan



Berbagi Artikel :

Menu Navbar Auto Hidden disisi Kanan
Rate this posting:
{[["☆","★"]]}

Kalau pada Artikel Menu Navbar Auto Hidden disisi Kanan
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

10 Komentar pada : “Menu Navbar Auto Hidden disisi Kanan”

  1. makasih kembali, ditunggu kunjungan berikutnya :e;

    BalasHapus
  2. terima kasih pujiannya kawan, :z; silahkan nikmati yang lainnya

    BalasHapus
  3. Mantap sob tips, ijin save ya :)

    BalasHapus
  4. Saya coba dulu ya sob, semoga tambah keren blognya :)

    BalasHapus
  5. silahkan kalau kawan ingin mencoba :b;

    BalasHapus
  6. blogbego maukah anda menjadi member di blog saya
    plis mohon ya..
    jika anda jadi member di blog saya insya allah saya akan menjadi member di blog anda :o;
    http://necza-27.blogspot.com

    BalasHapus
  7. saya ini hanyalah blogger pasif, :w; artinya membalas apa yang kawan berikan [komentar, follow dll] :x;

    BalasHapus
  8. kami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T
    dan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI
    berikan 4 angka 9994 alhamdulillah ternyata itu benar2 tembus AKI.
    dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang
    ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya
    allah saya akan coba untuk membuka usaha sendiri demi mencukupi
    kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI..
    sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel
    yang ingin merubah nasib seperti saya silahkan hubungi AKI SOLEH,,di no (((082-313-336-747)))
    insya allah anda bisa seperti saya…menang togel 275
    juta, wassalam.


    dijamin 100% jebol saya sudah buktikan...sendiri....







    Apakah anda termasuk dalam kategori di bawah ini !!!!


    1"Dikejar-kejar hutang

    2"Selaluh kalah dalam bermain togel

    3"Barang berharga anda udah habis terjual Buat judi togel


    4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat


    5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
    tapi tidak ada satupun yang berhasil..







    Solusi yang tepat jangan anda putus asah....AKI SOLEH akan membantu
    anda semua dengan Angka ritwal/GHOIB:
    butuh angka togel 2D 3D 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin
    100% jebol
    Apabila ada waktu
    silahkan Hub: AKI SOLEH DI NO: (((082-313-336-747)))




    atau klik langsung di KLIK DSINI BOCORAN TOGEL




    angka GHOIB: singapur 2D/3D/4D/



    angka GHOIB: hongkong 2D/3D/4D/



    angka GHOIB; malaysia



    angka GHOIB; toto magnum 4D/5D/6D/



    angka GHOIB; laos





























    kami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T
    dan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI
    berikan 4 angka 9994 alhamdulillah ternyata itu benar2 tembus AKI.
    dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang
    ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya
    allah saya akan coba untuk membuka usaha sendiri demi mencukupi
    kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI..
    sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel
    yang ingin merubah nasib seperti saya silahkan hubungi AKI SOLEH,,di no (((082-313-336-747)))
    insya allah anda bisa seperti saya…menang togel 275
    juta, wassalam.


    dijamin 100% jebol saya sudah buktikan...sendiri....







    Apakah anda termasuk dalam kategori di bawah ini !!!!


    1"Dikejar-kejar hutang

    2"Selaluh kalah dalam bermain togel

    3"Barang berharga anda udah habis terjual Buat judi togel


    4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat


    5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
    tapi tidak ada satupun yang berhasil..







    Solusi yang tepat jangan anda putus asah....AKI SOLEH akan membantu
    anda semua dengan Angka ritwal/GHOIB:
    butuh angka togel 2D 3D 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin
    100% jebol
    Apabila ada waktu
    silahkan Hub: AKI SOLEH DI NO: (((082-313-336-747)))




    atau klik langsung di KLIK DSINI BOCORAN TOGEL




    angka GHOIB: singapur 2D/3D/4D/



    angka GHOIB: hongkong 2D/3D/4D/



    angka GHOIB; malaysia



    angka GHOIB; toto magnum 4D/5D/6D/



    angka GHOIB; laos

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM ATAU PAKAI NAMA ANONIM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation di Email Kawan





BANNER [300x250]
© 2013 - BLOGBEGO CREATION | Powered by Blogger
Design Template by : Blogger Edan