Cara Membuat Menu Horizontal Melayang Diatas Blog:
1. Buka akun blogger anda
2. Masuk ke pengaturan templete dan klik Edit HTML
3. Cari kode ]]></b:skin>
Anda bisa menggunakan CTRL+F agar lebih cepat ketemu kodenya
4. Selanjutnya masukkan kode di bawah ini tepat di atas kode ]]></b:skin> tadi.
#navbar-iframe { height:0px; visibility: hidden; display: none; }
Keterangan:
Fungsi langkah diatas adalah agar navbar standar Blogger anda
tersembunyi, namun jika anda sudah menyembunyikan navbar, lewati saja
langkah ini
5. Sisipkan beberapa rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> lagi.
.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 dari kode CSS di atas adalah warna biru untuk background dan putih
pada teks. Abda bisa menyesuaikan warna yang disukai dengan edit kode
pada color:, background-color:, dan background-image:.
6. Cari kode <body Lalu tempatkan kode berikut dibawahnya.
<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://cara-baru-andie.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_8MN-QG8D4qWcivmXcu46-9RkOkyog8_L_VSmx_T94-_c-I7C_IDKmwWh0KfEavOtTwfxwzzbBoRuN9GYTD4oENGIr5T50XTcBiRsXktCiO4vfHrZVMM9vdR7l7OvJe0ssznMoz6IuCA/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://cara-baru-andie.blogspot.com dengan Alamat homepage Blog Anda
Ganti http://cara-baru-andie.blogspot.com dengan Alamat homepage Blog Anda
Ganti pula kata URL dengan link artikel / labels yang ingin anda tampilkan pada menu horizontal tersebut
Ganti kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai judul link url dan sesuai dengan kemauan anda.
5. klik save template dan lihat perubahannya
Tidak ada komentar:
Posting Komentar