Cara Membuat Menu Horizontal Melayang Diatas Blog
Cara membuat menu horizontal melayang diatas blog merupakan subuah tutorial mudah untuk lebih mempercantik dan memperindah blog anda. dan dengan blog Cara Baru Andie ini, saya akan berbagi dengan sobat semua.
dengan adanya menu tersebut, anda tidak memerlukan tombol “Back to top” sebab dengan menu ini setiap anda membaca dalam sebuah halaman, dan melihat di posisi terbawah, menu horizontal tetap berada diatas layar komputer anda
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/AVvXsEgOGPwrsz3AKle9q3WWh7fQS9igqQolS-o_yg7aCGhiO6IV8yCxwIszXPo_j1rG-h8Gc6Q_XEfwo_VRiOJrSLTR99MBb2je3Cu7tGZZtP_Bb8iou4rwCrw6QwDF3HSYiimuA7J6q6nWsoY/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
Anda juga bisa menambahkan kolom lagi untuk menaruh menu tambahan. tinggal copy paste saja <li><a href='URL'>Judul</a></li> dibawah menu yang ada. karena pengaturan standar kode diatas hanya ada 1 alamat homepage, 2 menu dikiri dan 2 menu dikanan.
Mungkin sedikit rumit jika anda tidak mencobanya dan hanya membaca. cobalah secara langsung maka akan terlihat mudah dalam menerapkan cara diatas, sama halnya saat anda mencoba Download Video Youtube dengan Keepvid yang kemarin saya bahas.
Sekian dulu artikel saya yang berkaitan dengan Cara Membuat Menu Horizontal Melayang Diatas Blog. semoga membantu anda dalam membuat blog pribadi ataupun bisnis anda menjadi menarik dan lebih indah. Salam berbagi.
