Assalamu'alaikum Wr.Wb
Membuat Menu Horizontal CSS Tanpa Edit HTML - Pada malam kali ini saya akan membahas tutorial cara membuat menu horizontal CSS Block keren tanpa edit HTML.
Menu horizontal merupakan sebuah menu yang membentang panjang dan biasanya terletak dibawah header blog. menu horizontal ini berfungsi untuk mempermudah pengunjung dalam menelusuriisi daripada blog kita.
Nah untuk itu pada kesempatan kali ini bang dadan akan membahas cara membuatnya, gak perlu pake edit HTML, jadi makin mudah saja ya sob dalam menerapkannya.
Berikut DEMO-nya :
Oke langsung saja kita pada pembahasan.
Cara Membuat Menu Horizontal CSS Block Tanpa Edit HTML
- Pertama Silahkan login pada akun blog sobat
- Selanjutnya Masuk ke Dasbor
- Pilih Tata Letak
- Lalu Klik Tambah Gadget *Biasanya dipasang dibawah header
- Pilih HTML/Javascript
- Selanjutnya Copy kode CSS dibawah ini dan pastekan pada HTML/Javascript
- Berikut kode CSS-nya
<style type="text/css">
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: url(https://lh6.googleusercontent.com/-PcV4VpR8vVs/UMtMGi8I0II/AAAAAAAAAfA/1yw3SNrhT1M/w248-h248/navbangdadan.gif) center center repeat-x;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.solidblockmenu li a:visited{
color: white;
}
.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: url(https://lh6.googleusercontent.com/-fKZAiQvUg8E/UMtMGrxQwrI/AAAAAAAAAfE/1IihW4JVYEQ/w248-h248/navaktifbangdadan.gif) center center repeat-x;
}
</style>
<br />
<ul class="solidblockmenu">
<li><a class="current" href="http://bangdadan.blogspot.com/">Home</a></li>
<li><a href="http://bangdadan.blogspot.com/2012/12/about-coretan-bang-dadan.html">About</a></li>
<li><a href="http://www.emailmeform.com/builder/form/58bZ51u00rcDY7vL8RS3p9V">Contact</a></li>
<li><a href="http://bangdadan.blogspot.com/search/label/blogger%20tutorial">Tutorial Blog</a></li>
<li><a href="http://bangdadan.blogspot.com/search/label/tips%20trick">Tips & Trick</a></li>
</ul>
- Selanjutnya klik Simpan
Nah selesai deh, sekarang sobat sudah punya menu horizontal seperti pada demo diatas. Bila sobat tidak mempunyai Element/Widgate di bawah Header, silahkan lihat postingan bang dadan sebelumnya tentang Cara Membuat Widgate Horizontal dibawah Header.
Mungkin sampai disini dulu pembahasan kita kali ini tentang Cara Membuat Menu Horizontal CSS Block Keren Tanpa Edit HTML. Semoga artikel ini bermanfaat bagi sobat yang membutuhkan. Terimkasih
Bilahitaufiq Walhidayah
Wassalamu'alaikum Wr. Wb
Tidak ada komentar:
Posting Komentar