Cara Membuat Button Yang Indah dan Menarik Pada Postingan Blog
Minggu, 11 Maret 2018
Assalamu'alaikum Wr.Wb.
Pada kali ini saya Romadhan, akan memberikan sedikit tutorial mengenai caranya agar button pada postingan sebuah blog itu menarik. Caranya cukup mudah, jika kalian ingin mengikutinya dengan baik silahkan simak beberapa step by stepnya. Langsung aja daripada basa - basi gajelas, kita mulai tutorialnya.
Tutorial :
1. Pertama - tama login ke akun google kalian. Lalu masuk ke blog kalian. Jika kalian belum punya blog lebih baik buat terlebih dahulu dan pelajari dasar - dasarnya.
2. Setelah sudah di blog. Anda masuk ke bagian Template atau Tema.
3. Lalu klik button "Edit HTML".
4. Setelah sudah masukan script berikut di antara kode seperti ini "<head> Scriptnya </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 -->
6. Lalu anda tinggal masukan potongan code berikut di postingan blog kalian sesuaikan dengan warna yang ingin kalian pilih saja yang dicopy, tapi jangan lupa masuk ke mode "HTML" bukan mode "Compose".
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>
7. Demikian tutorial dari saya, kurang lebihnya mohon maaf.