Cara Membuat Menu Blog Tetap Di Atas Layar Komputer

Bagaimana kesan anda saat melihat tampilan menu bar yang ada di blog ini..?
Kalau menurut saya yang baru belajar ngeblog, lumayan bagus.
Karna Menu bar tersebut selalu tampil diatas layar komputer
Kemanapun kursor Mouse anda di arahkan.

Saya menemukan ini hasil googling hehe..
Namun karna menurut saya bagus, saya ambil tutorialnya (maling ceritanya)
Siapa tahu anda berminat memasang di blog anda sendiri.

Baiklah begini cara membuat dan memasangnya
* Pertama-tama tentu anda harus login dulu ke bloger, lalu masuk ke Dashboard sobat
* Lalu kilik Templat, lalu klik Edit HTML
* Setelah itu cari kode ]]><b:skin> , agar cepat gunakan Ctrl  F.

Setelah itu silahkan anda Copy kode di bawah ini, tepat diatas kode ]]><b:skin>.

/* Floating Menu */
#ki_floating_menu{background-color: #1484CE;background: #1484ce;background: -moz-linear-gradient(top,  #1484ce 0%, #1274b5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce), color-stop(100%,#1274b5));background: -webkit-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -o-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: linear-gradient(to bottom,  #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #2a8fd2;}
#ki_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu ul li{float:left}
#ki_floating_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;}
#ki_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}

Catatan
Ganti 970px yang berwarna merah untuk ukuran blog sobat.
Ganti 34px untuk ukuran lebarnya tergantung selera

* Selanjutnya anda cari kode </head> melalui kotak pencarian Ctrl F
Setelah ketemu, Copy kode di bawah ini tepat dibawah kode </head>

<!-- Floating Menu-->er
<div id='ki_floating_menu'>
<ul>
  <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='http://4.bp.blogspot.com/-EjgIhPH-_8k/T2X5jYfOJZI/AAAAAAAABmw/yA1YFlwMqRU/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</div>

* Setelah itu sobat boleh pratinjau dulu, bila berhasil, tinggal mengganti kodenya
kode "# " ganti dengan url tujuan sobat,
kode "Menu 1" dst, ganti sesuai kebutuhan sobat. karna ini yang akan tampil pada menu bar ini.

Setelah itu Simpan Template.
Semoga Berhasil.

Share :