-->

Notification

×

Kategori Berita

Cari Berita

Iklan

Iklan

Indeks Berita

Tag Terpopuler

Bagaimana Cara Membuat Tombol Button Unik dan Menarik Pada Blog ?

13 Sep 2014 | September 13, 2014 WIB | 0 Views Last Updated 2014-09-13T07:45:18Z
Tombol Button (red : Tombol tekan), akan menarik rasanya bila blog anda berwarna warni dengan pernak pernik yang bisa membuat betah pembaca berkunjung di blog anda. pernak pernik yang indah bukan berarti harus menambahkan aneka widget di template anda, namun anda bisa memperindah blog anda dengan tombol yang unik untuk memberikan link di halaman maupun di page blog anda

Berikut di bawah ini chekmad akan mengajak anda untuk mengetahui bagaimana membuat dan menggunakan Button Unik pada blog anda seperti yang di gunakan blog chekmad ini.

Langkah 1 
  1. Mari menuju Ke Blogger >> Template >> Backup Template Anda
  2. Klik Edit HTML dan cari kata kunci </ head> pada blog tentunya
  3. Paste kode  Berikut di atas </ head>

<!-- chekmad Buttons Start -->
<link href="http://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>
<!-- chekmad Buttons End -->
Silahkan simpan bila sudah di pastekan dan lanjut ke langkah 2

Langkah 2
Langkah 2 akan membahas bagaimana cara menggunakan tombol button tersebut.
  1. kembali menuju blogger anda namun kali ini pilih menu membuat post baru 
  2. kemudian klik HTML tab (bukan Compose)
  3. Pilih salah satu kode yang ingin anda gunakan di bawah ini :

Buttons Ukuran Kecil
  1. <a class="button blue small" href="#">Blue Button</a>
  2. <a class="button green small" href="#">Green Button</a>
  3. <a class="button red small" href="#">Red Button</a>
  4. <a class="button purple small" href="#">Purple Button</a>
  5. <a class="button seagreen small" href="#">SeaGreen </a>

Buttons Ukuran Sedang
  1. <a class="button blue medium" href="#">Blue Button</a>
  2. <a class="button green medium" href="#">Green Button</a>
  3. <a class="button red medium" href="#">Red Button</a>
  4. <a class="button purple medium" href="#">Purple Button</a>
  5. <a class="button seagreen medium" href="#">SeaGreen</a>

Buttons Ukuran Besar
  1. <a class="button blue big" href="#">Blue Button</a>
  2. <a class="button green big" href="#">Green Button</a>
  3. <a class="button red big" href="#">Red Button</a>
  4. <a class="button purple big" href="#">Purple Button</a>
  5. <a class="button seagreen big" href="#">SeaGreen </a>

Mudahkan ? Silahkan anda berkreasi dengan kode tersebut di atas dan mengganti bila warna yang di sajikan tidak menarik buat anda.

Hasilnya silahkan lihat disini : http://chekmad.blogspot.com/p/typografi.html
×
Berita Terbaru Update