Langsung ke konten utama

cara membuat menu bar pada blog

Halo.. ketemu lagi, sudah lama nih gak share, kali ini saya akan memberikan tutorial cara membuat menu bar atau submenu untuk blog. Karena menurut saya ini sangat penting sekali jika blog anda tidak ada submenu seperti ini blog terlihat kurang menarik.

Sebenarnya menu ini banyak sekali kegunaanya, maka dari itu banyak juga yang mencari cara membuat menu bar di blog. Banyak sekali tutorial-tutorial blogger yang memberikan tutorial seperti ini, tetapi mungkin hanya diblog ini yang akan membantu anda hingga bisa.

Tidak akan panjang lebar lagi langsung saja kita simak tutorial bagaimana cara membuat menu di blog. Untuk contoh menunya bisa anda lihat menu pada blog ini. Atau lihat gambar dibawah ini

Cara Membuat Menu diblog

Kiri-kira seperti itulah tampilan menu yang akan kita buat nanti, langsung saja disimak:
1. Login blogger.com
2. Klik Judul blog anda
3. Pilih Template - EditHtml
4. Tambahkan kode dibawah ini diatas kode </style> atau ]]></b:skin>
#menunavigasi{color:#FFF;height:40px;text-transform:uppercase;border-bottom:3px solid #008FFF;background:#333}#menunavigasi ul#menu{margin:0;padding:0;height:40px}#menunavigasi li{margin:0;padding:0;float:left;display:inline;list-style:none;position:relative}#menunavigasi li >a{display:block;padding:0 10px;line-height:40px;text-decoration:none;color:#fff}#menunavigasi li li >a{display:block;padding:0 10px;margin:0 0;line-height:40px;text-decoration:none;color:#fff}#menunavigasi li:hover >a,#menunavigasi a:hover{background:#008FFF;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}#menunavigasi li ul{background:#333;margin:0 0;width:150px;height:auto;position:absolute;left:0px;z-index:10;display:none;padding:0}#menunavigasi li li{display:block;float:none}#menunavigasi li:hover >ul{display:block}#menunavigasi li ul ul{left:100%;top:0px}.tinynav{display:none;padding:10px;height:40px;border:none;background:#333;font-weight:bold;width:98%;margin:0 1%;color:#fff}.tinynav option{padding:0 5px}
5. Simpan template, setelah itu dari menu Template kita pindah ke Tata Letak
6. Kemudian kita tambahkan Gadget - Pilih HTML/Javascript
7. Masukkan kode dibawah ini didalamnya
<nav id='menunavigasi'>
<ul id='menu'>
<li class='current'><a href='/' style='background: #008FFF;color: #fff;'>Home</a></li>
<li><a href='http://multiajaib.blogspot.com'>Android</a></li>
<li><a href='http://multiajaib.blogspot.com'>Facebook</a></li>
<li><a href='http://multiajaib.blogspot.com'>Internet</a></li>
<li><a href='http://multiajaib.blogspot.com'>Editing</a></li>
</ul>
</nav>
Keterangan!
untuk tulisan berwarna biru, itu adalah URL yang ingin anda arahkan, dan yangberhuruf tebal tersebut adalah kata yang diganti sesuai selera anda.

Komentar

Posting Komentar

Postingan populer dari blog ini

kunci guitar hari setelah senja DAY AFTERNOON

(intro : D--G-D-Em-D-A-D 3x ) (D--G-D-Em--D-A > oh tak terasa sudah aku lingkari berulang ulang kali ) ... (D--G-D-Em-D-A-D > sudah aku cari kesana kemari dari selatan kota sampai ke utara ) (intro : D--G-D-Em-D-A-D 2x ) (D--G-D-Em--A > sepertinya bukan karna kimia yang buat kita masih bisa bersama ) (D--G-D-Em-D-A-D > sedikit air dan udara menunggu senja sampai malam tiba ) (Reff : D--G-D-Em--A > sore sore sama sama minum jamu dicampur soda (D--G-D-Em-D-A-D > sore sore sama sama berbagi cerita biar ga gila ) (melodi : D--G-D-Em-D-A-D 2x ) (#) G-A > kamu minta yang aku punya G-> tak ada lagi cuma tinggal A-> Segini ) (Reff : D--G-D-Em--A > sore sore sama sama minum jamu dicampur soda (D--G-D-Em-D-A-D > sore sore sama sama berbagi cerita biar ga gila ) (Em-D-A-D > berbagi cerita biar ga gila ) (Em-D-A-D > berbagi RASTA biar tertawa ) Pindah kuncinye cepet man . . Untuk tanda (--) tahan kuncinye 2x
Posting Komentar
Baca selengkapnya

cara membuat menu sampingan

cara membuat menu samping cara membuat menu samping seperti di samping sangat mudah lihat tips2 berikut ya gan Cara memasang 1. Masuk ke Dasbor Blog >> Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript 2. Masukkan kode di atas. Yang perlu sobat perhatikan antara lain; 1. Ukuran lebar menu disini adalah 300 px, jangan lupa disesuaikan dengan ukuran sidebar blog sobat dgn mengurangi atau menambahnya. 2. Jumlah URL/Post maksimal 5 (saya gak tahu juga, kok cuma bisa segitu, hehe maklum super gaptek). Jika sobat mengisi dengan 6 Link, gak bakalan tampil semua. 3. Untuk menambah navigasi, silahkan copy saja kode yang sudah saya beri warna merah tebal sebagai contoh, kemudian ganti URL dan Judul Post 4. Kode berwarna hijau, sebagai judul/anchor text, sesuaikan dengan artikel sobat. 5. Untuk pewarnaan menunya silakan utak atik sendiri yee, hehehe. contoh pewarnaan nya ada pada kode color: #0A0A0A; masuk aja ke Color Generator untuk menget...
Posting Komentar
Baca selengkapnya

cara membuat menu navigasi drop down pada blog

Pada tutorial terdahulu sudah saya jelaskan cara membuat   menu navigasi biasa , cara membut   menu pages   dan cara membuat gabungan   menu vagiasi dan pages , pada tutorial kali ini saya akan menjelaskan cara membuat menu navigasi   drop down   atau menu sub navigasi. Sebelumnya akan saya jelaskan apa itu menu vaigasi drop down. Dalam terjemahan bahasa Indonesia drop down dapat di artikan turun kebawah jadi menu navigasi drop down adalah menu yang di fungsikan untuk mengelompokkan suatu artikel ke dalam sub kategori tertentu menjadi lebih terperinci sesuai dengan kategori artikel dan di susun  kebawah berdasarkan menu utama. Sebagai contohnya Anda ingin membuat menu artikel dengan tema Smartphone di mana di dalamnya Anda kelompkkan lagi menjadi lebih terperinci dengan menambah sub menu seperti Android, iOS, Windows Phone atau Blackberry.  Fungsi menu drop down pada dasarnya untuk lebih memudahkan pembaca blog Anda membaca artikel tertentu ...
Posting Komentar
Baca selengkapnya