Saturday, 2 March 2013

Cara Buat Menu Horizontal di Blogspot

14:07    No comments

Jangan lupa membaca artikel tentang bisnis di > Informasi bisnis terbaik 2020.

Anda tentu tahu menu horizontal dalam sebuah blog. Menu berfungsi untuk memudahkan pengunjung blog dalam menyelami isi blog kita. Tampilan menu horizontal yang akan saya berikan adalah seperti pada blog ini.


Bagi pengguna blogspot  yang masih belum tau cara membuat menu horizontal, saya berikan caranya dibawah ini. 

1. Login blog agan kemudian klik template >Edit Html > Lanjutkan

2. Ketik ]]></b:skin> gunakan Ctrl + F biar cepat


#navbar-iframe {    height:0px; visibility: hidden; display: none;  }


NB: 
Kode diatas untuk menghilangkan navbar asli blogger, bagi yang sudah menghilangkan lajut ke tahapan dibawah

3. Copy kan/ kode script berikut inidi 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);
} 

NB: 
Agan bisa mengganti warna background dan text menu nya dengan kode warna html color:, background-color:, dan background-image:.  Kode warnanya silahkan klik disini

4. Cari kode <body dan kemudian copy kode 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://IndoINT.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNREeFGtcqU12cFFIDQ75KqEp8qg4491zOrqPPNmRPs-OY8opzVDb6Gn2huLB_Adgwyos6r2rYGgF3c7r-82F2P6mMcPk5iB-JxtK8iOlrcLp0QXKHj0z6fwWQla6rhxkJf5hVoY-Fy1o/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>

NB:
Ganti http://IndoINTi.blogspot.com dengan URL blog kamu 
Ganti pula kata URL dengan link artikel / labels yang akan ditautkan 
Ganti kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang diinginkan. Jumlah menu bisa ditambah sesuai selera anda.

5. Save template..silhkan cek

Sumber https://geograph88.blogspot.com/

Selain sebagai media informasi pendidikan, kami juga berbagi artikel terkait bisnis.

0 comments:

Post a Comment