1001Tutorials: Cara Membuat Tab Laman Diatas Header

Ketika membuat blog dengan menggunakan template standar Blogger, maka secara default di atas header akan ditampilkan bilah mendatar berisikan beberapa menu yang biasa disebut dengan istilah ‘Navbar’ atau dapat pula disebut sebagai baris navigasi. Namun kita dapat menggantinya dengan sebuah tab laman tentunya menambah cantik blog Anda.

Untuk menambah sebuah tab di atas header pertama-tama kita harus terlebih dahulu menonaktifkan atau menghilangkan tampilan "navbar" tersebut, dengan cara :

Tata Letak
Pilih widget Navbar
Terdapat banyak pilihan , silahkan pilih "Off" untuk menghilangkannya.

Langkah selanjutnya :

Cari kode ]]></b:skin> ,
Masukan kode dibawah ini tepat diatas kode ]]></b:skin> :

/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.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);
}

Warna tab di atas adalah warna biru, seperti yang tertera pada blog ini. Untuk menggantinya edit bagian background-color:

Setelah itu cari kode <body ,
Masukan kode dibawah ini tepat dibawah kode <body :

<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://eltelu.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvluOEfm3qjF6PBB74v-2PwzbuVF84XpnGkNm14uCm7RhHlXZGkVf2DtWaOBr-YwCK_746109mGPc1E6ODO6l65pjxNNZ0JHzqUDWOL9GYTUB4HOueY7mfnaQnCMqorFDK849R6z62xN4/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 kode yang berwarna "biru" dengan alamat blog Anda. dan kata "Menu Kanan" dengan kata yang ingin Anda tampilkan, serta "URL" dengan alamat yang ingin Anda tuju.

Simpan Template

Semoga Bermanfaat.

Laman

Cara Membuat Tab Laman Diatas Header

3 komentar:

Translate