Cara Membuat Menu Horizontal

Cara Membuat Menu Horizontal – Pada kesempatan ini admin bacatutorial.com akan berbagi tentang Cara Membuat Menu Horizontal.

Menu navigasi horisontal dengan CSS yang sederhana ini terdapat dua pilihan menu beserta demo yang ada dibawah agar tidak penasaran sebelum memasang mungkin bisa terlebih dahulu dengan melihat demonya. Tampilan yang ramping dan masih sederhana serta source kode yang simple bisa menjadi tahap dasar untuk permulaan belajar, khususnya saya pribadi dan pemula lainnya untuk melangkah lebih jauh lagi dalam belajar mengolah kode dan mempercantik tampilan blog. Untuk penjelasan lebih lanjut, maka berikut tutorial untuk Cara Membuat Menu Navigasi Horisontal Blog.

Cara Membuat Menu Horizontal

Cara Membuat Menu Horizontal

Cara Membuat Menu Horizontal

1. Login ke akun blogger.
2. Masuk menu Template lalu pilih Edit HTML.
3. Copy kode berikut ini lalu paste di atas kode ]]></b:skin> kemudian Simpan Template.

div.redmenu{ background:#9A0000 url(https://lh3.googleusercontent.com/-zkvIc1a5Oqc/Uiv9v_LY_LI/AAAAAAAAGG0/_pQzW04tfXM/h120/bg1.gif); border:1px solid #000; font-size:0; }
div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://lh3.googleusercontent.com/-V421OopKYKk/Uiv9wFXb3QI/AAAAAAAAGG8/elEEpjz9NRg/h108/bg.gif); color:#fff; text-decoration:none; font: bold 12px Arial; line-height: 32px; }
div.redmenu a:hover, div.redmenu a.current{ background-position:0 -60px; }
div.redmenu a.end{ width:2px; padding-left:0;padding-right:0; }
4. Lalu langkah selanjutnya untuk menampilkan Menu Navigasi Horisontal di Blog caranya copy kode berikut ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode tersebut didalamnya.
<div class='redmenu'>
<a expr:href='data:blog.homepageUrl' class='current'>Home</a>
<a href='http://www.artikelbagus.com/'>Menu 1</a>
<a href='http://www.artikelbagus.com/'>Menu 2</a>
<a href='http://www.artikelbagus.com/'>Menu 3</a>
<a href='http://www.artikelbagus.com/'>Menu 4</a>
<a href='http://www.artikelbagus.com/'>Menu 5</a>
<a class="end">&nbsp;</a>
</div>

Keterangan:
Ganti http://www.artikelbagus.com/ dengan URL label blog anda.

5. Langkah terakhir klik Simpan, maka selesai dan seperti ini nanti hasilnya dari Cara Membuat Menu Navigasi Horisontal Blog.

Demikianlah pembahasan singkat tentang Cara Membuat Menu Horizontal dari admin bacatutorial.com, semoga bermanfaat. Jangan lupa lihat juga Cara Membuat Blog di Blogspot yang Baik dan Benar.

Leave a Reply

Your email address will not be published. Required fields are marked *