Cara membuat menu sticky diatas header blog, menu sticky? Apa itu menu sticky? Menu sticky yaitu menu yang apabila halaman blog atau situs di scroll maka menu akan tetap diam, tidak bergeser ke atas seperti yang biasanya, itu sedikit penjelasan mengenai menu sticky, tapi bukan itu yang akan kita bahas disini, kali ini saya akan membahas mengenai tutorial atau cara memasang menu sticky diatas header.
Jika anda blogger sejati, pasti akan menggunakan template bawaan blogger dan akan mendesain template blog atau situs anda sendiri dengan kemampuan anda sendiri. Banyak keuntungan jika anda menggunakan template buatan anda sendiri, salah satunya anda akan mengerti beberapa bahasa blogger seperti javascript, css, termasuk sticky.
Langsung saja ini dia tutorial atau cara membuat menu sticky diatas header blog :
1. Pertama anda buka blog anda
2. Pada dropdown menu pilih menu Template => Edit HTML
3. Back up terlebih dahulu jika sewaktu – waktu terjadi kesalahan bisa dengan mudah dikembalikan
4. Kemudian 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.
5. Setelah itu sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> .
/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Kios Sederhana
Blog: Kios Sederhana -:[Kios Sederhana]:-
URL : http://kiosederhana.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:.
6. Dan 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://kiosederhana.blogspot.com/'><img alt='Kios Sederhana' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhynmgj-Lk-P0nof1lnmPvdL-37WLkqcoXm8iZ38Zrdy7VzniCI6s1TnPHZK7pe2_SMiijNdadtfoB9kexrQCjkkpJAhQ6KO9Dhi0I8Pj2qxSx1DEUU7tu7m1I7n1MHqAALgKXfpv7FyG4/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://kiosederhana.blogspot.com/ dengan URL blog Anda 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.
7. Kemudian simpan template anda dan lihat apa yang terjadi pada blog atau situs anda
8. Selesai
Gampang bukan? Demikian artikel sederhana ini dibuat, semoga dapat bermanfaat, terimakasih atas kunjunganya, kirim juga artikel ini disini, gratis kok !
Ganti http://kiosederhana.blogspot.com/ dengan URL blog Anda 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.
7. Kemudian simpan template anda dan lihat apa yang terjadi pada blog atau situs anda
8. Selesai
Gampang bukan? Demikian artikel sederhana ini dibuat, semoga dapat bermanfaat, terimakasih atas kunjunganya, kirim juga artikel ini disini, gratis kok !
Reference :
http://eltelu.blogspot.com/
0 komentar:
Post a Comment
Terimakasih atas kunjunganya
Jika anda kurang puas :
1. Silahkan berkomentar secara bijak
2. Dilarang berkomentar dengan berbau unsur SARA
3. Dilarang berpromosi iklan atau produk