KeyzeX – Banyak cara untuk mendesain blog atau mendesain postingan agar terlihat menarik dan banyak diminati oleh pengunjung. Button Click ini sangat membantu sekali jika ingin membuat suatu artikel yang mengharuskan DEMO karena dengan Button Click ini juga bisa untuk mempercantik suatu artikel. Button Click ini juga memiliki berbagai warna dan berbagai bentu yang siap pakai.
Ini contohnya , Blue Button Big Size.
Blue Button
Button Click atau Tombol ini memiliki beragam warna dan ukuran yang siap untuk menghiasi Postingan pada blogger agan. Ada tiga ukuran dalam Button Click ini , ukuran-ukuran tersebut Big Size Buttons , Medium Size Button , dan Small Size Button. Dan juga , Button ini memiliki 5 warna yang menarik warna tersebut di antaranya Biru , Hijau , Merah , Ungu , Dan Green Sea.
Berikut adalah cara untuk Membuat Button Click atau Tombol pada Postingan Blogger :
-
- Pastikan agan sudah login di blogger.com
- Selanjutnya agan klik menu Template > Backup terlebih dahulu template anda jika ada kesalahan pada saat pemasangan Button Click. ( Baca : Cara Backup Template Blogger )
- Jika Sudah tinggal Edit HTML , lalu cari kode </head> ( Gunakan F3 atau CTRL + F untuk memudahkan pencarian )
- Pastekan kode di bawah ini di atas </head>
<!-- Flat UI Buttons By Www.BloggerYard.Com 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>
<!-- Flat UI Buttons By Www.BloggerYard.Com End -->
- Lalu Klik Simpan Template
Untuk pemasangan Button Click sudah selesai. Tapi kenapa pada postingan tidak ada Button Click ini? bagaimana cara agar Button Click ini muncul? Sabar tidak usah panik , karna di bawah ini saya akan membagikan cara memanggil atau memasang Button Click pada postingan agar lebih indah.
Berikut adalah cara untuk memanggil Button Click agar muncul pada Postingan :
-
- Pastikan sudah login terlebih dahulu pada Blogger.com
- Pada bagian Menu pilih Menu Pos lalu pilih Artikel atau Postingan yang ingin agan gunakan untuk memasang Button Click lalu klik Edit pada bagian bawah Judul Postingan.
- Jika sudah klik Edit maka masuk ke bagian HTML pada Postingan di samping kiri , sebelah kanan Compose. Dan Pastekan kode berikut pada HTML Tab.
Big Size Button
<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>
Medium Size Buttons
<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>
Small Size Buttons
<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>
- Lalu Klik Publikasikan dan langkah selanjutnya check postingan tersebut.
Catatan :
- # ganti dengan URL yang ingin dituju
- Ganti TEXT yang berwarna sesuai dengan kebutuhan atau yang ingin agan sampaikan dalam Artikel