Cara Membuat Widget Button Download Dan Demo Keren Di Blog

Cara Membuat Widget Button Download Dan Demo Keren Di Blog






Hy Semua. Kali ini aku akan memberikan sebuah tutorial. nah tutorial kali ini adalah bagaimana cara membuat button keren seperti gambar diatas. sebenarnya apa sih kegunaan button tersebut? button berguna agar website/blog tetap rapi. rapi yang dimaksud ialah. jika kalian sering membuat sebuah demo/download agar lebih rapi ditambahkan button atau hanya ingin mempercantik postingan artikel. nah kegunaan button beragam sebetulnya.akan tetapi yang aku hanya mengetahui beberapa saja. hehe maklum masih newbie :). dan kali ini aku akan memberikan tutorial dibawah ini. bagaimanakah caranya? simak tutorialnya baik - baik.

Step By Step

  • Buka blog kalian Disini.
  • Pergi Ke "Tema".
  • Dan Pilih "Edit Html".
  • Sekarang Carilah "]]></b:skin>".
  • Copas code dibawah ini dan tempatkan diatas code "]]></b:skin>".


body{
 padding: 50px;
}
.animate{
 transition: all 0.1s;
 -webkit-transition: all 0.1s;
}
.action-button{
 position: relative;
 padding: 10px 40px;
 margin: 0px 10px 10px 0px;
 float: left;
 border-radius: 8px;
 font-family: 'Allerta', cursive;
 font-size: 25px;
 color:#fff;
 text-decoration:none;

}
.blue.link {
color:#fff;
text-decoration:underline;
}
.blue:hover {
color:#fff;
text-decoration : underline;
}
.blue:visited {
color:#fff;
text-decoration : underline;
}
.blue{
 background-color: #3498DB;
 border-bottom: 5px solid #2980B9;
 text-shadow: 0px -2px;
}
.red.link {
color:#fff;
text-decoration:underline;
}
.red:hover {
color:#fff;
text-decoration : underline;
}
.red:visited {
color:#fff;
text-decoration : underline;
}
.red{
 background-color: #E74C3C;
 border-bottom: 5px solid #BD3E31;
 text-shadow: 0px -2px #fff;
}
.green.link {
color:#fff;
}
.green:hover {
color:#fff;
}
.green:visited {
color:#fff;
}
.green {
 background-color: #82BF56;
 border-bottom: 5px solid #669644;
 text-shadow: 0px -2px ;
}
.yellow.link {
color:#fff;
text-decoration:underline;
}
.yellow:hover {
color:#fff;
text-decoration : underline;
}
.yellow:visited {
color:#fff;
text-decoration : underline;
}
.yellow {
 background-color: #F2CF66;
 border-bottom: 5px solid #D1B358;
 text-shadow: 0px -2px ;

}
.action-button:active {
 transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
 border-bottom: 1px solid;

6. Copy Kode Dibawah ini dan pastekan tepat diatas kode "</style>"


<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/></link>
<link href='css/core.css' rel='stylesheet'/></link>


  • Dan yang terakhir yaitu copy dan pastekan kode ini pada postingan blog yang ingin di berikan button. tempatkan pada "Html" Bukan "Compose". dan ganti url tersebut dengan url yang ingin kalian isi.


<a class="action-button animate blue" href="http://putuokaken.com" style="text-decoration:none">Free Download</a>
  <a class="action-button animate red" href="http://putuokaken.com" style="text-decoration:none">Apps</a>
  <a class="action-button animate green" href="http://putuokaken.com" style="text-decoration:none">Demo</a>
  <a class="action-button animate yellow" href="http://putuokane.com"style="text-decoration:none">Visit</a>


Bagaimana Mudah Bukan?. jika kalian masih tidak mengerti cara pemasangan Button ini. kalian dapat berkomentar dibawah ini....