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
Buttons Ukuran Sedang
Buttons Ukuran Besar
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
- Mari menuju Ke Blogger >> Template >> Backup Template Anda
- Klik Edit HTML dan cari kata kunci </ head> pada blog tentunya
- 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.
- kembali menuju blogger anda namun kali ini pilih menu membuat post baru
- kemudian klik HTML tab (bukan Compose)
- Pilih salah satu kode yang ingin anda gunakan di bawah ini :
Buttons 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>
Buttons 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>
Buttons 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>
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
Hasilnya silahkan lihat disini : http://chekmad.blogspot.com/p/typografi.html