Membuat Tombol Menu diBlog
Blogger Mania, Banyak cara membuat Tab Menu pada Blog, berikut ini Riau Spirit menyajikan cara mudah yang langsung dapat anda praktekkan.
untuk memudahkan para pengunjung mendapatkan berbagai info dari blog yang anda kelola, dapat dilakukan dengan berbagai cara. Mulai dari membuat icon. thumbnail dan menu (horizontal dan Vertikal) dan menu Search.
Kali ini Riau Spirit akan mencoba bersama dengan anda untuk membuat membuat Search dan menu Horizontal.
Langkah-langkah yang dapat kita lakukan adalah sebagai berikut:
1. Buka Account Blog anda
2. Klik Tata Letak
3. Klik Add Gadget
4. Pilih HTML/ Javascript
5. Copykan CSS/HTML berikut:
3. Klik Add Gadget
4. Pilih HTML/ Javascript
5. Copykan CSS/HTML berikut:
<style type="text/css">
.h_mnu_01{
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
.h_mnu_01 ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
background: #000000;
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: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000
}
.h_mnu_01 ul li{
display: inline;
}
.h_mnu_01 ul li a{
float: left;
color: #FFFFFF;
padding: 5px 11px;
text-decoration: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}
.h_mnu_01 ul li a:visited{
color: #FFFFFF;
}
.h_mnu_01 ul li a:hover, .h_mnu_01 ul li .selected{
color: #FFFF00 !important;
padding-top: 5px;
padding-bottom: 5px;
background: #008000;
}
</style>
</head>
<body>
<div class="h_mnu_01">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PROFILLE</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">MY BLOG</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
</body>
</html>
6. Ganti "Beranda,Profil,Produk, My Blog, ABOUT" sesuka kamu, sesuai dengan tab menu yang anda inginkan, dan tanda # diganti dengan alamat (link) dari menu tersebut. misalnya seperti dibawah ini.
<li><a href="http://riauspirit.blogspot.co.id/">MY BLOG</a></li>
7. Setelah proses pengeditan selesai, klik Simpan.
Berdasarkan pengalaman saya cara ini tidak pernah gagal
Untuk anda yang mengalami kesulitan dalam menerapkan langkah-langkah diatas silahkan hubungi Riau Spirit di Contact.
RELATED POST
.jpg)
a.png "close button")
