Setelah belajar bagaimana membuat menu bar pada pelajaran lalu, maka sekarang kita akan masih belajar membuat menu bar dengan cara ke 2, cara ini paling cocok bagi mereka yang merasa blepotan buat menu dengan mengutak-atik tempelat. Saya sendiri sewaktu pertama kali mengenal dan menggunakan script, saya menggunakan menu bar seperti ini...
Menu bar yang akan kita buat pada kali ini memiliki jalan agak lebih ringkas dikit dibandingkan dengan pelajaran yang lalu, keuntungannya adalah sama - sama memiliki menu pada page blog kita namun kerugian cara ini adalah anda tidak bisa menabahkan sub menu pada sebuah menu. Saya sendiri telah mencoba melakukan experiment mengenai hal ini untuk dapat membuatnya bisa memiliki sub menu pada sebuah menu layaknya cara pertama namun hasilnya tidak bisa...
Adapun langkah-langkah membuat menu bar ini adalah sebagai berikut
1. Buka Account Blogger anda
2. Klik Tataletak
3. Klik Add Gadget
4. Pilih Add HTML/Javascript
5. Copy dan Paste code 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 "HOME,PROFILLE,PRODUCT, MY BLOG, ABOUT" sesuka kamu, dan tanda # diganti dengan alamat dari menu tersebut. misalanya seperti dibawah ini.
<li><a href="http://hostinggratisan09.blogspot.com/">MY BLOG</a></li>
7. Setelah proses pengeditan selesai, klik Simpan.
Sukses Bro.......
No comments:
Post a Comment
Terimakasih atas komentar anda