cara buat menu bar agar terlihat menarik
copas dari tetangga sebelah
tidak di ubah link tetap
Cara membuat menu bar di blog (V2) – Sebelum melanjutkan menulis, saya ingin mengucapkan selamat Natal bagi Anda yang merayakannya. Beberapa waktu yang lalu saya sempat membagikan tips mengenaicara mudah memasang atau membuat menu bar di blog. Dimana, menu bar tersebut dapat Anda buat dan pasang diblogAnda tanpa perlu melakukan editHTML. Namun, menu bar tersebut memiliki kelemahan. Dimana, menu bar tersebut tidak dapat ditambahkan sub menu (anak menu). Jika Anda tidak mengetahui apa itu sub menu, silahkan lihat gambar dibawah :
Dari screenshot diatas, terlihat menuLainnya…memiliki 3 sub menu, yaituTukar Link,SitemapdanAbout Me. Nah, dalam tutorial kali ini, saya akan membahas cara memasang menu bar seperti menu bar pada gambar screenshot diatas. Jika Anda ingin melakuan migrasi dari menu bar terdahulu, silahkan lihatposting sebelumnyauntuk mengetahui bagian mana saja yang dihapus.
Oke, seperti biasa, to the point. Berikut ini cara membuat atau memasang menu bar V2 di blog :
1. Pertama, bukaBlogger, dan langsung masuk ke menuTemplate.
2. Backup template blog Anda, dan klik tombolEdit HTML.
3. Cari kode]]></b:skin>(seperti biasa, gunakan tombol saktiCTRL + F), dan pastekan kode berikut tepatDiatas/sebelumnya.
# Navbarmenu {width: auto; float: left; font-size: 12px; background: # fff ; font-weight: bold; margin: 0 auto; padding: 0 auto} # nav {margin: 0; padding: 0} # nav ul {float: kiri; list-style: none; margin: 0; padding: 0} # nav li {list-style: none; margin: 0; padding: 0; background: none} # nav li a, # nav li a: link, # nav li a: visited {color: # 000000; display: block; font-weight: normal; text-transform: normal; margin: 0; padding: 5px 15px 5px} # nav li a: hover {background: # 99FF00; color: # FFF; margin: 0; -Moz-border-radius: 8px; padding: 5px 15px 5px; text-decoration: none} # nav li li a, # nav li li a: link, # nav li li a: visited {background: # FFF; -Moz-border-radius: 8px; width: 150px; color: # 00000; font-weight: normal; text-transform: normal; mengapung: none; margin: 0; padding: 5px 10px 5px 15px; border-bottom: 1px solid # fff; border-left: 1px solid # fff; border-right: 1px solid # fff} # nav li li a: hover {background: # 99ff00; color: # FFF; padding: 5px 10px 5px 15px} # nav li {float: kiri; padding: 0} # nav li ul {z-index: 9999; position: absolute; kiri:-999em; height: auto; width: 170px; margin: 0; padding: 0} # nav li ul a {width: 140px} # nav li ul ul {margin: 25px 0 0-171px} # nav li: melayang-layang ul ul, # nav li: melayang-layang ul ul ul, # nav li.sfhover ul ul, # nav ul ul ul li.sfhover {left:-999em} # nav li: hover ul, # nav li li: hover ul, # nav li li li: melayang-layang ul, # nav ul li.sfhover, # nav li li.sfhover ul, # nav li li ul {li.sfhover kiri: auto} # nav li: hover, # nav li.sfhover {position: static}
Catatan :
Jika Anda ingin melakukan kustomisasi, Anda dapat mengubah warna latar menubar. Caranya, ganti tulisan#fffdengan kode warna lainnya. Lihat padaHEX Color Generatoruntuk mengubah warna kesukaan Anda menjadi kode HTML, sehingga Anda dapat menggunakannya pada menu bar ini.
4. KlikSimpan template.
5. Selesai? Hampir. Sekarang, masuk ke bagianTata Letak, dan pilihTambahkan Gadgetpada header atas (dibawah [Judul Blog Anda] Header).
6. Cari dan pilihHTML/Javascript.
7. Pastekan kode berikut (kosongkan isianJudul).
<div id='menu'><div id='menu-wrap'><div id='navbarmenu'><ul id='nav'><li> <href = ' http://xxpc123xx.blogspot.com '> Rumah </ a> </ li><li> <href = ' http://xxpc123xx.blogspot.com/search/label/tips% 20trik% 20blogging '> Tips Trik Blogging </ a> </ li><li> <href = ' http://xxpc123xx.blogspot.com/search/label/desain '> Desain </ a> </ li><li> <href = ' http://xxpc123xx.blogspot.com/search/label/Blog% 20Tools '> Blog Tools </ a> </ li><li> <href = ' http://xxpc123xx.blogspot.com/search/label/SEO '> SEO </ a> </ li><li><a href=‘#’>Lainnya ...</a><ul><li> <href = ' http://xxpc123xx.blogspot.com/p/blog-page.html > inch, salah satu yang link </ a> </ li><li> <href = ' http://xxpc123xx.blogspot.com/p/sitemap_18.html '> Sitemap </ a> </ li><li> <href = ' http://xxpc123xx.blogspot.com/p/blog-page_1.html '> About Me </ a> </ li></ Ul></ Li><li> <href = ' http://www.facebook.com/tipsseoblogpc123 '> fanspage </ a> </ li><li> <a href = " http://www.twitter.com/blog_ananda > Twitter </ a> </ li></ Ul>
Keterangan :
Tulisan yang berwarnamerahmerupakan url yang akan dituju apabila menu bar diklik. Ganti dengan url yang diinginkan, semisal url menujufanpage, link menuju suatu posting, dll.
Tulisan yang berwarnaungumerupakan tulisan yang ditampilkan pada menu bar. Gantilah sesuai dengan keinginan Anda. MisalnyaHomeuntuk menu bar yang jika di-klik akan membawa pengunjung blog menuju homepage blog.
Anda juga dapat menambahkan menu baru. Caranya, tambahkan <li><a href=‘url-anda’>Judul Menu</a></li> diatas </ul>.
8. Terakhir, klikSimpan.
Buka blog Anda untuk melihat previewnya.
Tips Tambahan: Membuat Sub Menu pada Menu Bar .
Jika Anda ingin menambah atau membuat sebuah sub menu pada sebuah menu, coba perhatikan contoh berikut. Secara default, kode menu bar pada langkah nomor 7 akan memiliki 3 buah sub menu. Perhatikan gambar dibawah:
Nah, seandainya saya ingin membuat sub menu pada menu Blog Tools, dimana saya menginginkan sub menunya berisi menu HTML Parser dan HEX Color Generator, bagaimana caranya? Perhatikan screenshot preview menu bar yang telah saya ubah berikut:
Terlihat pada menu Blog Tools akan memiliki sub menu HEX Color Generator dan HTML Parser. Caranya? Perhatikan sekali lagi kode HTML menu bar diatas (terutama untuk baris yang saya beri stabilo oranye, nomor 7). Pada kode pertama, kodenya hanya :
<a href='http://xxpc123xx.blogspot.com/search/label/Blog%20Tools'> Blog Tools </ a> </ li>
Kemudian, saya menekan enter, sehingga kode </li> terakhir berpindah ke baris selanjutnya. Lalu saya menambahkan kode <ul> diatas kode </li>, dan mulai membuat sub menu dari menu Blog Tools tersebut. Sebagai penutup, saya menambahkan kode </ul> diatas kode </li>. Sehingga kodenya akan menjadi :
<li> <a href='http://xxpc123xx.blogspot.com/search/label/Blog%20Tools'> Blog Tools </ a><ul><a href='http://xxpc123xx.blogspot.com/2013/12/html-parser-tool-untuk-parse.html'> HTML Parser </ a> </ li><a href='http://xxpc123xx.blogspot.com/2013/01/hex-color-generator-for-blog.html'> HEX Color Generator </ a> </ li></ Ul></ Li>
Kode yang saya tebalkan merupakan kode penutup. Intinya, pindahkan </li> dan buat kode <ul> dan </ul> diatasnya, lalu sisipkan kode <li><a href='http://url-anda'>Judul Menu</a></li> diantara keduanya (kode <ul> dan </ul>). Memang terasa agak susah, tetapi percayalah, saya yakin Anda pasti akan mengerti dan bisa melakukannya.
Selamat mencoba! Jika pemasangan menu bar ini terasa membuat loading blog Anda menjadi lambat, coba compress kode nomor 3 dengan toolCSS Compressor. Atau, jika masih terasa lambat, coba ganti menu bar Anda dengan menu bar yang pernah saya bahassebelumnya. Tolong berikan artikel iniGoogle +, dan tolong share artikel ini. Terima kasih, dan salam blogger!
Komentar
Posting Komentar