Membuat Tombol 8 Warna Berisi Link Pilihan

Button Collors

Salam Blogger!

Sambil menunggu hujan berhenti Bang Kamplenk akan mengshare bagaimana cara Membuat Tombol Persegi Berisi Link berwarna warni seperti Pelangi, Bila Sobat ingin mencobanya silahkan ikuti panduannya dibawah ini : D E M O

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> lalu Copast kode dibawah ini sebelum Kode tersebut.

.awesome, .awesome:visited {
    background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9fpxjH8iCqg6XvDfxgIwIt1h_9mZ6SYG9JPIueYB3JQQEXj_UQH9AW1cReng20VxafhDNKJPSnyEgKNlsIoG27C8SdlRdedDN0VdqhgCDOJCuDwu_Lalkem8pwtyX1WOsxOeWYS_tL9I/s1600/alert-overlay.png) repeat-x; 
    display: inline-block; 
    padding: 5px 10px 6px; 
    color: #fff; 
    text-decoration: none;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
        border-radius:5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
font-family:Calibri, Arial, sans-serif;
}

    .awesome:hover                            { background-color: #111; color: #fff; }
    .awesome:active                            { top: 1px; }
    .small.awesome, .small.awesome:visited             { font-size: 18px; padding: ; }
    .awesome, .awesome:visited,
    .medium.awesome, .medium.awesome:visited         { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
    .large.awesome, .large.awesome:visited             { font-size: 30px; padding: 8px 14px 9px; }
    
    .green.awesome, .green.awesome:visited        { background-color: #91bd09; }
    .green.awesome:hover                        { background-color: #749a02; }
    .blue.awesome, .blue.awesome:visited        { background-color: #2daebf; }
    .blue.awesome:hover                            { background-color: #007d9a; }
    .red.awesome, .red.awesome:visited            { background-color: #e33100; }
    .red.awesome:hover                            { background-color: #872300; }
    .magenta.awesome, .magenta.awesome:visited        { background-color: #a9014b; }
    .magenta.awesome:hover                            { background-color: #630030; }
    .orange.awesome, .orange.awesome:visited        { background-color: #ff5c00; }
    .orange.awesome:hover                            { background-color: #d45500; }
    .yellow.awesome, .yellow.awesome:visited        { background-color: #ffb515; }
    .yellow.awesome:hover                            { background-color: #fc9200; }

    .pink.awesome, .pink.awesome:visited        { background-color: #e22092; }
    .pink.awesome:hover                            { background-color: #c81e82; }

C O D E

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

<a href="LINK" class="medium awesome">LINK NAME</a>
<a href="LINK" class="medium blue awesome">LINK NAME</a>
<a href="LINK" class="medium pink awesome">LINK NAME</a>
<a href="LINK" class="medium magenta awesome">LINK NAME</a>
<a href="LINK" class="medium green awesome">LINK NAME</a>
<a href="LINK" class="medium red awesome">LINK NAME</a>
<a href="LINK" class="medium orange awesome">LINK NAME</a>
<a href="LINK" class="medium yellow awesome">LINK NAME</a>

C O D E

Ukuran : large,medium,small 

Semoga Bermanfaat