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 

<span class="excitinground"><a class="red" href="http://www.YOUR-LINK-HERE.com/">Your Text</a></span>

<span class="excitinground"><a class="orange" href="http://www.YOUR-LINK-HERE.com/">Your Text</a></span>

<span class="excitinground"><a class="green" href="http://www.YOUR-LINK-HERE.com/">Your Text</a></span>

<span class="excitinground"><a class="blue" href="http://www.YOUR-LINK-HERE.com/">Your Text</a></span>

<span class="excitinground"><a class="gray" href="http://www.YOUR-LINK-HERE.com/">Your Text</a></span>

<span class="excitinground"><a class="dark" href="http://www.YOUR-LINK-HERE.com/">Your Text</a></span>

C O D E

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

Semoga Bermanfaat.