Modifikasi Button di Blogspot

Banyak beredar di internet jenis-jenis button yang menariknya button yang telah beredar tersebut memiliki bentuk yang telah dimodifikasi oleh pembuatnya dan yang saya share kali ini adalah salah satu dari sekian banyak button tersebut. Berikut langkah-langkahnya :

DEMO

Login di dashboard anda kemudian klik template dilanjutkan dengan edit HTML jika selesai silahkan temukan kode </head>  lalu copy dan pastekan kode dibawah ini tepat diatas  </head>  

<!-- Flat UI Buttons By Www.InfoAlya.Com Start -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,
600,700,800" rel="stylesheet" type="text/css"></link>
<style type="text/css">
.button {color:white!important; font-family:open sans; margin:10px 10px 
10px 0;text-decoration:none!important; font-weight:700;border-radius:5px;
-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;
-oborder-radius:5px; transition:all .4s;-webkit-transition:all .4s;-moz-transition:
all .4s;-ms-transition:all .4s;-o-transition:all .4s;}
.blue {background: #3498db;border-bottom: 3px solid #226693;}
.blue:hover {background:#2980b9;}
.green {background: #2ecc71;border-bottom: 3px solid #1F8C4C;}
.green:hover {background: #27ae60;}
.red {background: #e74c3c;border-bottom: 3px solid #922C20;}
.red:hover {background:#c0392b;}
.purple {background: #9b59b6; border-bottom: 3px solid #74398E;}
.purple:hover {background:#8e44ad;}
.seagreen {background: #1abc9c;border-bottom: 3px solid #127F69;}
.seagreen:hover {background: #16a085;}
.big {font-size:18px; padding:15px 20px;}
.medium {font-size:15px; padding: 10px 15px;}
.small {font-size:12px; padding:8px 10px;}
</style>
<!-- Flat UI Buttons By Www.InfoAlya.Com End -->

Jika selesai simpan template.

Untuk penggunaan pada postingan gunakan kode dibawah ini :

Button Ukuran Besar

<a class="button blue big" href="#">Blue Button</a>
<a class="button green big" href="#">Green Button</a>
<a class="button red big" href="#">Red Button</a>
<a class="button purple big" href="#">Purple Button</a>
<a class="button seagreen big" href="#">SeaGreen </a>

Button Ukuran Sedang

<a class="button blue medium" href="#">Blue Button</a>
<a class="button green medium" href="#">Green Button</a>
<a class="button red medium" href="#">Red Button</a>
<a class="button purple medium" href="#">Purple Button</a>
<a class="button seagreen medium" href="#">SeaGreen</a>

Button Ukuran Kecil

<a class="button blue small" href="#">Blue Button</a>
<a class="button green small" href="#">Green Button</a>
<a class="button red small" href="#">Red Button</a>
<a class="button purple small" href="#">Purple Button</a>
<a class="button seagreen small" href="#">SeaGreen </a>

Special thank's : _www.bloggeryard.Com

Selamat mencoba, semoga berhasil.