Cara Membuat Tampilan Label Keren Di Blog

CARA MEMBUAT TAMPILAN LABEL KEREN MENGGUNAKAN CSS3

Ingin membuat label keren seperti diblog Kopanela nah saya akan membagikan caranya yaitu 

1. Login ke akun Blog sobat
2. Pilih Tab Template dan pilih Edit HTML
3. Cari kode ]]></b:skin> dengan cara tekan tombol Ctrl+F untuk memudahkan pencarian
4. Setelah ketemu kode yang di cetak tebal diatas letakkan kode dibawah ini tepas diatas kode yang saya cetak tebal diatas. 

.awesome, .awesome:visited {
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwIEJtOjVyL6yDVkdFto9U9P-XunFHYzSyvedDHyGbWuZ88OUoV11NMtQLuHQL3K4xFW5-PDktVaxbfvPcoZj3aNpTJECyJcR7tQZPW63yQnA9s4XAnDBewaecI9QGmqbvwQqpMnx541g/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; }

 Selanjutnya simpan template blog atau untuk cari aman pratinjau dahulu ya sobat.

• Nah sekarang saatnya untuk membuat tombolnya dengan cara 

1. Masuk ke tab Tata Letak
2. Pilih tambah gadget-HTML/JavaScript
3. lalu letakan kode berikut di gadget HTML/JavaScript 

UKURANG BESAR 

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

UKURAN SEDANG

<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> 

UKURAN KECIL

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

Ganti kata LINK dengan link label yang di inginkan dan ganti kata LINK NAME dengan kata yang di inginkan juga. Jika sobat masih ada yang kurang jelas silahkan komentar di postingan ini.

Jangan lupa tambah/follow G+ nya ya ada di kolom footer blog ini :D

Thanks for reading & sharing Kopanela Network