menu navigasi bar di atas header plus search box (kotak pencarian) di blog. Contoh nya bisa anda lihat pada blog ini. Bahkan lebih dari itu karena sudah ada sub menu dropdown nya.Update : Berhubung templatenya sudah ganti, untuk contoh bisa dilihat pada blog percobaan saya [ Uji Coba ]
Pada umumnya
top menu digunakan sebagai tempat menaruh link menuju halaman Contact us, sitemap, disclaimer atau privacy policy dan lain sebagainya, yang jelas fungsinya untuk memudahkan para pengunjung blog dalam menavigasi atau untuk menjelajahi seluruh isi blog atau website.Sedangkan
search box atau kotak pencarian dalam blog berfungsi untuk memudahkan pengunjung dalam mencari informasi atau data terkait yang ada dalam blog itu sendiri. Sebenarnya kotak pencarian ini sudah ada di dalam widget Navbar, berhubung top menu yang akan kita buat letaknya sama dengan widget Navbar, maka mau tidak mau widget Navbar harus di nonaktifkan baik fungsi maupun tampilannya. Maka dari itu kotak Pelajari juga:
Cara membuat top menu navigasi slide samping di Blog
Silahkan ikuti tutorial cara membuat top menu di blog / web plus kotak pencarian (search box).
1. Langkah pertama jika blog anda masih menampilkan widget Navbar, maka yang harus dilakukan yaitu menonaktifkan dan menghilangkan tampilan Navbar. Cara nya masuk ke tata letak kemudian klik edit pada elemen navbar, pada halaman konfigurasi pilih off lalu klik simpan. Selanjutnya masuk ke template lalu klik edit html, copy kode di bawah ini, lalu pastekan tepat di atas kode
]]></b:skin> atau </style>.navbar {display: none}
(Jika tampilan blog anda sudah tidak menampilkan Navbar maka lewati saja langkah pertama)
2. Masuk edit html kemudian Copy kode HTML di bawah ini, lalu pastekan atau letakkan di bawah kode
<body ...><div id='top-menu'>
<div id='menu'>
<input type='checkbox'/>
<label>
≡
</label>
<ul>
<li><a class='active' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a>Kategori</a>
<ul>
<li><a href='#'>Kategori1</a></li>
<li><a href='#'>Kategori2</a></li>
<li><a href='#'>Kategori3</a></li>
</ul>
</li>
<li><a>About</a>
<ul>
<li><a href='#'>About Me</a></li>
<li><a href='#'>Contact Me</a></li>
</ul>
</li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Privacy Policy</a></li>
</ul>
</div>
<div id='pencarian'>
<form action='/search' id='pencarian' method='get' visibility='true'>
<input id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...'/>
<button class='fa fa-search' id='searchsubmit' type='submit'>
</button>
</form>
</div>
<div style='clear:both;'/>
</div>
Silahkan ganti (#) dengan alamat / link milik anda.
3. Copy kode css di bawah ini, lalu pastekan tepat di atas
]]></b:skin> atau </style>/*Top Menu*/
#top-menu{position:relative;width: 100%;max-width: auto;height: 40px;margin: 0 auto;border-bottom:1px solid #3489db;}
#top-menu,#menu {background:#66bbdd;}
#menu{top: 0px;left: 0;right: 0px;width: auto; max-width: 100%;position:absolute;padding-right:200px;color: #fff;height: 40px;white-space: nowrap;margin: auto;}
#menu ul,#menu li {width: auto;margin:0;padding:0;list-style:none;z-index:100;}
#menu ul{height:40px}
#menu li{float:left;display:inline;position:relative;font: 14px;}
#menu li a{color: #fff}
#menu a{display: block;line-height: 40px;padding:0 10px;text-decoration:none;color:#333;}
#menu input{display:none;margin:0 0;padding:0 0;width:40px;height:40px;opacity:0;cursor:pointer;}
#menu label{font:bold 45px Arial;display:none;width:45px;height:41px;line-height:41px;text-align:center;}
#menu ul ul{display:none;background:#2288bb;list-style:none;float: none;height:auto;position:absolute;}
#menu ul li:hover> ul {display: block;}
#menu ul ul li{display:block;text-align:left;border-bottom:1px solid #000;}
/*Seach Box*/
#pencarian{float:right;margin:0 0;padding:0;}
#q{padding:3px 0;background: #fff;right:50px;display:block;position:absolute;border:1px solid rgba(0, 0, 0, .2) ;top:7px;outline:none;width:115px;font-size:15px; color:#000;}
#searchsubmit {position:absolute;top:7px;padding:3px;border:1px solid rgba(0, 0, 0, .1);margin:0;font-size:17px;display:block;float:right;right:25px;background: #2288bb;color:#fff;outline:none;cursor:pointer;}
#pencarian button#searchsubmit[type="submit"]:hover{cursor:pointer;}
#pencarian input#q:focus{background:#fff;outline:none}
#pencarian input#form {display: block;color:#000;background:#fff;}
4. Khusus buat template yang sudah
responsive anda bisa menambahkan kode berikut untuk mengubah tampilan top menu dari type inline menjadi checkbox / dropdown.Copy kode css di bawah ini, lalu pastekan tepat di bawah kode
@media screen and (max-width: 768px) {Jika tidak ada 768px, cari yang mendekati.
#menu{margin:auto;}
#menu a.active{ border-top: 4px solid #3498DB;}
#menu a{border-bottom:1px solid #e5e5e5;}
#menu ul{background:#666;position:absolute;top:100%;right:0;left:0;height:auto;display:none;}
#menu ul ul{background:#000;left:100px;width:auto;}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333;border-bottom:none}
#menu input, #menu label{color: #fff;right:0;position:absolute;display:block;}
#menu input{z-index:4}
#menu input:checked + label{color:#fff;}
#menu input:checked ~ ul{display:block}
#q {right:80px;width:185px;}
#searchsubmit {right:55px;}
Satu lagi, karena icon yang digunakan untuk kotak pencarian menggunakan
Font Awesome, maka pastikan di dalam template anda telah terpasang kode berikut, silahkan periksa, jika belum ada, copy dan pastekan tepat di atas kode </head>.<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Terakhir klik Simpan Template.
Selanjutnya :
Cara membuat menu melayang (sticky navigation)
Sekian tutorial cara membuat menu navigasi responsive di Blog plus kotak pencarian, semoga bermanfaat dan salam Blogger.
4 comments:
cuma keluar seacrhnya doang mas di hp
Coba klik di sebelah tombol search, kalau ada daftar menu harusnya keluar menu dropdown nya
Mas..yoapa caranya buat menu link yang seperti blog ini.. ada di tengah header?
mantul, gan
Post a Comment