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>
@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.
