Membuat menu type topbar



Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
3. Masukkan script dibawah ini
4. Edit sesuai keinginan anda , saya rasa anda sudah tau
5. Klik simpan
<style type="text/css">
div.topbar{ /* bar that runs across the top of the menu */
height: 16px;
background: #e16031;
}

ul.claybricks{ /* main menu UL */
font-weight: bold;
width: 100%;
background: #e3e490;
padding: 6px 0 6px 0; /* padding of the 4 sides of the menu */
margin: 0;
text-align: left; /* set value to "left", "center", or "right" to align menu accordingly */
}

ul.claybricks li{
display: inline;
}

ul.claybricks li a{
color:black;
padding: 6px 8px 4px 8px; /* padding of the 4 sides of each menu link */
margin-right: 20px; /* spacing between each menu link */
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%); /* moz syntax for CSS3 gradient */
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%); /* webkit syntax for CSS3 gradient */
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); /* opera syntax for CSS3 gradient */
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; /* moz syntax for CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px; /* large padding to get menu item to protrude upwards */
padding-bottom: 6px;
}
</style>

<br />
<div class="topbar">
</div>
<ul class="claybricks">
<li><a href="http://dhecun.blogspot.com/"><span style="font-family: Verdana, sans-serif;">[ Home ]</span></a></li>
<li><a href="http://alamatlinkanda.com/"><span style="font-family: Verdana, sans-serif;">[ Teks anda ]</span></a></li>
<li><a href="http://alamatlinkanda.com/"><span style="font-family: Verdana, sans-serif;">[ Teks anda ]</span></a></li>
<li><a href="http://alamatlinkanda.com/"><span style="font-family: Verdana, sans-serif;">[ Teks anda ]</span></a></li>
<li><a href="http://alamatlinkanda.com/"><span style="font-family: Verdana, sans-serif;">[ Teks anda ]</span></a></li>
</ul>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/membuat-menu-type-topbar.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Semoga bermanfaat...!!!

Subscribe

0 Komentar Blogger
Komentar Facebook

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers

Google+ Followers

Google+ Badge