Cara Membuat Tombol Demo dan Download Sederhana

Cara Membuat Tombol Demo dan Download Sederhana - Membuat tombol demo dan download di blog sangatlah mudah dan sederhana sama saja dengan membuat link atau url biasa. Tetapi link tersebut kita ubah menjadi tombol yang lebih menarik dengan memberikan kotak dan warna akan memberikan kesan yang berbeda dibandingkan dengan link biasa.

Button demo dan download ini saya buat dengan sangat sederhana tanpa menggunakan font awesome, saya hanya menggunakan efek transisi sederhana namun tetap bagus jika Anda gunakan. Tombol ini saya buat sederhana juga untuk mempercepat loading blog Anda, karena jika menggunakan font awesome akan sedikit membutuhkan waktu untuk loading walaupun tombol demo dan download yang menggunakan font awesome jauh lebih keren dibandingkan dengan ini.

Blogger yang menggunakan button download dan demo ini biasanya untuk blog yang menyediakan template, ataupun blog download lainnya. Demo adalah preview atau contoh tampilan dari sebuah file yang akan kita download, sedangkan download adalah file yang akan kita unduh sesuai dengan preview yang sudah kita lihat.
Cara Membuat Tombol Demo dan Download Sederhana

Demo Download

Nah, bagi Anda yang ingin memasang tombol demo dan download ini di blog Anda silahkan ikuti langkah-langkahnya dibawah ini.

1. Masuk ke Blogger.com
2. Lalu masuk ke bagian Template > Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Copy kode CSS dibawah ini
.demo{border:none;border-radius:2px;padding:5px 20px!important;background:#5959ff;color:#FFF!important;text-align:center;text-shadow:0 0 1px rgba(0,0,0,0.3);transition:background-color 1s ease-out 0s;letter-spacing:1px}.download{border:none;border-radius:2px;padding:5px 20px!important;background:#4cc3ff;color:#FFF!important;text-align:center;text-shadow:0 0 1px rgba(0,0,0,0.3);transition:background-color 1s ease-out 0s;letter-spacing:1px}.demo:hover{background:#000;text-shadow:0 0 1px #222}.download:hover{background:#000;text-shadow:0 0 1px #222}
5. Paste diatas kode ]]></b:skin> atau </style>
6. Klik Simpan template

Bagaimana Cara Menggunakan Tombol Demo dan Download ?

Setelah memasang kode css pada template blog Anda, sekarang Anda tinggal mencoba untuk menggunakannya. Lalu bagaimana cara menggunakan tombol demo dan downloadnya ? Silahkan simak dibawah ini.

Tambahkan kode class='demo' untuk tombol Demo
Tambahkan kode class='download' untuk tombol Download

1. Buatlah sebuah link seperti biasanya pada artikel blog Anda
2. Jika Anda berada di bagian Compose silahkan klik di bagian HTML
3. Carilah link yang sudah Anda buat, misalnya seperti ini
<a href="http://www.caramanual.com" title="Cara Manual">Cara Manual</a>
4. Tambahkan kode class='demo' atau class='download'
<a class='demo' href="http://www.caramanual.com" title="Cara Manual">Cara Manual</a>
5. Silahkan publikasikan kembali artikel Anda

Jika Anda masih merasa kesulitan dengan tutorial diatas silahkan untuk memberikan komentar Anda, saya usahakan akan membantu Anda dalam memasang tombol demo dan download di blog Anda.
Cara Manual Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

10 Komentar untuk "Cara Membuat Tombol Demo dan Download Sederhana"

  1. cocok buat artikel promosi template ini

    BalasHapus
    Balasan
    1. iya kang, biasanya sih buat blog yang share template pakai button demo dan download

      Hapus
  2. Ternyata seperti itu caranya, gampang sekali untuk dipraktekan tinggal menambahkan class demo.

    BalasHapus
    Balasan
    1. iya mas, tinggal pasang kode css seperti diatas dan tambahkan class nya

      Hapus
  3. Mas... ini kalau di pakai pada WordPress, kira-kira work gak ya?

    BalasHapus
    Balasan
    1. bisa mas, tinggal simpen kode cssnya di style.css atau kalau cuman dipake buat postingan aja tinggal masukin kode css diatas dibagian text bukan visual dan tambahkan kode seperti ini :
      <style type='text/css'>
      Kode CSS
      </style>

      Hapus
Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel