Membuat Glossy Red Menu pada Blogspot

Tweet

Banyak kalangan webmaster-webmaster membagikan tips tentang pembuatan menu horisontal yang bisa menarik perhatian para pengunjung blog. ini bertujuan untuk membuat para pengunjung betah diblog kita. Karena semakin bagus dan menarik tampilan blog kita akan semakin membuat pengunjung betah diblog kita. Ada pepatah, jika ingin orang dipandang orang lain haruslah memperindah diri kita terlebih dahulu sebelum mempercatik isinya.

Lah, kali ini saya akan membagikan tips tetang pembuatan Menu Glossy Red pada blogspot.

Pingin lebih jelasnya silakan kunjungi http://testpio.blogspot.com

Live Demo

Langsung ikuti langkahnya :

• Login akun blog anda;
• Pilih Rancangan;
• Klik tab Tambahkan Gadget;
• Pilih HTML/JavaScript;
• Copy paste kode dibawah kedalamnya;

<style>
.piored-menu{
border:5px solid #cd0000;
padding:0;
clear:both;
}
.piored-menu{
margin:0px;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0EmEbbi8iTdIsmelJ1kvw0qVxgkRxroPrHwUgN1RDSVninRJr0zotBjDaH-s12qV5DsWhArZuM79ek121NkAI8WHKHMrUJrqCfo8Qj3-um3l3VoJx6NCboM5mf40qmA00jgQ9i7P06Zw/s400/blockdefault.gif) center center repeat-x;
}
.piored-menu li{
display: inline;
}
.piored-menu li a{
float: left;
color: #fff;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.piored-menu li a:visited{
color: #fff;
}
.piored-menu li a:hover, .piored-menu li a.selected{
color: #fff;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijLnghqZnBGdaCH2wz6-oMsAxupQCNhSh9TS_mQIjZWBR1t6yqWW_2Jat953QqErcw4Vu43rH6v9NTi5ggJ1PqwyiZRqyvDEHhMLHhdfR6keu3WaLWpIy-RUJDuX9vvdDr12tdxwwZmpg/s400/blockactive.gif) center center repeat-x;
}
</style>

<ul  class="piored-menu">
<li><a href="#">Beranda</a></li>
<li><a href="#" >Tutorial Blogger</a></li>
<li><a href="#">Guest Book</a></li>
<li><a href="#">Contact Me</a></li>
</ul>

• Lalu Simpan, selesai.

Mudah bukan, anda tinggal mengganti hurup yang bercetak BESAR (#) dengan URL tujuan anda.
Swelamat Mencoba... Happy Blogging...!!!

Jika Anda menikmati posting ini dan ingin dihubungi setiap kali posting baru diterbitkan, maka pastikan Anda subscribe to our regular Email Updates!

Please...!!! Bookmark artikel ini melalui layanan Bookmarking favorit Anda: