src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/> Cara Membuat Tombol Download Keren di Blogspot Responsive - teachertekno.com

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 pada blog? Tenang aja boy, hari ini kita akan belajar HTML dan CSS yang paling dasar untuk mengendit template blog platform Blogger. Adapun cara menciptakan tombol download keren pada bawah ini juga yg aku pakai pada blog ini (Menggunakan template kompiflexible) & 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 & klik Tema - Edit HTML atau bila memakai bahasa Inggris, klik Template - Edit HTML.

2. Copy kode tombol download keren menggunakan CSS di bawah ini:

/* Button */

@font-facefont-family:"Product Sans";src:url("https://cdn.Jsdelivr.Net/gh/KompiAjaib/[email protected]/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:hovercolor:#fff

.Btndisplay: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:focusoutline:0

.Btn:focus,.Btn:hovercolor:#333;text-decoration:none;outline:0

.Btn:activeoutline: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-playcolor:#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:focuscolor:#fff;background-color:#C62828;border-color:#B71C1C

.Btn-play:active,.Btn-play:hovercolor:#fff;background-color:#C62828;border-color:#B71C1C

.Btn-play:beforecontent:"";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-downloadcolor:#fff;background-color:#337ab7;border-color:#2e6da4;font-family: 'Product Sans', Arial, sans-serif;font-weight:600

.Btn-download:focuscolor:#fff;background-color:#286090;border-color:#122b40

.Btn-download:active,.Btn-download:hovercolor:#fff;background-color:#286090;border-color:#204d74

.Btn-google,.Btn-applecolor:#fff;background-color:#111;border-color:#000;position:relative;font-family: 'Product Sans', Arial, sans-serif;font-weight:600

.Btn-googlepadding:15px 16px 5px 40px;

.Btn-applepadding:15px 22px 5px 50px;

.Btn-google:focus,.Btn-apple:focuscolor:#fff;background-color:#555;border-color:#000

.Btn-google:active,.Btn-google:hover,.Btn-apple:active,.Btn-apple:hovercolor:#fff;background-color:#555;border-color:#000;

.Btn-apple:before,.Btn-google:beforebackground-size:cover;background-repeat:no-repeat;width:30px;height:30px;margin-top:-15px;position:absolute

.Btn-google:beforecontent:"";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:aftercontent:"GET IT ONdanquot;;position:absolute;top:5px;left:40px;font-size:10px;font-weight:400

.Btn-apple:beforecontent:"";background-image:url(https://dua.Bp.Blogspot.Com/-pfguXOXm3fg/WfbA_JMxnOI/AAAAAAAAtoA/wkc55zw6kZ4cG-S-9K2HVie6RxXRhuvdACLcBGAs/s30/apple.Png);left:10px;top:50%

.Btn-apple:aftercontent:"Download on thedanquot;;position:absolute;top:5px;left:50px;font-size:11px;font-weight:400kbdcolor:#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,.Dua),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 pada template blogmu. Untuk memudahkan, gunakan fasilitas CTRL F. Setelah itu, paste kode CSS tombol download keren di atas sempurna pada atas kode yang telah 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 menciptakan link download di blog sendiri

Setelah masalah HTML & CSS sudah dipasang di template, maka saatnya untuk menciptakan link download pada postingan blog.

- Masuk ke sajian Postingan & klik Entri Baru

- Masukkan kode misalnya di bawah ini!

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

- Ganti indikasi # dalam atribut href menggunakan link download. Contoh:

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

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

Download GBWhatsApp

Itu merupakan demo tombol download keren dan responsive pada blogspot.

Kamu pula mampu mencoba tombol-tombol keren lainnya di template yg telah dipastekan kode CSS di atas memakai kode berikut pada 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 jugakode css lengkap

Demikianlah cara membuat tombol download keren di Blogspot responsive menggunakan kode CSS. Semoga bermanfaat!

0 Response to "Cara Membuat Tombol Download Keren di Blogspot Responsive"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel