Assalamu'alaikum....
Wah sepertinya ada yang lagi cari menu horizontal seperti Kaskus Hehehe, OK dah kita langsung saja pada inti dari postingan ini yaitu Cara Membuar Menu Horizontal Seperti Kaskus ikuti langkah demi langkah berikut :
-Pergi ke Dasbord Blogger kalian
-Template » Edit HTML »
-Cari
]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.
#navbar-iframe {
height:0px; visibility: hidden; display: none;
}Keterangan:
Kode tersebut berfungsi untuk
menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda
telah menyembunyikan navbar standar maka lewati langkah ini dan
lanjutkan pada langkah yang ketiga.
-sisipkan kode CSS berikut ini tepat di atas ]]></b:skin> .
Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.
-Lalu cari kode <body> dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.
/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Fajri Andaviar
Blog: Fajri Andaviar
URL : http://fajriandaviar.blogspot.com/
--------------------------------------------------------------*/
.bilah-menu-atas {
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 27px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #336699;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
box-shadow: 0px 2px 0px rgb(14, 90, 140);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kolom-utama {
-moz-transition: all 0.2s linear 0s;
width: 960px;
height: auto;
margin: 0px auto;
}
.kolom-menu {
width: 521px;
height: auto;
margin: 0px 0px 0px -41px;
float: left;
display: inline;
}
.kolom-menu ul {
height: auto;
margin-top: 0px;
}
.kolom-menu ul li {
float: left;
position: relative;
list-style: none outside none;
}
.kolom-menu ul li:first-child {
border-left: 1px solid rgba(30, 30, 30, 0.125);
}
.kolom-menu ul li a {
color: #ffffff;
font-weight: bold;
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
text-decoration: none;
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
position: relative;
border-right: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}
.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
background-color: rgba(255, 255, 255, 0.125); Keterangan:
Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.
-Lalu cari kode <body> dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.
<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://fajriandaviar.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyVD3mcURjAkUR87LA8wf4pLD2gVnI5Cvfo7uerSTaNvpKC3mlvw2Up6kRPSV4WEh9lclZ_frNy93zhhKX99skRjaHhkAtctfDYLvRQCOPvvjAtOZi0xXWMHToMJQG94lKUhF61p2Bt4I/s800/Beranda.png' width='20px'/></a></li>
<li><a href='URL'>Menu Kiri 1</a></li>
<li><a href='URL'>Menu Kiri 2</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='URL'>Menu Kanan 1</a></li>
<li><a href='URL'>Menu Kanan 2</a></li>
</ul>
</div>
</div>
</div>
Keterangan:
Ganti http://fajriandaviar.blogspot.com/ dengan URL blog Kalian dan ganti pula kata URL
dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu
Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu
tampilan yang dikehendaki.
-Terakhir simpan template.
Bagaimana? Lumayan baguskan?
Sekian Tutorial saya Cara Membuat Menu Horizontal Seperti KASKUS ini. Selamat mencoba dan semoga berhasil.
Pengelola Blog : ABDUL WAHAB
Judul : Cara Membuat Menu Horizontal Seperti KASKUS
Ditulis oleh :Blog Shiro pada hari 2015/09/29
Rating Blog : 5 dari 5
Terima kasih sudah membaca artikel tentang Cara Membuat Menu Horizontal Seperti KASKUS
Kalian boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman kalian.
Namun jangan lupa harap memberikan link aktif dofollow ke URL
https://fajriandaviar.blogspot.com/2013/10/cara-membuat-menu-horizontal-seperti.html
Dan Terima kasih sekali lagi atas kunjungannya.
Ditulis oleh :Blog Shiro pada hari 2015/09/29
Rating Blog : 5 dari 5
Terima kasih sudah membaca artikel tentang Cara Membuat Menu Horizontal Seperti KASKUS
Kalian boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman kalian.
Namun jangan lupa harap memberikan link aktif dofollow ke URL
https://fajriandaviar.blogspot.com/2013/10/cara-membuat-menu-horizontal-seperti.html
Dan Terima kasih sekali lagi atas kunjungannya.
Kritik dan saran atau apapun bisa kalian sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak selalu online dikarenakan sibuk.
3 komentar
Terimakasih informasinya sangat membantu :)
selamat beraktivitas ka, izin share :)
mas link blog agan udah ada di blog saya, tukar linknya semoga lancar
Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Aktif, Link Mati, Promo, dll.
Dan Berbagilah Jawaban atas apa kesulitan yang sobat-sobat lainnya dapatkan.
Mohon maaf jika ADA komentar atau pertanyaan tidak bisa cepat saya respon,
DIkarenakan Saya tidak selalu online selama 24 Jam.