CARA MEMBUAT TAB MENU DIATAS HEADER
Saat kita pertama kali membuat blog setidaknya kita akan menerima pengaturan awal atau default dari blog tersebut, maka secara default di atas header akan ditampilkan tampilan yang mendatar berisikan beberapa menu yang biasa disebut dengan istilah ‘Navbar’ atau bisa juga disebut sebagai baris Navigasi. Namun karena beberapa alasan ingin mempercantik blog tersebut, maka tidak sedikit pengelola blog yang menyembunyikan bagian itu dengan cara menambahkan kode-kode tertentu ke dalam template blog agar tampilannya menjadi sedikit lebih berbeda.
silahkan melihat contoh dibawah ini :
Jika Anda semua tertarik pada tampilan di atas Anda bisa ikuti langkah-langkah berikut ini :
Pertama-tama tentunya dengan Login terlebih dahulu, kemudian pilih Menu >> Template >> kemudian pilih >> edit HTML >> dan kemudian cari kode script ]]></b:skin> dengan menggunakan CTRL+F agar lebih memudahkan pencarian, kemudian setelah ketemu copy kan kode di bawah ini di atas ]]></b:skin> tersebut
Kemudian masukkan kode script di bawah ini tepat di atas kode ]]></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); } |
kode script di atas adalah warna biru untuk background dan putih pada text. 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:.Warna yang di empat, 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://bangrustam.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1KlRBXOk_gQ058s3QhhBfDjOvHJGQGW7Y7AKiiz7NUWJQGehmBtYxQjK8zXQz9lPt8ahyphenhyphenw4Sn8nVRI46rapsD_rvuFEE20FOk21LehiM8JxGt3WQoAU95CJ-ke3fDfvR25l3LAPZTZ0w/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>
<li><a href='URL'>Menu Kiri 3</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='URL'>Menu Kiri 1</a></li>
<li><a href='URL'>Menu Kiri 2</a></li>
</ul>
</div>
</div>
</div>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://bangrustam.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1KlRBXOk_gQ058s3QhhBfDjOvHJGQGW7Y7AKiiz7NUWJQGehmBtYxQjK8zXQz9lPt8ahyphenhyphenw4Sn8nVRI46rapsD_rvuFEE20FOk21LehiM8JxGt3WQoAU95CJ-ke3fDfvR25l3LAPZTZ0w/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>
<li><a href='URL'>Menu Kiri 3</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='URL'>Menu Kiri 1</a></li>
<li><a href='URL'>Menu Kiri 2</a></li>
</ul>
</div>
</div>
</div>
Ganti https://bangrustam.blogspot.com/ dengan URL blog Anda masing-masing. Kemudian ganti dengan artikel yang mungkin akan di tautkan kedalam Menu Kiri 1 s/d 3 untuk yang sebelah kiri dan kemudian masukkan juga URL dan judul tautannya kedalam Menu 1 dan 2 untuk menu yang sebelah kanan, kemudian Simpan Template.
Posting Komentar