CARA MEMBUAT TAMPILAN NAVIGASI BLOG BERTABULASI HORIZONTAL
Pertama,
buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit
HTML’ > ‘Lanjutkan’.
Catatan:
Sebelum anda melakukan perubahan para kode HTMLnya alangkah baiknya jika anda
membackup dulu HTML bawaan dari templatnya, dengan cara mengkopinya ke dalam
NOTEPAD dan beri nama “template blog yang asli”, sehingga jika ada kesalahan
(gagal) dalam mengeditnya, anda tinggal menghapus kode HTML yang gagal tersebut
dengan kode HTML yang sudah anda simpan. Jika sudah mari kita lanjut ke langkah
yang berikutnya.
Kedua,
cari ]]></b:skin> dan kemudian
sisipkan kode di bawah ini tepat di atasnya.
#navbar-iframe {
height:0px; visibility: hidden; display: none;
}
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.
Ketiga,
sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> .
.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);
}
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:.
Keempat,
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://alamatblog/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZ8EmP-fqUyuIOqX4fUPfmZI-bniFYpNuAI5a8PRSTLeMWnvmJ3ukrrXOPWQ5wOSxD4r4BSK6E3MEUz51fP7-V2uDCh9vYQqBEByJIQwTnVBg7nUNRBYkYkzVC_qV9yg5YI_b7DVC4js/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>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://alamatblog/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZ8EmP-fqUyuIOqX4fUPfmZI-bniFYpNuAI5a8PRSTLeMWnvmJ3ukrrXOPWQ5wOSxD4r4BSK6E3MEUz51fP7-V2uDCh9vYQqBEByJIQwTnVBg7nUNRBYkYkzVC_qV9yg5YI_b7DVC4js/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://alamatblog/
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, misalnya: Menu Kiri 1 jadi HOME, Menu Kiri 2 jadi KONTAK dan seterusnya.
Kelima,
simpan template.
Setelah
template disimpan maka navbar standar Blogger tidak lagi ditampilkan di halaman
blog dan akan tergantikan dengan navbar baru seperti yang tampak pada gambar di
atas. Kemudian perlu diketahui bahwa rangkaian contoh kode pada langkah yang
keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan
3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2,
sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1
dan Menu Kanan 2. Sehingga apabila belum sesuai dengan keinginan, maka silakan
dilakukan kustomisasi seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>.
Demikian, semoga
postingan ini bermanfa’at.
No comments:
Post a Comment