468x60 Ads

Navigation Bar Underline Efek Hover untuk Blogger

Unknown | 19:59 | , ,
Ini adalah Navigation Bar Underline Efek Hover untuk Blogger. Dalam tutorial ini Saya akan menjelaskan, bagaimana untuk menambahkannya ke blogger. Menu ini bekerja dengan baik dengan setiap browsers.You internet modern dapat menghubungkan dengan halaman utama Anda dengan menggunakan navigasi bar ini. Saya menggunakan CSS3 dan HTML. Silakan simak Tutorial dibawah


All Widget Menu

  1. Pergi ke blogger > Template
  2. Backup template Anda
  3. Klik Edit HTML
  4. Cari Kode </ b: skin>. Klik tanda panah hitam untuk memperluas kode.
/* The CSS Code for the menu starts here Tempat Blogging */

#arrowunderlineTblogging{
list-style-type:none;
margin:0;
padding:0;
text-align:center;
font: bold 16px Georgia;
}
#arrowunderlineTblogging li{
display:inline;
margin-right:25px;
}
#arrowunderlineTblogging li a{
position:relative;
color:black;
padding-bottom:8px;
text-decoration:none;
}
#arrowunderlineTblogging li a:hover{
border-bottom:3px solid #25bd0d;
}
#arrowunderlineTblogging 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 #25bd0d transparent;
}
  5. Pergi ke blogger dan klik Layout
  6. Klik Tambah Gadget dan pilih 'HTML / Javascript
  7. Paste kode di bawah ini.

<div id="arrowunderlineTblogging">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="http://mas-basir.blogspot.com/"><span>Contact Us</span></a></li>
</ul>
</div>
Ganti # dengan link Anda.

  8. Sekarang menyimpan HTML / Javascript '.

Sekian Dulu Postingan kali ini yang membahas tentang Navigation Bar Underline Efek Hover untuk Blogger. Semoga Artikel ini bermanfaat bagi Anda.

0 Kommentare:

Kommentar veröffentlichen