Membuat Menu Horizontal (Tanpa Mengedit HTML)

Untuk yang pengen buat menu horizontal di blogspot ada dua cara (yang aku tau). Cara pertama dengan menambah gadget seperti biasa, cara kedua yaitu dengan mengedit html.



Postingan kali ini aku mau berbagi cara pertama, cara yang nggak ribet dan nggak perlu ngedit html. Ini dia caranya:

1. Masuk ke blogspot.
2. Klik Tata Letak => Add Gadget => html/java script.
3. Copas kode berikut:
<style type="text/css">
/* Menu horizontal untuk Blogger http://softwaremaniapc.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://softwaremaniapc.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>
</ul>

# diganti dengan link yang kamu kehendaki.

Semoga bermanfaat.
Salam ^_^

Komentar