By : http://www.ficripebriyana.com/
Berikut Cara Nya :
1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]></b:skin>
/*Nav Menu*/
#top-BD{background:#333;box-shadow:0 1px 3px rgba(0,0,0,0.4);height:48px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000}
#top-BD ul{margin:0 auto;width:970px;list-style-type:none;height:30px}
#top-BD ul li{float:left}
#top-BD ul li a{position:relative;line-height:28px;border:1px solid;padding:10px 5px;color:#aaa;font-size:13px;text-shadow:0 -1px 0 #000;display:block;text-decoration:none;font-weight:700;text-transform:uppercase;font-family:Geneva,Arial,Helvetica,sans-serif}
#top-BD ul li a:hover{color:#fff;border-top:3px solid #aaa}
.BDsosial a{display:block;height:50px;width:50px;padding:0 4px;float:right;background:url(http://1.bp.blogspot.com/-hQKmPzvFCU8/Ue7FWBeCjMI/AAAAAAAABk8/0iFSHsrQijo/s1600/Sharing+buttons.png) no-repeat transparent;-webkit-transition:ease-in 0.2s all;-moz-transition:ease-in 0.2s all;transition:all 0.2s ease-in;cursor:pointer}
.BDsosial a.googleplus{background-position:0 -58px}
.BDsosial a.googleplus:hover{background-position:0 0}
.BDsosial a.twitter{background-position:0 -290px}
.BDsosial a.twitter:hover{background-position:0 -232px}
.BDsosial a.facebook{background-position:0 -406px}
.BDsosial a.facebook:hover{background-position:0 -348px}
.BDsosial a.rss{background-position:0 -174px}
.BDsosial a.rss:hover{background-position:0 -116px}6. Copy kode html dibawah ini, lalu Paste dibawah kode <body>
<div id='top-BD'>
<ul>
<li><a href='http://ficripebriyana.blogspot.com' target='_blank' title='Ficri Pebiryana'>Ficri Pebiryana</a></li>
<li><a href='http://ficripebriyana.blogspot.com' target='_blank' title='Sitemap'>Sitemap</a></li>
<li><a href='http://ficripebriyana.blogspot.com' target='_blank' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://ficripebriyana.blogspot.com' target='_blank' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://ficripebriyana.blogspot.com' target='_blank' title='Contact'>Contact</a></li></ul>
<div class='BDsosial' style='margin:-30px 50px 0 0;'>
<a class='rss' href='http://ficripebriyana.blogspot.com' rel='external nofollow' target='_blank' title='RSS Link'>
</a>
<a class='googleplus' href='https://plus.google.com/+FicriPebriyana' rel='external nofollow' target='_blank' title='googleplus'>
</a>
<a class='facebook' href='https://www.facebook.com/ficri12' rel='external nofollow' target='_blank' title='facebook'>
</a>
<a class='twitter' href='https://twitter.com/FicriPebriyana' rel='external nofollow' target='_blank' title='twitter'>
</a>
</div>
</div>- Ganti Link diatas dengan Link milik Anda.
- Ganti tulisan yang berada di title='Ini Ganti' dengan tulisan Anda sendiri.
Dengan menggunakan menu navigasu melayang (floating) maka header atau judul blog Anda akan sedikit tertutup atau bahkan akan tertutup, silahkan ikuti cara ini agar header blog Anda tidak tertutup lagi oleh menu melayang atau floating ini, caranya dibawah ini :
1. Cari kode css #header h1
2. Mungkin akan seperti ini :
#header h1{color:#444;font-size:25px;font-family:Georgia, serif;font-weight:700;text-decoration:none;margin:0;padding-top:15px;margin-top:5px;}padding:...px;
padding-top:...px;
padding-bottom:...px;
padding-right:...px;
padding-left:...px;
4. Silahkan ganti kode padding yang ada dalam blog Anda dengan kode dibawah ini :
padding-top:25px;
5. Hasilnya seperti ini :
#header h1{color:#444;font-size:25px;font-family:Georgia, serif;font-weight:700;text-decoration:none;margin:0;padding-top:25px;margin-top:5px;}
0 Response to "Cara Membuat Menu Navigasi Melayang Di Blog"
Post a Comment
Selamat Datang Jangan Lupa Kasih Komet dan Share-nya
♥ No Hewan
♦ No Spam
♣ No Sex / Sara dsb.
♠ No Link