pengen tahu caranya?
pantengin terus artikel saya ini sampai selesai :D
oke jangan banyak bicara lagi kita mulai Tutorialnya..
Pertama
1. Buka akun blogger anda
2. Masuk ke pengaturan templete dan klik Edit HTML
3. Cari kode ]]></b:skin>
Anda bisa menggunakan CTRL+F agar lebih cepat ketemu kodenya
4. Selanjutnya masukkan kode di bawah ini tepat di atas kode ]]></b:skin> tadi.
#navbar-iframe { height:0px; visibility: hidden; display: none; }
Sedikit Keterangan:
5. Sisipkan beberapa rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> lagi.
.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);
}
<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://semuaberita.net/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3u7aKQEQlZqoSp3BQW3Bz4iqQOQaj3fohNQyaH5Q2doRf5uzFeBBt5Vqmwc76RlP6MkDrufJmZQgVp9V0jeSUl_qAv9OOmrcxrQXORyz_Qt8PgI-yQh_v8ge2_4NI8Jq3liJOhLNlcTA/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>
Ganti pula kata URL dengan link artikel / labels yang ingin anda tampilkan pada menu horizontal tersebut
Ganti kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai judul link url dan sesuai dengan kemauan anda.
5. klik save template dan lihat perubahannya
Berhubung saya sudah ngantuk jadi Sekian dulu Tutorial saya kali ini, terus pantengin semuaberita bersama fauzian pasti akan mendapatkan tutorial yang baru lagi.
No comments:
Post a Comment