√ Cara Memasang Tombol Demo dan Download CSS di Template Blogger Lengkap

Cara Memasang Tombol Demo dan Download CSS di Template Blogger Lengkap

August 14, 2025

Cara Memasang Tombol Demo dan Download CSS di Template Blogger Lengkap & SEO Friendly

Memasang tombol Demo dan Download yang keren dan responsif di Blogger adalah cara mudah untuk membuat tampilan blog lebih profesional. Dalam tutorial ini, kita akan membahas cara memasang CSS tombol langsung di template Blogger agar cepat, konsisten, dan SEO friendly.

Mengapa Memasang CSS di Template Blogger?

Ringan – CSS dimuat sekali di seluruh blog.
Konsisten – Desain tombol sama di semua postingan.
SEO Friendly – Loading cepat membantu peringkat Google.
Mudah Dikelola – Cukup edit di template, langsung update di semua halaman.

Langkah Memasang CSS Tombol di Template Blogger

Login ke Blogger, pilih blog yang ingin diedit.
Buka menu Tema → Edit HTML.
Cari tag </head> dan tempel kode CSS berikut sebelum tag tersebut:

/* CSS tombol */
.button-wrapper{display:flex;flex-direction:column;align-items:center;gap:32px;margin:20px auto}
.button-wrapper a{display:inline-block;padding:12px 28px;font-size:16px;font-weight:bold;color:#fff;text-decoration:none;border-radius:50px;background-size:300% 300%;animation:gradientMove 4s ease infinite,glowPulse 2s ease-in-out infinite;transition:transform .3s ease}
.button-wrapper a.demo{background-image:linear-gradient(45deg,#ff6600,#ff9900,#ffcc33,#ff8800);box-shadow:0 0 10px rgba(255,140,0,.6)}
.button-wrapper a.download{background-image:linear-gradient(45deg,#0066ff,#0099ff,#00ccff,#3399ff);box-shadow:0 0 10px rgba(0,150,255,.6)}
.button-wrapper a:hover{transform:translateY(-3px) scale(1.05)}
@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes glowPulse{0%{box-shadow:0 0 10px currentColor}50%{box-shadow:0 0 25px currentColor}100%{box-shadow:0 0 10px currentColor}}
@media(max-width:480px){.button-wrapper a{width:100%;text-align:center}}

Cara Memanggil Tombol di Postingan Blogger

Setelah CSS ada di template, cukup masukkan HTML berikut di postingan:

<div class="button-wrapper">
  <a href="https://bloggercopaser.blogspot.com" class="demo" title="Lihat Demo">Demo</a>
  <a href="https://bloggercopaser.blogspot.com" class="download" title="Download Template">Download</a>
</div>

*Catatan : ganti link https://bloggercopaser.blogspot.com dengan link tujuan

Cara Ubah Ukuran Tombol

Di kode CSS, cari bagian:

padding: 12px 28px;
font-size: 16px;

Sesuaikan:

Tombol kecil → padding: 8px 20px; font-size: 14px;
Tombol besar → padding: 16px 40px; font-size: 18px;

Tips SEO untuk Tombol Demo & Download

Gunakan atribut title pada link untuk memperjelas isi tombol.
Pastikan link relevan dengan konten artikel.
Gunakan warna kontras agar tombol mudah terlihat.
Pastikan desain responsif untuk semua ukuran layar.

Kesimpulan

Dengan memasang tombol Demo dan Download CSS langsung di template Blogger, kamu akan mendapatkan tampilan profesional, kecepatan loading optimal, dan SEO yang lebih baik. Terapkan tutorial ini, dan blog kamu akan terlihat lebih rapi serta menarik di mata pengunjung maupun Google.

Anonymous

Cara Memasang Tombol Demo dan Download CSS di Template Blogger Lengkap