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 tutorianya :
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIYrCG_4HQwPliXibDc2BpuhZlOyOroE5j0bmLEZnE7j5MLPsVop_L6iLPSQX1Oc3-9z12PA3sfaNGOxzcKzOXC7x2zKddo9KM6lMZ6E3-Zp3RSnQJ1CKRGZzua87VslQkVp0dwF_xsmg/h120/bg1.gif); border:1px solid #000; font-size:0; }
div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNNJzs8gpmCZqyZJRDa9Xem7umrkjITaxoaldFrZRjn3TIh_J19RAbZycQu45enmyDET6HnVkhnatsn3qvNV2JJ_vvlfv865Ohdv0-I0HUiEMCSE-ntfLPoyc0QlPRqRshDQk_t2m15Lc/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://acibudaya.blogspot.com'>Menu 1</a>
<a href='http://acibudaya.blogspot.com'>Menu 2</a>
<a href='http://acibudaya.blogspot.com'>Menu 3</a>
<a href='http://acibudaya.blogspot.com'>Menu 4</a>
<a href='http://acibudaya.blogspot.com'>Menu 5</a>
<a class="end"> </a>
</div>
Keterangan :
Ganti http://acibudaya.blogspot.com dengan URL label blog anda.
5. Langkah terakhir klik Simpan. Maka nanti jadinya akan berwarna merah.
Atau apabila ingin menggunakan Menu Navigasi Horisontal Blog dengan warna lain, maka langkah-langkah penerapannya seperti pada yang sudah tertera di atas.
Warna Biru
CSS*
#bluemenu { border: solid 1px #39F; background:#64DAFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgolCvI-183iUV0WwJwwYC1KeOIXXnlrqSZqrNl8pX7b_qXlnxLlAj_JStxbOt9aepY1NMqMpiunjCqTKKI0yZWXSZ_8djW6MEbuyt7ucDwnjVnKX_wNIOFFoBQqmg2td88OFobv811rqs/h120/bluebg.gif) repeat-x; }
#menublues{ font-size:0; }
#menublues ul, #menublues li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#menublues a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqgBcknXgzj0J5WnqEy84Xete1SIGZTlDxhMWbE46ANngSegngRN79HhcANG140KF5VfgXFER6DMUtY0ZwNt9GfWJAiuY4SAyWnQl3-tXluamVDoXIgDYWOjkO2sApEoDlaepPmQsKY0U/h108/blue.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menublues a:hover, #menublues a.current{ background-position: 0% -60px; color: #fff; }
#menublues a.end{ width:2px; padding-left:0;padding-right:0; }
HTML*<div id='bluemenu'>
<div id='menublues'>
<ul>
<li><a expr:href='data:blog.homepageUrl' class='current'>Home</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 1</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 2</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 3</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 5</a></li>
<li><a class='end'> </a></li>
</ul>
</div>
</div>
Warna hijau
CSS*
#greenmenu { border: solid 1px #52e052; background:#64DAFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4bGL-0nChRKneuZTNet58Oalovy5ZGB88dUYnDqF3ZILCZKzymSi3-BPMPdgnDjOl-r6BAPuqvTzjYwppTLZqSlMDB7dLbph4JkFfxtXl2kM11YlHywIfbuKis3lKXqdQHTXpsDeYsBI/h120/greenbg.gif) repeat-x; }
#menugreen{ font-size:0; }
#menugreen ul, #menugreen li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#menugreen a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfgXq6m88omP2SHFWMo7DBOL8mjKgXZm7yW7ioeI__HmZOSEjPJS1sMbVWWtlwveCvYLbJFvua0YwjTZ8UyVadVG0-uzbwfpGKcotTqbxKo0iA7OFCkjqHNx7x9E8T-hq9k5cKC74cUNk/h108/green.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menugreen a:hover, #menugreen a.current{ background-position: 0% -60px; color: #fff; }
#menugreen a.end{ width:2px; padding-left:0;padding-right:0; }
HTML*<div id='greenmenu'>
<div id='menugreen'>
<ul>
<li><a expr:href='data:blog.homepageUrl' class='current'>Home</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 1</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 2</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 3</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 5</a></li>
<li><a class='end'> </a></li>
</ul>
</div>
</div>
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Membuat Menu Navigasi Horisontal Blog. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
