Cara Membuat Tombol Download Keren dan Ringan di Blogger

Halo sobat Gimenz Network, jumpa lagi dengan saya di blog sederhana ini, bagaimana kabar sobat semua? Semoga baik - baik saja ya. Pada postingan kali ini saya akan berbagi tutorial membuat Button download / tombol download di blog, button download ini sebenarnya berasal dari Wordpress, yaitu MaxButton Plugin.

Jika sobat blogger atau memiliki blog yang menggunakan wordpress mungkin sudah tau tentang plugin ini. Tetapi kali ini saya akan membagikan Cara Membuat Tombol Download Keren dan Ringan yang bisa digunakan di blogspot atau Blogger.

Tutorial ini sangat mudah untuk di terapkan. Simak tutorial Cara Membuat Tombol Download Keren dan Ringan di Blogger di bawah ini.

Cara Membuat Tombol Download Keren dan Ringan di Blogger

1. Seperti biasa, sobat buka Dasbor Blogger terlebih dahulu.
2. Kemudian masuk ke bagian Tema => Edit HTML.
3. lalu sobat cari ]]></b:skin> 
4. Silahkan sobat copy kode css maxbutton di bawah ini. </ br>

   
   /* Maxbutton For Blogger */
   .maxbutton {
     position: relative;
     text-decoration: none;
     display: inline-block;
     vertical-align: middle;
     border-color: #505ac7;
     width: 160px;
     height: 50px;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
     border-style: solid;
     border-width: 2px;
     background-color: rgba(80, 90, 199, 1); /* warna background */
     -webkit-box-shadow: 0px 0px 2px 0px #333;
     -moz-box-shadow: 0px 0px 2px 0px #333;
     box-shadow: 0px 0px 2px 0px #333; }
   
   .maxbutton:hover {
     border-color: #505ac7;
     background-color: rgba(255, 255, 255, 1); /* warna hover */
     -webkit-box-shadow: 0px 0px 2px 0px #333;
     -moz-box-shadow: 0px 0px 2px 0px #333;
     box-shadow: 0px 0px 2px 0px #333; }
   
   .maxbutton .mb-text {
     color: #fff;
     font-family: Tahoma;
     font-size: 15px;
     text-align: center;
     font-style: normal;
     font-weight: normal;
     padding-top: 18px;
     padding-right: 0px;
     padding-bottom: 0px;
     padding-left: 0px;
     line-height: 1em;
     box-sizing: border-box;
     display: block;
     background-color: unset;
     position: relative; }
   
   .maxbutton:hover .mb-text {
     color: #505ac7; }

   
   
5. Taruh kode tersebut tepat di atas ]]></b:skin> .
6. Kemudian Klik simpan.

kode yang saya beri /* warna background */ dan /* warna hover*/ bisa sobat ganti dengan warna sesuai selera menggunakan kode warna rgba.

Untuk cara pemasangannya di postingan juga cukup mudah, sobat copas kode di bawah ini dan taruh di postingan blog menggunakan mode html, lihat gambar di bawah.

pilih mode HTML

Kode :

<a class="maxbutton" href=" LINK DOWNLOAD ATAU LINK YANG DITUJU"><span class='mb-text' > TEXT YANG DI TAMPILKAN DI BUTTON</span></a> 

sobat ganti tulisan yang saya beri warna hijau dengan link yang akan di taruh di tombol, dan yang warna merah silahkan ganti dengan Text yang akan di tampilkan di tombol download.

untuk demo nya bisa sobat lihat

DI SINI SOB .

Tambahan : 

Jika sobat ingin agar tombolnya menjadi ke bagian tengah atau sering di bilang rata tengah, tambahkan kode <center> di awal kode tombol download dan jangan lupa di akhiri dengan </center> juga. nantinya akan menjadi sperti ini 

<center><a class="maxbutton" href=" LINK DOWNLOAD ATAU LINK YANG DITUJU"><span class='mb-text' > TEXT YANG DI TAMPILKAN DI BUTTON</span></a></center>

Nah, itulah Cara Membuat Tombol Download Keren dan Ringan di Blogger. Terima kasih Semoga bermanfaat.

Bagikan Artikel ini