horizontal menu bar youtube style with css

moonroemoort

css, widget

26 January 2014

Belum ada komentar

kali ini saya akan share horizontal menu bar youtube style bisa langsung di ikuti langkah pemasangannya ...

• masuk dashboard
• klik edit HTML > back up template unuk berjaga-jaga
• cari kode ]]></b:skin> (tekan CTRL + F untuk memudahkan pencarian)
• paste kode di bawah ini tepat di ATAS kode ]]></b:skin>

#arrowunderline-labstrike {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    font: normal 15px Georgia;
}
#arrowunderline-labstrike li {
    display: inline;
    margin-right: 20px;
}
#arrowunderline-labstrike li a {
    position: relative;
    color: black;
    padding-bottom: 8px;
    text-decoration: none;
}
#arrowunderline-labstrike li a:hover {
    border-bottom: 3px solid #990012;
}
#arrowunderline-labstrike li a:hover:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    bottom: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #990012 transparent;
}
- See more at: http://chenkho.blogspot.com

CUSTOM
hapus       untuk menghilangkan efek garis bawah
ganti        untuk mengganti warna garis bawah

• klik simpan template
• lalu klik menu TATA LETAK > tambah gadget
• pilih HTML/javascript
• masukan kode di bawah ini

<div id="arrowunderline-labstrike"><ul>
<li><a href="#"><span>Menu Title 1</span></a></li>
<li><a href="#"><span>Menu Title 2</span></a></li>
<li><a href="#"><span>Menu Title 3</span></a></li>
<li><a href="#"><span>Menu Title 4</span></a></li>
<li><a href="#"><span>Menu Title 5</span></a></li>
<li><a href="#"><span>Menu Title 6</span></a></li>
</ul></div>
- See more at: http://chenkho.blogspot.com

• klik simpan

KETERANGAN 
ganti       dengan link tujuan
ganti       dengan judul yang akan tampil pada menu