Membuat Menu Button Pelangi

Button Pelangi
Salam Blogger!
Sesuai dengan janji saya yang terdahulu tentang bagaimana cara Membuat "Menu Button Pelangi" maka pada kesempatan ini saya akan memberikan panduan bagiamana cara membuatnya, kelebiahn fitur ini yaitu :
A. Tersedia dari berbagai warna
B. Memiliki Efek Hover
C. Mengunakan CSS versi Terbaru (CSS 3)
D. Tidak Memberatkan Loading Blog
E. Tampilan yang menarik, Stylish dll.

Langsung saja kita lihat panduan nya dibawah ini :
1. Login ke Blogger

2. Pilih Rancangan-Edit HTML

3. Centang (√) Expand Template Widget.

Jangan lupa Save dahulu tamplate anda - untuk jaga-jaga.

4. Kalau sudah, Anda cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

/* Exciting Round Buttons By YOURPCGENIE.NET*/ .excitinground{ background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; } .excitinground a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); } .excitinground a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); } .excitinground a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); } .excitinground a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); } .excitinground a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); } .excitinground a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); } .excitinground a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); } .excitinground a:hover, .excitinground:hover { color: #fff; opacity: .7 }
RIEFSAZ

Kemudian :
1.Klik Tata Letak.
2.Klik Elemen Halaman.
3.Klik Tambah Gadget.
4.Kemudian Pilih HTML/Javascript.
5. Copy paste kode dibawah ini

<a class="red" href="http://www.YOUR-LINK-HERE.com/">Your Text</a> <a class="orange" href="http://www.YOUR-LINK-HERE.com/">Your Text</a> <a class="green" href="http://www.YOUR-LINK-HERE.com/">Your Text</a> <a class="blue" href="http://www.YOUR-LINK-HERE.com/">Your Text</a> <a class="gray" href="http://www.YOUR-LINK-HERE.com/">Your Text</a> <a class="dark" href="http://www.YOUR-LINK-HERE.com/">Your Text</a>

C O D E

Bagimana mudah bukan, bila belum mengerti sobat bisa meninggalkan jejak dibawah ini.

Semoga Bermanfaat.

Anda baru saja membaca artikel tentang - Membuat Menu Button Pelangi . Silahkan baca artikel berikutnya Tentang - - Jangan lupa g+1 / fb / twit :)