Info Harga Komputer dan Gadget

Cara membuat menu Floating di blogger

Advertisement
advertisement
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
advertisement

7 comments:

Keiruchan Agatha said...

hehe mantap..
thnx mas

Keiruchan Agatha said...

eh mas, kode yag digunakan untuk yg diatas ]]> mana ya?
kynya ilang tuh tulisannya...

Blog Everything Sharing said...

di coba dulu gan ! makasih atas infonya !

edikomputer said...

monggo gan di coba

Ahmad said...

Code CSS nya mana gan ?? ko ga ada ??

Edikomputer said...

sudah saya munculkan kembali gan, makasih notifiksinya

ilmu dan wawasan said...

Cari Tutorial Floating.. Eh nemu Blognya Mas Edi.. Kemaren juga sempet tanya ini juga sih di Kolom komentar.. Ga taunya udah ditulis.. ekehkehkehkeh... :) Sip Mas Entar ane pasang deh disalah satu Blogku

Post a Comment

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