Cara Membuat Tombol Download Button di LinkMagz Blogger Template

Kali ini, izinkan saya berbagi tutorial bagaimana caranya membuat, memasang atau menampilkan tombol demo dan download di template blogger LinkMagz karena banyaknya yang masih belum tahu.

1. Selesaikan tulisan terlebih dahulu.

2. Masuk ke mode tulis HTML

3. Salin (copy) dan tempel (paste) kode HTML di bawah ini:

<a class="buttonDownload" href="#">Download</a>

4. Silakan modifikasi sesuai selera bagaimana.

Sebelum postingan web blog dipublikasikan, pastikan bahwa kawan-kawan menekan tombol Preview untuk melihat hasilnya bagaimana.

Cara Membuat Tombol Demo dan Download Sejajar

Kalau sobat ingin kedua tombol yang muncul harus sejajar di dalam artikel web blog, cukup tambahkan kode HTML yang sama di sampingnya. Saya juga menyertakan LINK sebagai contohnya:

<center><a class="buttonDownload" href="https://www.ariefghozaly.web.id/">Demo</a> <a class="buttonDownload" href="https://www.ariefghozaly.web.id/2022/09/download-linkmagz-premium-gratis.html">Download</a></center>

Hasilnya seperti ini:

Demo Download
Pada kode di atas, saya menambahkan kode <center> dan </center> di awal dan di akhir agar tombolnya berada di tengah-tengah postingan blog.

Baik cara pertama di atas maupun yang kedua di atas, sobat harus menggantikan tanda tagar (#) yang sudah ditandai, dengan URL yang dituju. Contohnya seperti ini:

<a class="buttonDownload" href="https://sugeng.id/?ref=311">Download</a>

Atau seperti ini:

<a class="buttonDownload" href="https://www.ariefghozaly.web.id/">Web Blog Pribadi Saya: Arief Ghozaly</a>

Berikut kode konfigurasi CSS yang mengatur tampilan tombol demo dan download, yang bisa sobat temukan di dalam template blogger:

.buttonDownload{margin:16px 0;margin:1rem 0;border-radius:3px;display:inline-block;text-decoration:none !important;position:relative;padding:10px 25px;color:white !important;font-weight:bold;font-size:.9em;text-align:center;text-indent:15px;-webkit-transition:all .4s;transition:all .4s}.buttonDownload:hover{opacity:.85}.buttonDownload::before,.buttonDownload::after{content:" ";display:block;position:absolute;left:15px;top:52%}.buttonDownload::before{width:10px;height:2px;border-style:solid;border-width:0 2px 2px}.buttonDownload::after{width:0;height:0;margin-left:3px;margin-top:-7px;border-style:solid;border-width:4px 4px 0 4px;border-color:transparent;border-top-color:inherit;-webkit-animation:downloadArrow 2s linear infinite;animation:downloadArrow 2s linear infinite;-webkit-animation-play-state:paused;animation-play-state:paused}.buttonDownload:hover::after{-webkit-animation-play-state:running;animation-play-state:running}

Kode CSS di atas bisa sobat konfigurasikan kembali. Pastikan berhati-hati, jangan asal hapus dan ganti. Kalau salah, template blogger akan rusak (error).

Thanks for reading Cara Membuat Tombol Download Button di LinkMagz Blogger Template! 😃