Membuat Menu Horisontal Ribbon Style CSS3 di Blog

Membuat Menu Horisontal Ribbon Style CSS3 di Blog – seperti yang terlihat pada gambar, menu horisontal ini memang cukup sederhana.

Menu yang hanya berbentuk seperti pita dan memilki hover yang agak berbeda dari menu lain membuat menu ini mungkin terkesan lebih minimalis dan hanya terbentuk dari susunan kode CSS murni atau tanpa melibatkan jQuery. Apabila menu horisontal ini sudah terpasang di blog namun warna yang kurang sesuai dengan template blog juga masih bisa diatur kembali dengan merubah warna pada kode CSS yang berada pada bagian background maupun hover. Warna default yang sudah terpasang pada adalah gradient linear warna hijau dan hitam sedangkan saat hover menampilkan warna hitam dan biru. Pada bagian samping sudah tersetting secara default yaitu warna hitam, dan apabila ingin dirubah maka bisa menggantinya pada bagian border after dan border before yang terdapat didalam kode CSS. Untuk cara pemasangannya, maka berikut adalah tutorial cara Membuat Menu Horisontal Ribbon Style CSS3 di Blog:

1. Login ke akun blogger.
2. Copy kode dibawah ini, lalu pada dashboard blog anda klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).

.ribbon span {
background:-moz-linear-gradient(top, #00ff00 1%, #000 50%);
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;
-moz-transition: background-color 0.2s, margin-top 0.2s;
-ms-transition: background-color 0.2s, margin-top 0.2s;
-o-transition: background-color 0.2s, margin-top 0.2s;
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background:-moz-linear-gradient(top, #000 1%, #00f 50%);
margin-top:0; 
}

.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #7f7fff;
border-bottom:0.5em solid #000;
}

.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #7f7fff;
border-bottom:0.5em solid #000;
}
.ribbon a:link, .ribbon a:visited {
color:#fff;
font: bold 16px verdana;
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 #000;
}
.ribbon:after {
border-right-color:transparent;
}

.ribbon:before {
border-left-color:transparent;
}

3. Klik Terapkan ke Blog.

Selanjutnya untuk memanggil dan menampilkan Menu Horisontal Ribbon Style CSS3 di Blog caranya copy kode dibawah ini, kemudian klik Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode ini didalamnya:

<div class='ribbon'>
<a href='#'><span>Home</span></a>
<a href='#'><span>About Me</span></a>
<a href='#'><span>Contact Me</span></a>
<a href='#'><span>jQuery</span></a>
<a href='#'><span>Teknik SEO</span></a>
<a href='#'><span>Tutorial CSS</span></a>
<a href='#'><span>Blogging</span></a>
</div>

Keterangan:
Silahkan ubah tanda # yang berwarna merah dengan URL tujuan.
Silahkan ubah tulisan yang berwarna biru dengan judul menu.

Langkah terakhir klik Save, maka selesai sudah dan silahkan bisa di lihat hasilnya dari cara Membuat Menu Horisontal Ribbon Style CSS3 di Blog.