Cara Mudah Dan Cepat Buat Menu Blogspot

Design menu blog dengan kreatif saya sendiri, karena saya menggunakan template yang bukan bawaan dari blogger, yang sebelumnya sudah saya ulas bagaimana membuat related post maka kali ini saya akan sedikit mengulas bagaimana membuat
menu pada blog atau website sobat. Mari kita pelan-pelan dan langkah demi langkah untuk membuat design menu blog sobat, mungkin langkah awal yang perlu dilakukan adalah sebagai berikut :

Login ke menu dasbord blog sobat.
Pilih Template.
Klick Edit HTML.
Centang/Aktifkan menu Expand HTML. (sebelah pojok atas menu editor)

Anda sudah masuk pada menu form editor HTML design blog, selanjutnya ikutin berikut :

Cari kode berikut </b:skin> , gunakan CTRL+F untuk mempermudah pencarian.

Ada satu hal yang harus diperhatikan yaitu pada pencarian pertama apabila sobat menemukan lebih dari satu, dikarenakan banyak template gratisan yang menggunakan </b:skin> lebih dari satu.

Kemudian ganti </b:skin> dengan kode dibawah :

</b:skin><style type="text/css">
.agoesmenus{
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
text-decoration: none;
}

.agoesmenus ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
background: #C0C0C0;
border-top-width: 1px;
border-right-width: 0;
border-bottom-width: 1px;
border-left-width: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF
}

.agoesmenus ul li{
display: inline;
}

.agoesmenus ul li a{
float: left;
color: #FFFF80;
padding: 5px 11px;
text-decoration: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
}

.agoesmenus ul li a:visited{
color: #FFFF80;
}

.agoesmenus ul li a:hover, .agoesmenus ul li .selected{
color: #000080 !important;
padding-top: 5px;
padding-bottom: 5px;
background: #808000;
}

</style>

Cari kode berikut <div id='content-wrapper'> , Kemudian ganti dengan kode yang di bawah :

<div class="agoesmenus">
<ul>
<li><a href="http://blogsobat.com" class="selected">Home</a></li>
<li><a href="http://blogsobat.com">About</a></li>
<li><a href=" http://blogsobat.com">Contact</a></li>
<li><a href=" http://blogsobat.com">Product</a></li>
<li><a href=" http://blogsobat.com">Help</a></li>
</ul>
</div> <div id='content-wrapper'>

Tahap terakhir yang perlu sobat lakukan mengganti url dan nama menu blog, Sobat tinggal mengganti tulisan yang warna biru dengan URL yang ada pada blog sobat, bisa dimulai dengan URL label atau post artikelnya, sebagai contoh sebagai berikut :

<li class='page_item home'><a href='http://blogsobat.blogspot.com/' title='Tiptext'>Namamenu</a></li>

Sobat setia juga bisa menambahkan sesuka hati untuk memperbanyak nama menunya.
Langkah terakhir yang perlu sobat lakukan adalah klick Save, yang perlu sobat perhatikan adalah error number HTML apabila terjadi kesalahan pada saat RUN SAVE.

Note : Uji test sudah berhasil pada blog saya ini.
Saran : Untuk berjaga-jaga terjadinya error dikarenakan salah copas, lebih baik sobat download terlebih dahulu Template sebelum mulai meng edit HTML_nya.
Atau sibat berminat melihat beberapa kode menu lainnya silahkan klik disini dan akan saya update terus untuk menu sesuai dengan kebutuhan sobat.

Koleksi menu horisontal+Vertikal blogspot atau website

Selamat mencoba.
Jangan lupa beritahu saya apabila sobat sudah berhasil.
Apabila sobat mau request menu blog yang sobat kelola maka insyaallah akan saya buatkan. dengan cara komentari artikel ini.