Cara Membuat Widget Button Download Dan Demo Keren Di Blog - Nandea96
Artikel Terbaru
Loading...

Monday, 8 July 2019

Cara Membuat Widget Button Download Dan Demo Keren Di Blog






Hy Semua. Kali ini Dea 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 Dea hanya mengetahui beberapa saja. hehe maklum masih newbie :). dan kali ini Dea 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://Nandea96.com" style="text-decoration:none">Free Download</a>
  <a class="action-button animate red" href="http://Nandea96.com" style="text-decoration:none">Apps</a>
  <a class="action-button animate green" href="http://Nandea96.com" style="text-decoration:none">Demo</a>
  <a class="action-button animate yellow" href="http://Nandea96.com"style="text-decoration:none">Visit</a>


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


Share with your friends

Give us your opinion

Selamat Datang Di Website Nandea96
Mohon untuk selalu mencuci tangan dengan air bersih serta sabun setiap 15 menit sekali agar terhindar dari covid-19 dan penyakit lainnya seperti diare. selalu gunakan masker ketika berpergian kemanapun 😷. meskipun itu hanya berbelanja sekitar 0.1 km atau ke tetangga. hindari kontak fisik dan beri jarak sekitar 2 meter dari jarak tempat kita berdiri dengan seseorang agar tidak memunculkan klaster baru yang tidak di-inginkan.

-Terimakasih 🙏-
Done