Breaking

Jumat, 05 Februari 2021

Cara Membuat Tombol Download Keren Di Blog Dengan CSS Dan HTML

Cara Membuat Tombol Download Keren Di Blog Dengan CSS Dan HTML

Halo teman-teman, selamat datang di tutorial blog Tulisan Pena. Hari ini Anda akan belajar cara menambahkan Tombol Download di posting blog Blogger dengan gambar.

Kode Tombol Download Responsif Cantik Baru Untuk Blogger 2021

Saat ini, ada jutaan situs web dan blog yang ada di internet termasuk Android, PC, Aplikasi, Coding, Video, Musik, Berita, Foto, blog atau situs web, dll. Dan banyak situs web dan blog memiliki beberapa data yang dapat diunduh untuk pengguna di sana, misalnya saat Anda mengunduh Gambar, menggunakan Pinterest, lagu JioSaavn, video Youtube, dll.

Jika kami memiliki file yang diunduh di sini dan pengguna cukup mengklik tombol unduh untuk mengunduh file, sekarang saya akan mengajari Anda untuk membuat Tombol Unduh yang indah dan responsif di blog Blogger.

Tutorial Blogspot: Cara Menambahkan Tombol Download Di Posting Blogger 2021: Tombol Download Untuk Blogger

Langkah 1: Buka bagian tema blog Anda | klik pada mode pengeditan HTML


Langkah2: Tempel kode CSS tepat di bawah detail nama blog atau Anda dapat menempelkan kode di bawah <head>



 /* Heading Font */
@font-face {font-family: 'Poppins';font-style: normal;font-weight: 700;font-display: swap;src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v13/pxiByp8kv8JHgFVrLCz7V1g.woff) format('woff'), url(https://fonts.gstatic.com/s/poppins/v13/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2')}
.Blog .download-info{display:flex;align-items:center;margin:1.7em 0;padding:15px;border:2px solid #ebeced;border-radius:3px;font-size:13px}
.Blog .download-info .file-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;border-radius:15px;color:#fefefe;background:#ebeced linear-gradient(225deg,#00dcc0 0,#005af0 75%);font-weight:700;font-family:Poppins, sans-serif}
.Blog .download-info .file-text{padding:0 12px;width:calc(100% - 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.Blog .download-info .file-link{flex-shrink:0;display:flex;font-size:11px;margin:0 0 0 auto;padding:6px 10px}
.Blog .download-info .file-link .m-icon{width:15px;height:15px}
.button{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe !important;background-color:#005af0;border-radius:3px;font-size:13px;line-height:22px}
.m-icon.download{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23161617" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3"/><polyline points="8 12 12 16 16 12"/><line x1="12" x2="12" y1="2" y2="16"/></svg>')}
.m-icon{display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center center}

Step3: Buka Posting Blogger dan pilih posting yang ingin Anda tambahkan tombol Download yang indah kemudian klik tombol Edit pada posting..


Langkah 4: Sekarang Salin kode HTML yang diberikan di bawah ini dan ganti URL Warna Merah dengan URL Anda.


Kode HTML Untuk Tombol Unduh Blogger 2021

<div class='download-info'>

  <span class='file-icon'>Zip</span>

  <span class='file-text'>Assamese Book.zip</span>

  <a class='button file-link' href='//jonakaxom.in' target='_blank' rel='noreferrer noopener'><i class='m-icon download'></i>Download</a>

</div>


Langkah 5: Klik tombol Publish dan buka Blogger Blog.

Catatan: - Ganti URL MERAH Dengan URL Anda | Sebelum Tempel

Ini adalah kode tombol unduh blogger terbaru dan terbaik yang secara pribadi saya gunakan di sebagian besar blog saya. Jika Anda memiliki pertanyaan tentang tutorial blog saya, beri komentar di bawah.

Disclaimer: Images, articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact