Cara Membuat Menu Horizontal V.2 | Visit Me

Untuk melihat hasil dari Ribbon Menu Horizontal Dengan CSS ini silahkan klik tombol demonya di bawah ini 

Live Demo

Bagaimana apakah kamu tertarik untuk membuat dan memasang Membuat Ribbon Menu Horizontal ini?

Kalau kamu tertarik untuk memasang, silahkan ikuti tutorial Membuat Ribbon Menu Horizontal Dengan CSS berikut ini :

1.        Login ke Blogger

2.        Pilih Template > Edit HTML > Proses

3.        Cari kode ]]></b:skin>

4.        Copy kode script di bawah ini dan pastekan tepat di atas kode ]]></b:skin>

.ribbon {
display:inline-block;
}
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #01978C;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.ribbon span {
background:#01978C;
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 #01978C;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #01978C;
}

5.        Simpan template sobat

6.        Kemudian pilih tab Layout > Add Gadget > HTML/Javacsript

7    Copy kode script di bawah ini dan pastekan ke dalam gadget

<div class='ribbon'>
<a href='http://www.tutorial-4u.com/'><span>Home</span></a>
<a href='http://www.tutorial-4u.com/search/label/Software?&max-results=5'><span>Software</span></a>
<a href='http://www.tutorial-4u.com/search/label/Blogger%20Templates?&max-results=5'><span>Template</span></a>
<a href='http://www.tutorial-4u.com/search/label/Tutorial%20Blogger?&max-results=5'><span>Tutorial</span></a>
<a href='http://www.tutorial-4u.com/search/label/Free%20Download?&max-results=5'><span>Download</span></a>
<a href='http://www.tutorial-4u.com/p/kontak-admin.html'><span>Contact</span></a>
</div>

8.    Simpan gadget sobat dan lihat hasilnya


Selesai sudah tutorial Membuat Ribbon Menu Horizontal Dengan CSS,
selamat mencoba, semoga bermanfaat