Cara Membuat Menu Horizontal Keren di Blog
Home »
Tutorial Blog
» Cara Membuat Menu Horizontal Keren di Blog
Cara Membuat Menu Horizontal Keren di Blog
Cara Membuat Menu Horizontal Keren di Blog - Kemarin Kang Zain sempat posting Cara membuat menu horizontal otomatis di blog, itu cara membuat otomatis dan simple. namun kali ini beda, karena dengan kode css sehingga menghasilkan menu horizontal yang keren di blog kita. Menu ini adalah menu yang tampil secara horizontal diatas header blog kita, bagi kita yang memakai blogspot, dengan menu ini maka blog kita akan sedikit nampak profesional.
Jika sobat lage cari menu horizontal mungkin ini bisa jadi pilihan. hehehe. ikuti tutorialnya dibawah ini dijamin mudah :
Cara Membuat Menu Horizontal Keren di Blog
Langkah-langkah Cara Membuat Menu Horizontal Keren di Blog :
1. Log in ke akun Blog Sobat
2. Kemudian sobat klik tata letak -> Tambah gadget -> Pilih HTML/JavaScript
3. Copy kode dibawah ini dan paste pada kotak HTML/JavaScript dan letakkan diatas header:
<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>
<li><a href="#">tgkboy</a></li>
</ul>
Keterangan :
# : sobat ganti dengan URL yang diinginkan.
4. Jangan lupa save
5. Lihat tampilan menu horizontal sobat.
4. Jangan lupa save
5. Lihat tampilan menu horizontal sobat.
6. Semoga bermanfaat
7. Jangan lupa tinggalkan pesan.
Cara Membuat Menu Horizontal Keren di Blog
.
artikel yang kreeeeeeeeeen,mksh ya kang
ReplyDeletemaksh broo.. mantep. trus klo mau bikin menu drop downnya gmna y?
ReplyDeleteBerhasil Sob ! cuman kok Latar nya wrna Kuning trus diatas nya Navigasi ya sob?
ReplyDeleteSiipp. ud q coba dan ber hasil... trus gmn cara nambah sub menunya
ReplyDeletemantap nih ,cool
ReplyDeletewah bgus nih gan mksih yah
ReplyDeletethanks mas bro artikelnya amat bermanfaat...??
ReplyDeleteMakasih Bro..
ReplyDeletemantap bro
ReplyDeletemakasih infonya
mantap sob..
aku tunggu kunjungannya kembali di rumahku
untuk posting di menu horizon tsb, caranya gmana bro...?
ReplyDeleteSuwon bozz... kunjung balik yah!
ReplyDelete@Katon Sumargi:sma2 sobat,,, langsung ktkp
ReplyDeleteTHANKS YA..
ReplyDeleteIzin share kak Admin...
ReplyDelete@Tri handayani:silahkan sobat,.,.,., salam kenal dri sya.
ReplyDeletenah yang ini nih yang ane perlu brader. thnks
ReplyDeleteWahh mantap Gan !!!! jangan lupa ya berkunjung keblog ku
ReplyDeletehttp://panikdotkom.blogspot.com
@emil rawit:siap gan,,, langsung meluncur
ReplyDeletebikin sub menu ny gan bgamana
ReplyDeleteterima kasih, sangat membantu
ReplyDeletesip gan
ReplyDeleteseep ni fren,makasih ya
ReplyDeletemakasih akang
ReplyDeletethanks gan,,
ReplyDelete,okeh gan bagus.
ReplyDeleteCara ganti warna atau jenis tulisan yang ada di menu gimana ya min?
ReplyDeleteWebsite Gratis