Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Menu Horisontal Ribbon Style CSS3 di Blog

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).
Menu Horisontal di Blog
.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.

Berlangganan artikel via email

16 Response to "Membuat Menu Horisontal Ribbon Style CSS3 di Blog"

copas ajah deh mas , gak ngerti css soalnyaa , hehehe ..

Balas

keren juga yah klw di kasih menu kyk ini. makin berwarna :D

Balas

mantaaabpp gan,,ijin untuk mencoba,,terimakasih,,

Balas
avatar
Anonymous

Mas rizky.. saya coba aplikasikan ke template blog saya kenapa koq tdk bisa [untuk fungsi css tombol terapkan nya tdk bisa di fungsikan, namun tapi jika untuk merubah mis: ganti font, warna dll bisa], saya pikir template saya bermasalah.. kemudian saya coba template bawaan blogspot juga tdk bisa. Kenapa ya mas kira-kira...

Balas

keren euiii....oh ya mas...menu ini support buat semua template ya :)

Balas

belum sarapan kali mas bayu...ngutak atik kodenya...
#nyarap dulu atuh mas...wkwk :D

Balas

Makasih kode dan tutorialnya sob :D
Untuk sementara saya simpan dulu hehe :)

Balas

Selamat Malanm Sobat,...

Izin berkunjung ya sobat,....

Jangan lupa berkunjung juga ke blog sederhana saya..

Balas

udah saya coba 100% work kok mas, demonya bisa dilihat di http://testerfaceblog.blogspot.com/

itu juga template bawaan blogspot, untuk css taruhnya gak harus lewat klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).

tapi lewat edit HTML taruh kode css di atas kode ]]></b:skin> juga bisa mas. silahkan dicoba kembali :)

Balas

kalo untuk template blog masih support mas, tapi kalo untuk template Ms Office ato untuk template Coreldraw ya gak bisa :D
hhaa..

Balas

pa bedanya CSS3 sama yg terdahulu??? mf nih ane kurang fhm soal CSS, thank u ya udh share

Balas

aku coba di templateku,
jd a menu kek tangga gtu bray, ga lurus ke samping..
knapa ea..
http://ashprincesskawaii.blogspot.com/

Balas

aku coba di templateku,
jd a menu kek tangga gtu bray, ga lurus ke samping..
knapa ea..
http://ashprincesskawaii.blogspot.com/

Balas

ganti warna nya dimana mas?

Balas

terimakasih... membantu.. :)

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Menu Horisontal Ribbon Style CSS3 di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode