Hubungi KamiJika ada pertanyaan silahkan hubungi kami

Cara Membuat tombol Download Di Blog

Cara Membuat tombol Download Di Blog-Untuk blogger download biasanya terdapat tombol button download untuk mempermudah pengunjung mengenali lokasi url download, untuk membuat tombol download sebenarnya cukup mudah kita dapat menggunakan gambar yang bisa ditemukan di internet atau dengan kreasi sendiri.

Namun kayaknya jika hanya menggunakan gambar tanpa di poles dengan kode css rasanya kurang keren karena tidak memiliki effek. Nah jika ingin menggunakan tombol download keren coba gunakan kode dibawah ini efeknya keren dan mudah di gunakan. Baca Juga: Memasang Widget Social Profil Di Blog

Panduan Memasang Tombol Download di Blogger/Blogspot

  • Login ke akun blogger
  • Pada halaman dashboard pilih Template
  • Pilih Edit HTML
  • Cari kode ]]></b:skin> dan copy kode di bawah ini lalu pastekan di atas kode ]]></b:skin>

/* -- Kang Ismet Button --*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

  • Selanjutnya klik Simpan
  • Sekarang tinggal buat artikel/posting baru
  • Pada halaman post masukkan code dibawah ini pada tab HTML setiap ingin membuat postingan yang ingin dipasang tombol download.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://giribig.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://giribig.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Keterangan:

  • Silahkan ganti URL dengan alamat url yang di inginkan
  • Kode “Download Now” bisa Anda ganti sesuai dengan kebutuhan misaljika blog Anda membahas tutorial bisa diganti dengan “Demo” dll

Nah mudah bukan? Oh iya jangan lupa untuk yang masih belajar blog dan ingin membuat blognya lebih seo friendly silahkan kunjungi halaman Panduan Membuat Blog dan Optimasi SEO Friendly. Sekian untuk artikel Cara Membuat tombol Download Di Blog, jangan lupa share artikel ini untuk memberi tau ke pada teman kamu.

Baca Juga Cara Membuat toko online dengan mudah | CARA DAN KUMPULAN KERAJINAN UNIK DAN KEREN

Add a Comment

Your email address will not be published. Required fields are marked *

Read previous post:
Download Themes PointPro WordPress

Download Themes PointPro WordPress-Pada artikel terdahulunya saya pernah pernah berbagi...

Close