Membuat Menu Horizontal CSS Tanpa Edit HTML

Coretan Bang Dadan on

Friday, December 14, 2012

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

Membuat Menu Horizontal CSS Tanpa Edit HTML

Selanjutnya Copy kode CSS dibawah ini dan pastekan pada HTML/Javascript
Berikut kode CSS-nya

.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

Labels: blogger tutorial, Widget

Thanks for reading Membuat Menu Horizontal CSS Tanpa Edit HTML. Please share...!

24 Comments on Membuat Menu Horizontal CSS Tanpa Edit HTML

UnknownDecember 14, 2012 at 11:24 PM
luar biasa cuy,
Dadan DRDecember 14, 2012 at 11:26 PM
Hehe.. silahkan sob, kalau mau buat menu itu. gampang, gak mesti edit HTML..!!
UnknownJanuary 29, 2013 at 10:52 PM
Mau tanya nih K, naaa aku bikinnya mengikuti petunjuk di atas tanpa aku rubah sedikitpun, dan akirnya jadi menu horizontal yang aku harapkan tapi kok setelah aku klik, kok perginya ke alamat blog nya K' Dadan, apa yang salah y???
Dadan DRJanuary 29, 2013 at 11:03 PM
Hehehe... lupa aku blm kasih keterangan ya??
Kamu tinggal gati URL-nya msing2 dari Home sampai Tips & Trick, itu msh punya saya.
jadi rubah aja sm punya yayuk ya??
UnknownJanuary 29, 2013 at 11:08 PM
hehehehe pantesan, hayuuuh di tambahin keterangannya dung, biar kita-kita yang menuru g makin gugup :)
Dadan DRJanuary 29, 2013 at 11:10 PM
Oke deh,, sekarang jg aku kasih keterangan.. thanks ya saran nya?? Like :)
UnknownJanuary 31, 2013 at 12:28 PM
Thank infonya gan

tugas selesai
Rizki Cahya PermanaMarch 24, 2013 at 3:24 PM
Terimakasih tutornya kak, kunjung balik ya :) ricahyap[dot]blogspot[dot]com/
UnknownApril 3, 2013 at 9:39 AM
kalau minta tolong kasih tau caranya untuk membuat daftar menu seperti punya sobat disamping itu bisa ga..?
Mas ZuhdiApril 21, 2013 at 11:31 PM
Terima kasih sekali muwantab bangetz dipraktekkan langsung berjalan, kalau semua menunya kurang keatas settingannya yg mana ya mas?
UnknownMay 10, 2013 at 4:02 PM
Sumpah, Tutorial-nya Keren-keren. Thanks Sob. Kunjungi blog saya http://sociainfo.blogspot.com
BalarisaAugust 18, 2013 at 2:54 PM
nice infonya gan , tapi ada masalah gan pas aku ganti dengan link aku kok nggak tersimpan, mohon pencerahan nya gan
UnknownSeptember 9, 2013 at 7:28 PM
bisa bang thanks ya , tapi masih bingung gimana buat menunya jadi drop down ??
ZOctober 8, 2013 at 10:46 PM
Cara ngerubah pilihan-pilihan nya gimana ya?kan disitu ada Home,About,Contact,Tutorial Blog sama Tips & Trick
makasih :yaya:
akang samOctober 9, 2013 at 9:54 AM
nice sharing mas brow

Membuat Menu Horizontal CSS Tanpa Edit HTML

Previous

Next ➧

24 Comments on Membuat Menu Horizontal CSS Tanpa Edit HTML