Cara membuat menu Floating di blogger

kemarin ada sobat edikomputer yang request cara membuat menu kaya blog saya ini yang katanya cantik mirip kaya kaskus. menu floating sendiri adalah menu yang akan selalu mengikuti scroll pada halaman blog

oke langsung saja kita pelajari simak baik-baik ya...

login ke adimin blog kamu kemudian klik template
kemudian klik edit HTML jangan lupa centang expand template widget
Kemudian cari kode
]]></b:skin>
Gunakan CTRL + F untuk mempermudah pencarian

lalu copy kode CSS ini di atas ]]></b:skin> save dulu

#fixed {position:fixed;top:-1px;left:0;width:100%;height:30px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}
* html #outer-wrapper {height:100%;overflow:auto}
#top-wrapper{background:url(http://file.edikomputer.com/edikomputer/top.jpg) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:0px solid #f1c822}
#topbar{width:980px;height:30px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:"Segoe UI",Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px "Segoe UI",Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
#top a.arrow{background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#top li{float:left;position:static;width:auto;margin-top:5px;padding-right:10px;color:#fff;font-weight:bold;}
#top li ul,#top ul li{width:170px}
#top ul li a{text-align:center;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:"Segoe UI",Arial;border:none;padding:5px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}
#top .search{margin:4px 10px 0 0;width:230px;float:right;}
#top .search-form,.search-form input{margin:0;padding:0;}
#top .search-form{height:20px}
#top .search-form input{border:medium none;display:block;height:20px;line-height:20px}
#top .search-input{border:1px solid #F2F2F2;color:#343434;float:left;font-size:11px;overflow:hidden;padding:0 0 0 5px !important;width:150px}

kemudian Cari lagi kode
<body>
kemudian copy kode ini di bawahnya :

<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='/'><img border='0' src='http://1.bp.blogspot.com/-hOrRvLeBQYM/T_WSzbGC7vI/AAAAAAAAHPw/S_2CUG0zZhk/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='http://www.edikomputer.com/search/label/Blogger'>Blogger</a></li>
<li><a class='arrow' href='http://www.edikomputer.com/search/label/Wordpress'>Wordpress</a></li>
<li><a href='http://www.edikomputer.com/search/label/Template'>Template</a></li>
<li><a href='http://www.edikomputer.com/search/label/Hosting'>Hosting</a></li>
<li><a href='http://www.edikomputer.com/search/label/Hosting%20dan%20Domain'>Domain</a></li>
<li><a href='http://www.edikomputer.com/search/label/Hosting%20dan%20Domain'>CSS /HTML</a></li>
<li><a href='http://www.edikomputer.com/search/label/Internet'>Internet</a></li>
<li><a href='http://www.edikomputer.com/search/label/Seo'>Seo</a></li>
<li><a href='http://www.edikomputer.com/search/label/template%20blogger'>Blogger Template</a></li>
<li><a href='http://www.edikomputer.com/search/label/Photoshop'>Photoshop</a></li>
<li><a href='http://www.facebook.com/webedikomputer'>Facebook</a></li>
<li><a href='http://twitter.com/edikomputer'>Twitter</a></li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'></div>
</div>
</div></div>

Kalau sudah klik save dan lihat hasilnya
ket : trxt warna merah adalah judul menu silahkan ganti sesuai keinginan kamu

Related Posts

No comments:

Post a Comment

Blog Ini Dofollow Ya bro tapi jangan nyepam komentar secara bijak dan sesuai dengan postingan