MUSIK DIGITAL. Kali ini ingin berbagi tips-trik mempercantik tampilan blog milik anda mempergunakan menu navigasi statis dengan fitur Bersosial.com yang terintegrasi di dalamnya. Dikatakan statis karena menu navigasi ini tidak ikut bergerak meskipun kita menyorot halaman homepage blog sampai ke bawah. Menu navigasi inipun sangat mudah untuk disesuaikan dengan kondisi atau lebar blog yang anda miliki.
Berikut ini bentuk tampilan dari menu Navigasi Statis tersebut ....
Bila anda tertarik untuk memasang fitur navigasi statis ini, silahkan ikuti proses berikut ini :
Seperti biasanya, masuk dan login di blogger anda, pilih template dan pilih edit html, oh ya, hampir lupa download seluruh html template anda terlebih dahulu, sehingga bilamana nanti terjadi kesalahan, anda tinggal me-restore ulang template anda.
Langkah berikutnya adalah : carilah kode ]]></b:skin>, letakkan rangkaian script berikut ini di atasnya.
.bilah-menu-atas {
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 35px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #000;
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: 3px 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: 0px 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: 0px solid rgba(30, 30, 30, 0.125);
box-shadow: 0px 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);
}
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 35px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #000;
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: 3px 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: 0px 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: 0px solid rgba(30, 30, 30, 0.125);
box-shadow: 0px 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 : Angka 960 px menunjukkan lebar menu statis yang dapat anda sesuaikan dengan lebar wrapper blog anda.
Selanjutnya carilah kode <body>, dan letakkan rangkaian script berikut ini di bawahnya :
<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://dolananmusik.blogspot.com/'><img alt='Musik Digital' height='40px' src='http://img835.imageshack.us/img835/806/star1i.png' title='Home' width='40px'/></a></li>
<li><a href='URL'><img alt='Daftar Isi' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoBMGkKmDJV-Rm04dRVvJPba_S-x5GqUUfRcAcd1snzyQ9JTbTXUSnC24SB9yr7TumNKXfQiAgWiUcDodF-Zt6wYHRd7d2blk1IKviUEXuT_gp-zOuYuv-_3bsbt4QzTVJZHwTEXdygE/s800/Daftar%2520Isi.png' title='Daftar Isi' width='20px'/> Sitemap</a></li>
<li><a href='https://www.bersosial.com/topic/2094/dunia-musik-digital-indonesia' target='_blank'><img alt='Komunikasi' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLQwrTBaRqOuyFG-7pqmkzIMMBtCuYMiS60AjbxycZA-fB_hZTBPjhJF9gQeoNzHVfSz14SMPqraOGjL1WrBQ9fxmBxcECpjVF-sAcOQ5GHHIj06s3Fw-xOafCpGlCenc3v5qphkhYK-s/s800/Tanya%2520Jawab.png' title='Forum Komunikasi' width='20px'/> Forum Komunikasi</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='http://bersosial.com' target='_blank'><img alt='Bersosial' height='15px' src='http://img441.imageshack.us/img441/1232/1co1.png' title='Bersosial' width='20px'/> Bersosial</a></li>
<li><a href='URL'><img alt='Kebijakan' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvnzwvIm_mZtBvac8hAb9688iYrSY9mkbts4JDI0wpchqc82oaEFTXt3tdHkCQdDT0BAp3-TVa8gcre82WWHdg_l-SQ7pwiNB0j8DYmF62jSEM_Sr6Hd3lPYj_KCY9O3kOntW37c-pf5c/s800/Kebijakan.png' title='Kebijakan' width='20px'/> Kebijakan</a></li>
<li><a href='URL'><img alt='Kontak' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju5N5-MOVRYiq7rZDzNg4r6EkNbYN3EJ-xFFiPhhMzDSyKCAstndd96cWwEXbO0bNkhs90BxRtKXLk9b_g_SJp0TNegVyfFDwqGxbWSLN-bn2tnd0UEP37VokwWTdPtbrtzSlC8Dx73yM/s800/Kontak.png' title='Kontak' width='20px'/> Kontak Me</a></li>
</ul>
</div>
</div>
</div>
<br/>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://dolananmusik.blogspot.com/'><img alt='Musik Digital' height='40px' src='http://img835.imageshack.us/img835/806/star1i.png' title='Home' width='40px'/></a></li>
<li><a href='URL'><img alt='Daftar Isi' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoBMGkKmDJV-Rm04dRVvJPba_S-x5GqUUfRcAcd1snzyQ9JTbTXUSnC24SB9yr7TumNKXfQiAgWiUcDodF-Zt6wYHRd7d2blk1IKviUEXuT_gp-zOuYuv-_3bsbt4QzTVJZHwTEXdygE/s800/Daftar%2520Isi.png' title='Daftar Isi' width='20px'/> Sitemap</a></li>
<li><a href='https://www.bersosial.com/topic/2094/dunia-musik-digital-indonesia' target='_blank'><img alt='Komunikasi' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLQwrTBaRqOuyFG-7pqmkzIMMBtCuYMiS60AjbxycZA-fB_hZTBPjhJF9gQeoNzHVfSz14SMPqraOGjL1WrBQ9fxmBxcECpjVF-sAcOQ5GHHIj06s3Fw-xOafCpGlCenc3v5qphkhYK-s/s800/Tanya%2520Jawab.png' title='Forum Komunikasi' width='20px'/> Forum Komunikasi</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='http://bersosial.com' target='_blank'><img alt='Bersosial' height='15px' src='http://img441.imageshack.us/img441/1232/1co1.png' title='Bersosial' width='20px'/> Bersosial</a></li>
<li><a href='URL'><img alt='Kebijakan' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvnzwvIm_mZtBvac8hAb9688iYrSY9mkbts4JDI0wpchqc82oaEFTXt3tdHkCQdDT0BAp3-TVa8gcre82WWHdg_l-SQ7pwiNB0j8DYmF62jSEM_Sr6Hd3lPYj_KCY9O3kOntW37c-pf5c/s800/Kebijakan.png' title='Kebijakan' width='20px'/> Kebijakan</a></li>
<li><a href='URL'><img alt='Kontak' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju5N5-MOVRYiq7rZDzNg4r6EkNbYN3EJ-xFFiPhhMzDSyKCAstndd96cWwEXbO0bNkhs90BxRtKXLk9b_g_SJp0TNegVyfFDwqGxbWSLN-bn2tnd0UEP37VokwWTdPtbrtzSlC8Dx73yM/s800/Kontak.png' title='Kontak' width='20px'/> Kontak Me</a></li>
</ul>
</div>
</div>
</div>
<br/>
Keterangan : Ganti alamat url yang berwarna biru dengan alamat url anda, simpan template anda dan lihat hasilnya.
Demikianlah cara membuat Menu Navigasi Statis dengan fitur Bersosial.com, semoga bermanfaat.
1 komentar:
Tips trik yang mantap, bisa untuk menambah profesionalnya penampilan sebuah blog.
Thanks for sharing.
Silahkan meninggalkan komentar dengan bahasa yang relevan dan sopan.. # Don't Spamm ! #