Blogger Master: Cara Membuat Slide Navigation

1. Buka Edit HTML : copy kode dibawah ini dan paste diatas kode </head>

2. Buka Edit HTML : copy kode dibawah ini dan paste diatas kode ]]></b:skin>

/*slide out navigation start*/ ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index:999999; width:721px; } ul#navigation li { width: 103px; display:inline; float:left; } ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#BF747B; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navigation li a:hover{ background-color:#144B1C; } ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#fff; text-shadow: 0 -1px 1px #D0D18F; } ul#navigation .home a{ background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/internet-icon.png); } ul#navigation .about a { background-image: url(http://www.iconarchive.com/icons/zakar/shining-z/48/Brush-SZ-icon.png); } ul#navigation .search a { background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/search-icon.png); } ul#navigation .podcasts a { background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/my-music-icon.png); } ul#navigation .rssfeed a { background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/subscriptions-icon.png); } ul#navigation .photos a { background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/jpeg-image-icon.png); } ul#navigation .contact a { background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/e-mail-icon.png); }

3. Buka Edit HTML : copy kode dibawah ini dan paste dibawah kode <body>

4. Klik

5. Atau Lihat Widget-nya di Setiap Halaman Blog ini (Terletak di Sudut Kanan Atas)

2 comments:

Wayang said...: sdh d coba tpi koq gk bisa yah.. tlg; August 6, 2012 at 9:42 PM
Unknown said...: Mesti di coba nih
Ditunggu kunjung baliknya
http://linggarbloggersejati.blogspot.com; November 14, 2012 at 2:23 AM

Cara Membuat Slide Navigation

2 comments:

Post a Comment