dengan menambahkan menu blog kita akan lebih mudah ditelusuri oleh pengunjung. kali ini saya akan membahas bagaimana membuat tombol menu yang keren seperti gambar diatas
1. masuk ke akun blog sobat
2. klik tata letak > tambah gadget (sesuai letak menu yang akan kita buat)
3. copy kan script dibawah ini
| <style type="text/css">
/* Menu horizontal untuk Blogger http://rifnotes.blogspot.com/ */
div.topbar {
height: 16px;
background: #e16031;
}
ul.claybricks {
font-weight: bold;
width: 100%;
background: #e3e490;
padding: 6px 0 6px 0;
margin: 0;
text-align: left;
font-family: calibri;
}
ul.claybricks li {
display: inline;
}
ul.claybricks li a {
color: black;
padding: 6px 8px 4px 8px;
margin-right: 20px;
text-decoration: none;
}
ul.claybricks li a:hover, ul.claybricks li a.selected {
color: white;
background: #5d4137;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959;
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px;
padding-bottom: 6px;
}
/* http://rifnotes.blogspot.com/ */
</style>
<div class="topbar">
</div>
<ul class="claybricks">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">tgkboy</a></li>
</ul> |
ganti yang warna biru dengan link yang sobat inginkan dan warna merah dengan nama menu yang sobat inginkan
4. Simpan dan lihat hasilnya,..
semoga berhasil dan selamat mencoba,..
0 komentar:
Post a Comment