Ide@Pelajar

Cara Membuat Tombol Sederhana Tapi Keren Pada Blog Dengan Button Click

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

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

• 1. Selanjutnya agan klik menu Template > Backup terlebih dahulu template anda jika ada kesalahan pada saat pemasangan Button Click.                                                                                      
• 2. Jika Sudah tinggal Edit HTML , lalu cari kode </head> ( Gunakan F3 atau CTRL + F untuk memudahkan pencarian )
• 3. 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 -->

• 4. Lalu Klik Simpan Template

• 5. Panggil atau pasang Button Click pada postingan dengan cara  :
• Masuk ke postingan
• Pilih mode Tampilan HTML (bagian atas tampilan menulis/compose). Dan Pastekan kode berikut :

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
• Contoh penerapan pada Tombol Link Order WhatsApp

<div style="text-align: center;"><a class="button seagreen small" href="https://api.whatsapp.com/send?phone=6281329XXXXXX&amp;text= %0AAssalamu'alaikum.%20Halo%20Admin" target="_blank"><b>ORDER SEKARANG</b></a></div>