Menu navigasi saya rasa cukup keren dan memiliki effect hover pada setiap menunya, Menu navigasi ini sangat mudah dipratekan, sebelum tutorialnya silakan lihat dulu demonya diatas, kalau sobat ingin membuatnya seperti tutorialnya dibawah ini :
Cara Membuat Menu Navigasi Dengan Effect Hover Di Blog
--------------------------------------------------------------------------------------
- Masuk ke Blogger
- Klik Menu ''Template''
- Setelah itu, Klik ''Edit HTML''
- Cari kode ]]></b:skin Setelah ketemu, taruhlah kode dibawah ini di atas kode tersebut
/* The CSS Code */
.ribbon span {
background:#A81B6A;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border: 1.5em solid #A81B6A;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
CARA PEMASANGANYA :
- Pergi Ke ''Tata Letak''
- Klik ''Tambah Gadget''
- Pilih Gadget ''HTML/JavaScript''
- Kemudian, Taruhlah Kode dibawah ini di dalamnya
<div class='ribbon'>
<a href='#'><span>Home</span></a>
<a href='#'><span>Download</span></a>
<a href='#'><span>Css3</span></a>
<a href='#'><span>HTML</span></a>
<a href='#'><span>MySQL</span></a>
<a href='#'><span>Services</span></a>
<a href='#'><span>Contact</span></a>
</div>
- Ganti # dengan link yang ingin dituju
- Setelah semua diganti sesuai kemauan sobat, Silakan klik Simpan
Dan Demikianlah artikel ini yang berjudul ''
Cara Membuat Menu Navigasi Dengan Effect Hover Di Blog'' semoga artikel ini bermanfaat bagi sobat semua dan mudah dipratekkan dan bagi sobat yang masih bingung silakan beri pertanyaannya di kolomm komentar dibawah ini,
Terima Kasih....
Via :
Blogger Trix
