Pada Tutorial Blogger kali ini saya akan mengajarkan Sobat cara membuat Ribbon Menu With CSS3 dihalaman Blog atau Website Sobat Semua dan apa itu Ribbon Menu? Oke Saya jelaskan sedikit, Ribbon Menu adalah Sebuah Menu navigasi yang berbentuk atau menyerupai sebuah Pita dan pembentukannya tidak menggunakan gambar atau image dan hanya menggunakan Kode CSS3 sehingga membuat Ribbon Menu ini sangatlah Efisien dan ringan untuk digunakan.
Silahkan Simak Dibawah ini untuk Cara Membuatnya.
Silahkan Simak Dibawah ini untuk Cara Membuatnya.
- Pertama Silahkan Sobat Masuk atau Login Ke Akun Blogger.
- Masuklah Pada Rancanga => Edit HTML dan Beri Centang pada Expand Template Widget.
- Cari Kode ]]></b:skin> pada Kode HTML Tempalte Sobat.
- Bila Sudah ketemu silahkan taruh semua kode berikut tepat diatasnya.
.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;
}
- Selanjutnya Cari Kode <body> dan letakkan Kode Berikut Dibawahnya.
<div class='ribbon'>
<a href='#'><span>Home</span></a>
<a href='#'><span>Software</span></a>
<a href='#'><span>Game</span></a>
<a href='#'><span>Tutorial</span></a>
<a href='#' ><span>About</span></a>
<a href='#'><span>Contact</span></a>
</div>
- Keterangan:
- Kode yang pagar adalah Link/URL dari menu tersebut.
- Kode yang ada nama adalah Nama atau Judul dari Menu tersebut.
- Sekarang Simpan Template Sobat dan Lihat Hasilnya.
