Cara Membuat Menu Horizontal di Blogspot

Penting sekali sebuah blog memiliki navigasi situs yang didalamnya terdapat link yang menuju ke halaman about, halaman kontak sampai pada halaman kategori yang ada dalam blog tersebut.
Pada template blogspot yang belum memiliki sebuah navigasi site, bisa kita tambahkan dengan cara mengedit html template.

Cara membuat menu horizontal sederhana

1.Masuk pada Dasbor blogspot.

2. Pada halaman dasbor, klik Rancangan.
3. Pada halaman Elemen Laman, klik menu Edit HTML.

4. Setelah kita masuk pada halaman Edit Template, segera centang Expand Template Widget.
Pada langkah ini, bila kita tidak yakin akan berhasil melakukan pengeditan lebih baik download template blogspot terlebih dulu agar saat terjadi sesuatu pada template blog, kita tinggal upload template yang terdownload tadi pada halaman Edit Template.


5. Kemudian cari kode ]]></b:skin>, bila sahabat kesulitan mencari kode tersebut silahkan klik Ctrl+F atau pada menu browser klik menu Edit lalu pilih Find. Silahkan copy paste script ini di atas kode tersebut...
/* css menu */
#menu {
font-family: Arial, "Trebuchet MS", Verdana, Tahoma;
width: 862,5px;
height: 40px;
background: #eee;
}
#pagenav {
display: block;
font-weight: bold;
font-size:11px;
color: #fff;
margin: 0 0 5px 0;
padding: 0 0 0 10px;
height: 40px;
line-height: 40px;
list-style-type: none;
position: relative;
}
#pagenav li {
float: left;
color:#ffffff;
}
#pagenav li a {
height:38px;
line-height:38px;
font-size:15px;
font-weight:bold;
padding: 0 6px 0 6px;
text-transform:uppercase;
}
#pagenav .current_page_item a {
color:#FFF;
}
#pagenav .current_page_item a:hover {
color:#FFF;
}
.huruf_besar {
float:left;
color:#003399;
line-height:60px;
padding-right:5px;
font-family:trebuchet ms,verdana;
font-size:60px;
}

6. Selanjutnya di atas </header> letakkan script berikut....

div id='menu'>
<ul id='pagenav'>
<li><a href='http://rina-as.blogspot.com/' title='Home'>Home</a></li>
<li><a href='http://rina-as.blogspot.com/search/label/blog' title='Tutorial dan Info Blog'>Blog</a></li>
</ul>
</div>

Catatan : huruf yang berwarna merah adalah alamat blog silahkan sahabat ganti dengan alamat blog kalian, sedang huruf yang diberi warna hijau silahkan isi dengan judul link.
7. Setelah itu klik tombol Simpan template. Selesai..

Semoga posting tentang cara membuat menu hodisontal di blogspot dapat menjadi ulasan yang bermanfaat...

Artikel Lainnya

Tweet

Share on :