Blogging, Search Engine Optimization, Internet, Template, Widget hingga Monetize Blog.

Cara Memasang Menu Navigasi Melayang di Blog

Jika kamu menganggap menu navigasi adalah bagian penting pada sebuah Blog, maka pantas kamu memasangnya. Dan jika kemu menganggap menu navigasi lebih dari penting, dan tidak ingin bagian tersebut terlewatkan dari pandangan pengunjung, maka ada baiknya kamu memasang menu navigasi ini dengan posisi melayang. Apa kamu mengerti apa maksud saya :D? Memasang menu navigasi dengan posisi melayang ini maka akan membuat menu navigasi tersebut terus berada di atas layar monitor pengunjung. Sehingga jika ada bagian yang amat penting pada menu navigasi tersebut, maka tidak akan terlewatkan dari pandangan dan pengunjung akan lebih mudah menemukannya.

 Menu Navigasi Melayang

Jika memang kamu memerlukan keberadaan menu navigasi melayang pada Blog kamu, maka sebaiknya kamu memilih template yang telah menyediakan menu navigasi melayang tersebut. Jika kamu memakai template yang telah terdapat menu navigasi di dalamnya, sebenarnya kamu bisa membuat menu navigasi tersebut menjadi melayang. Dan jika pada blog kamu tidak ada sama sekali menu navigasi, maka kamu bisa memasang menu navigasi melayang dengan cara yang akan saya berikan kali ini. Kemungkinan akan kecocokan menu navigasi yang akan saya berikan dengan tampilan Blog kamu mungkin 50%. Karena tidak mungkin cocok sempurna, dan juga tidak akan terlalu melenceng dengan tampilan Blog kamu karena warna pada menu navigasi ini adalah hitam (gelap) yang banyak orang anggap matching dengan warna apa pun. Silakan perhatikan tampilnnya berikut.

Cara Memasang Menu Navigasi Melayang di Blog

Oke, untuk kamu yang tertarik ingin mencobanya, silakan ikuti langkah-langkah berikut.

Cara Memasang Menu Navigasi Melayang di Blog

Memasang CSS

  • Login ke akun Blogger kamu masing-masing.
  • Masuk ke bagian Template.
  • Dengan menggunakan tombol ctrl+F, carilah kode ]]></b:skin>.
  • Kemudian letakan kode berikut di atas kode ]]></b:skin>.

#top-nav{background:#333;box-shadow:0
 1px 3px 
rgba(0,0,0,0.4);height:40px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px
 solid #000}#top-nav ul{margin:0 auto;width:970px}#top-nav ul 
li{float:left}#top-nav ul li a{line-height:28px;padding:0 
15px;color:#aaa;font-size:13px;text-shadow:0 -1px 0 
#000;display:block;text-decoration:none}#top-nav ul li 
a:hover{color:#fff}nav{position:relative;font:bold 16px 
Calibri,Arial,Sans-Serif}nav *{margin:0;padding:0;list-style:none}nav 
ul{background:#0054bb;background:-webkit-linear-gradient(top,#0054BB,#175093);background:-moz-linear-gradient(top,#0054BB,#175093);background:-ms-linear-gradient(top,#0054BB,#175093);background:-o-linear-gradient(top,#0054BB,#175093);background:linear-gradient(top,#0054BB,#175093);height:40px;-webkit-box-shadow:inset
 0 1px 0 rgba(0,0,0,0.4),inset 0 2px 0 rgba(255,255,255,0.2),0px 1px 3px
 rgba(0,0,0,0.4);-moz-box-shadow:inset 0 1px 0 rgba(0,0,0,0.4),inset 0 
2px 0 rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4);box-shadow:inset
 0 1px 0 rgba(0,0,0,0.4),inset 0 2px 0 rgba(255,255,255,0.2),0px 1px 3px
 rgba(0,0,0,0.4)}nav li{float:left;display:inline}nav li a{padding:0 
15px;line-height:40px;color:#111!important;text-shadow:0 1px 0 
rgba(255,255,255,0.3);display:block;text-decoration:none;-webkit-box-shadow:inset
 1px 0 0 rgba(255,255,255,0.1),inset -1px 0 0 
rgba(0,0,0,0.1);-moz-box-shadow:inset 1px 0 0 
rgba(255,255,255,0.1),inset -1px 0 0 rgba(0,0,0,0.1);box-shadow:inset 
1px 0 0 rgba(255,255,255,0.1),inset -1px 0 0 rgba(0,0,0,0.1)}nav li 
a:hover{background:rgba(0,0,0,0.1)!important}nav li 
a:active{background:#0054bb;background:-webkit-linear-gradient(bottom,#0054BB,#175093);background:-moz-linear-gradient(bottom,#0054BB,#175093);background:-ms-linear-gradient(bottom,#0054BB,#175093);background:-o-linear-gradient(bottom,#0054BB,#175093);background:linear-gradient(bottom,#0054BB,#175093)}nav
 li 
ul{display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;-webkit-transition:all
 .26s ease-out .2s;-moz-transition:all .26s ease-out 
.2s;-ms-transition:all .26s ease-out .2s;-o-transition:all .26s ease-out
 .2s;transition:all .26s ease-out .2s}nav li 
li{display:block;float:none;width:100%}nav 
li:hover>ul{visibility:visible;width:200px;opacity:1}nav li li 
ul{left:200px;margin-top:-40px}nav 
li.sub>a{position:relative;padding-right:30px}nav 
li.sub>a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:#eee
 transparent transparent 
transparent;position:absolute;top:20px;right:10px}nav li.sub 
li.sub>a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:transparent
 transparent transparent #eee;position:absolute;top:16px;right:10px}
#Silakan edit kembali kode CSS di atas sehingga tampilnya lebih sesuai dengan Blog kamu.

Mengetahui Elemen Header

  • Untuk selanjutnya, kamu harus tahu kode elemen header karena menu navigasi ini akan dipasang di sekitar header. Masuk ke bagian Tata Letak.
  • Sentuhkan kursor pada tulisan Edit dalam elemen header.
  • Perhatikan tulisan di bagian baawah, terdapat widget id. Itulah id elemen header.
  • Kemudian kembali masuk ke bagian Template dan klik Edit HTML.
  • Dengan tombol ctrl+F, carilah id elemen header yang sebelumnya telah kamu ketahui. Contoh yang saya berikan adalah "Header1".
  • Perhatikan gambar berikut. Yang saya beri garis bawah berwarna merah merupakan kode elemen header.
Cara Memasang Menu Navigasi Melayang di Blog

Memasang Kode HTML

  • Setelah ditemukan, maka selanjutnya memasang menu navigasi di atas atau di bawah elemen header.
  • Letakan kode berikut di atas kode <div id='header-wrapper'>.

<div id='top-nav'>

<ul>

<li><a href='/' title='Kembali ke Beranda'>Home</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>

<li><a href='#'>Menu 6</a></li>

<li><a href='#'>Menu 7</a></li>

<li><a href='#'>Menu 8</a></li>

</ul>

</div>

  • Ubah # menjadi URL sebuah halaman yang kamu inginkan.
  • Ubah menu 1, menu 2, dengan nama menu yang kamu inginkan.
  • Kamu bisa menambah dan mengurangi menu navigasi dengan menghapus atau menambah kode dari <li>sampai</li>

Menambah Lapak di atas Blog

Menu navigasi ini akan menghalangi bagian atas blog sepanjang 40px. Jadi kamu harus memberi ruang untuk menu navigasi yang baru sobat buat sepanjang 40px jika ingin membebaskan bagian yang terhalang oleh menu navigasi ini. Kira-kira sebesar 50px.
  • Pertama kamu harus tahu kode untuk elemen wrapper. Yang saya sebut wrapper adalah bagian yang menjadi pembungkus template blog.
  • Silakan masuk ke Blogger >> Template.
  • Cari kode body{ .
  • Kamu akan menemukan kumpulan kode diantara kode css body. Jika kamu telah mengetahui kode elemen wrapper pada Blog kamu, maka tambahkan kode top:50px; pada elemen tersebut.
Cara Memasang Menu Navigasi Melayang di Blog

Maka kini bagian atas Blog kamu tidak akan terhalangi oleh menu navigasi melayang yang baru kamu pasang. Oke, cukup sekian pembahasan kali ini. Semoga kamu berhasil dalam mencoba memasang menu navigasi melayang yang saya berikan ini. Dan hasilnya cocok sehingga kamu memasangnya secara berkelanjutan.

Artikel terkait : Cara Memasang Menu Navigasi Melayang di Blog

Artikel B-Tutorial Lainnya :

0 komentar:

Post a Comment

Copyright © 2014-2016 B-Tutorial - All Right Reserved