Posted by : Bintang Azhar Nafis

Kita akan bahas Cara Membuat Menubar Di Bagian Paling Atas. Menubar ini beda dari yang lain, karena walaupun laman discroll kebawak maupun atas, menubar ini gak akan hilang, jadi keliahatan erus. Simak step-by-step nya yuk :
1. Masuk ke blogger
2. Pilih pada blog yang mau dikasih gituan
3. Klik tata letak
4. Klik tambah gadget
5. Klik tombol tambah di sebelah html javascript
6. Copy kode dibawah ini
<style type="text/css"> #msuteja ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#msuteja li .current{color: transparant;}#msuteja li a:hover, #msuteja li a:active {background:url(http://4.bp.blogspot.com/_O84nraTVNhw/TTVkjpb4VvI/AAAAAAAAALs/yE_Q-eIWMW4/s1600/background-judul-posting.gif);background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#msuteja {width: auto;float: left;margin: 0;padding: 0;}#msuteja {margin: 0;padding: 0;}#msuteja ul {float: left;list-style: none;margin: 0;padding: 0;}#msuteja li {list-style: none;margin: 0;padding: 0;}#msuteja li a, #msuteja li a:link, #msuteja li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#msuteja li a:hover, #msuteja li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#msuteja li li a, #msuteja li li a:link, #msuteja li li a:visited {background: url(http://4.bp.blogspot.com/_O84nraTVNhw/TTVkjpb4VvI/AAAAAAAAALs/yE_Q-eIWMW4/s1600/background-judul-posting.gif);background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#msuteja li li a:hover, #msuteja li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#msuteja li {float: left;padding: 0;}#msuteja li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#msuteja li ul a {width: 140px;}#msuteja li ul ul {margin: -32px 0 0 171px;}#msuteja li:hover ul ul, #msuteja li:hover ul ul ul, #msuteja li.sfhover ul ul, #msuteja li.sfhover ul ul ul {left: -999em;}#msuteja li:hover ul, #msuteja li li:hover ul, #msuteja li li li:hover ul, #msuteja li.sfhover ul, #msuteja li li.sfhover ul, #msuteja li li li.sfhover ul {left: auto;}#msuteja li:hover, #msuteja li.sfhover {position: static;}#footer-column-divide {clear:both;}#msuteja{font-family:Comic Sans Ms;background:#000 url(http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;} </style> <div id='msuteja'> <ul id='msuteja'> <li><a href='http://bintangazharn.blogspot.com/'>Home</a></li> <li><a href='http://bintangazharn.blogspot.com/2014/12/informasi.html#more'>Informasi</a></li><li><a href='https://www.facebook.com/bintang.azharnafis'>My Facebook</a></li> <li><a href='http://www.emailmeform.com/builder/form/O3Re4cKp9askiQ9aPcCGEeT'>Tukar Link</a></li> <li><a href='http://www.google.co.id/'>Google</a></li>  <li><a href='www.bintangazharn.co.vu/2014/12/take-your-ads-banner-here.html#more'>Advertising with us</a></li> <li><a href='#'>Go Up</a></li> </ul></div>
7. Klik simpan
Keterangan :
Merah : Ganti dengan Url kamu sendiri
Biru : Ganti dengan teks mu sendiri.

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Popular Post

Blog Archive

Bintang Azhar Nafis. Diberdayakan oleh Blogger.

Follow by Email

Translate

About

Hai ! Saya adalah seorang web designer newbie yang ingin terus berinovasi agar isi dan hiasan website nya menarik. Sekarang saya duduk di bangku SMP N 2 Blitar. Sekian Perkenalan Dari saya, jika ada yang tidak dimengerti dari postingan saya silakan berkomentar ya !. Tapi pengunjung yang baik pasti tidak akan nye-pam / iklan, Terima Kasih.

- Copyright © 2014-2015 Bintang Azhar N -