Cara Membuat Tombol Download Keren di Blogspot Responsive
"Cara Membuat Tombol Download Keren di Blogspot Responsive menggunakan CSS, Cara menambahkan Tombol Keren di template blog,"
4 min read
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 |
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1sKpLIzD25fT2xOfRHus3lpOWNQn0_0B9RYsnpogHN4_QngWn6hZKvSB8kITMAfESHEjyGt8tK7BIyGV9EsYeum0FLVXFk-1lhhTqj3W0Z_Cqp44R-q8iflg4tGCvjwULIyd1ylRPUIEC/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjprXBJ5tqrgGyfHGn4QFVbvfZgs5DgnW2TvL5RtVI7QSArzyPfWHbcPtY_aVCupYtTqkkFHpr8CKIui5JUKtn9U8P-JbykEHfG_OQ8E4BUVTQGySnAedxMyIe55pZ8t08u84fFWXNz_ie2/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtkMkj2JwOvsFpU55P9q0TfwUGjreUVOowB7pEM5kNOkoIBHg_8vBfsj-dFNniJnAvmJqarJ5YvlG8o0jBh-zrg9YAbs31Iu783AfdP4JJ_aIjc4Tdzsfnj5uravK9-PjHZfVqvI0LNo/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}
@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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1sKpLIzD25fT2xOfRHus3lpOWNQn0_0B9RYsnpogHN4_QngWn6hZKvSB8kITMAfESHEjyGt8tK7BIyGV9EsYeum0FLVXFk-1lhhTqj3W0Z_Cqp44R-q8iflg4tGCvjwULIyd1ylRPUIEC/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjprXBJ5tqrgGyfHGn4QFVbvfZgs5DgnW2TvL5RtVI7QSArzyPfWHbcPtY_aVCupYtTqkkFHpr8CKIui5JUKtn9U8P-JbykEHfG_OQ8E4BUVTQGySnAedxMyIe55pZ8t08u84fFWXNz_ie2/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtkMkj2JwOvsFpU55P9q0TfwUGjreUVOowB7pEM5kNOkoIBHg_8vBfsj-dFNniJnAvmJqarJ5YvlG8o0jBh-zrg9YAbs31Iu783AfdP4JJ_aIjc4Tdzsfnj5uravK9-PjHZfVqvI0LNo/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}
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>
</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.simentik.eu.org/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.
Download GBWhatsApp
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 kode css lengkap
Demikianlah cara membuat tombol download keren di Blogspot responsive menggunakan kode CSS. Semoga bermanfaat!