Skip to main content

Cara Membuat Tombol Download Keren di Blogspot Responsive

Cara Membuat Tombol Download Keren di Blogspot Responsive - Bagi kamu yang terbiasa download seperti di situs Jalantikus, pasti tidak asing lagi dengan tombol keren yang menarik. Ya, tombol download yang keren bisa membuat pengunjung blog semakin tertarik untuk mendownload file yang mereka cari.

Cara Membuat Tombol Download Keren di Blogspot Responsive
Cara Membuat Tombol Download Keren di Blogspot Responsive

Bagaimana membuat tombol keren untuk download di blog? Tenang aja boy, hari ini kita akan belajar HTML dan CSS yang paling dasar untuk mengendit template blog platform Blogger. Adapun cara membuat tombol download keren di bawah ini juga yang saya gunakan di blog ini (Menggunakan template kompiflexible) dan hasilnya tombol download yang responsive.

Cara Membuat Tombol Download Keren di Blogspot Responsive


Langsung saja, berikut cara membuat tombol download keren di Blogspot

1. Masuk ke menu dashboard blogger dan klik Tema - Edit HTML atau jika menggunakan bahasa Inggris, klik Template - Edit HTML.
2. Copy kode tombol download keren dengan CSS di bawah ini:

/* Button */
@font-face{font-family:"Product Sans";src:url("https://cdn.jsdelivr.net/gh/KompiAjaib/font@master/product-sans-regular.ttf") format("ttf");font-weight:normal;font-style:normal;}
a.btn-download,a.btn-play,a.btn-google,a.btn-apple,a.btn-play:hover,a.btn-download:hover,a.btn-google:hover,a.btn-apple:hover{color:#fff}
.btn{display:inline-block;padding:10px 16px;margin:5px;font-size:18px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-play{color:#fff;background-color:#D32F2F;border-color:#C62828;padding:10px 16px 10px 40px;position:relative;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
.btn-play:focus{color:#fff;background-color:#C62828;border-color:#B71C1C}
.btn-play:active,.btn-play:hover{color:#fff;background-color:#C62828;border-color:#B71C1C}
.btn-play:before{content:"";color:#fff;background-image:url(https://1.bp.blogspot.com/-DpJGZ47Olck/WSkXyTDP1kI/AAAAAAAArQQ/UwIxH4hYRIkbgZkN0_mUrkK12HveGFsXACLcB/s1600/play.png);background-size:cover;background-repeat:no-repeat;width:30px;height:40px;position:absolute;left:0;top:50%;margin-top:-20px}
.btn-download{color:#fff;background-color:#337ab7;border-color:#2e6da4;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
.btn-download:focus{color:#fff;background-color:#286090;border-color:#122b40}
.btn-download:active,.btn-download:hover{color:#fff;background-color:#286090;border-color:#204d74}
.btn-google,.btn-apple{color:#fff;background-color:#111;border-color:#000;position:relative;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
.btn-google{padding:15px 16px 5px 40px;}
.btn-apple{padding:15px 22px 5px 50px;}
.btn-google:focus,.btn-apple:focus{color:#fff;background-color:#555;border-color:#000}
.btn-google:active,.btn-google:hover,.btn-apple:active,.btn-apple:hover{color:#fff;background-color:#555;border-color:#000;}
.btn-apple:before,.btn-google:before{background-size:cover;background-repeat:no-repeat;width:30px;height:30px;margin-top:-15px;position:absolute}
.btn-google:before{content:"";background-image:url(https://4.bp.blogspot.com/-52U3eP2JDM4/WSkIT1vbUxI/AAAAAAAArQA/iF1BeARv2To-2FGQU7V6UbNPivuv_lccACLcB/s30/nexus2cee_ic_launcher_play_store_new-1.png);left:6px;top:50%}
.btn-google:after{content:"GET IT ON";position:absolute;top:5px;left:40px;font-size:10px;font-weight:400}
.btn-apple:before{content:"";background-image:url(https://2.bp.blogspot.com/-pfguXOXm3fg/WfbA_JMxnOI/AAAAAAAAtoA/wkc55zw6kZ4cG-S-9K2HVie6RxXRhuvdACLcBGAs/s30/apple.png);left:10px;top:50%}
.btn-apple:after{content:"Download on the";position:absolute;top:5px;left:50px;font-size:11px;font-weight:400}kbd{color:#333;display:inline-block;-moz-border-radius:3px;-moz-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;-webkit-border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;background-color:#f7f7f7;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:1.4;margin:0 .1em;padding:.1em .6em;text-shadow:0 1px 0 #fff;vertical-align:3px}

Lihat juga Belajar Fb Ads To Adsense Terbaru 2019

3. Cari kode

]]></:skin> atau kode ]]></b:template-skin>

itu di template blogmu. Untuk memudahkan, gunakan fasilitas CTRL + F. Setelah itu, paste kode CSS tombol download keren di atas tepat di atas kode yang sudah kamu temukan tersebut.

Kalau kode ]]></:skin> atau kode ]]></b:template-skin> ini tidak ada di template kamu, maka pastekan saja kode CSS download keren di atas tepat di atas kode berikut.

/*]]>*/
</style>

4. Cara membuat link download di blog sendiri

Setelah masalah HTML dan CSS sudah dipasang di template, maka saatnya untuk membuat link download di postingan blog.

- Masuk ke menu Postingan dan klik Entri Baru

- Masukkan kode seperti di bawah ini!

<a class="btn btn-download" href="#" title="Download" rel="nofollow" target="_blank">Download</a>

- Ganti tanda # dalam atribut href dengan link download. Contoh:

<a class="btn btn-download" href="https://www.soksimon.com/2019/04/download-gbwhatsapp-versi-terbaru.html" title="Download" rel="nofollow" target="_blank">Download</a>

- Lihat demo tombol download keren di Blogspot di bawah ini.




Itu adalah demo tombol download keren dan responsive di blogspot.

Kamu juga bisa mencoba tombol-tombol keren lainnya di template yang sudah dipastekan kode CSS di atas menggunakan kode berikut di postingan blog.

- Tombol Play Video Youtube

<a class="btn btn-play" href="#" title="Play Video">Play Video</a>

- Tombol Google Play

<a class="btn btn-google" href="#" title="Google Play">Google Play</a>

- Tombol keren Download On The App Store

<a class="btn btn-apple" href="#" title="Download On The App Store">App Store</a>

Lihat juga Cara membuat blog safelink converter gratis sederhana

Demikianlah cara membuat tombol download keren di Blogspot responsive menggunakan kode CSS. Semoga bermanfaat!
  May 07, 2019
Semoga Sukses: 1 Kalimat Terbaik dari Anda Adalah Motivasi Bagi Saya!
Bagaimana Pendapat Anda?
Terima Kasih!
close