Membuat Tombol Demo Dan Download Keren Di Blog

loading...
Haloo sobat media2give,pada kesempatan ini saya akan membahas tentang Membuat Tombol Demo Dan Download Keren Di Blog.Yap,seperti yang sobat ketahui semua bahwa artikel yang kita buat di blog biasanya memang bervariasi,dan setiap blog pasti memiliki niche-nya masing-masing.Ada tipe blog khusus untuk kesehatan,usaha kreatif,wisata,tips ,kuliner,SEO,tutorial,bisnis,game dan download software serta musik/film.Nah,untuk blog yang menyediakan konten berupa link download,kita dengan mudah akan melihat link download yang dipasang di dalam artikelnya.

Link tersebut berupa teks biasa yang jika di klik akan mengarah ke situs hosting tempat file download di upload.Cara memberikan link dengan teks semacam itu sudah biasa ya,tapi jika mau di buat lebih menarik lagi bisa dengan menambahkan tombol download button di bagian bawah atau di tengah-tengah artikel.Tujuannya agar pengunjung lebih mudah menemukan link yang harus di klik untuk mendownload.Selain itu tampilannya juga terlihat berbeda dan unik,apalagi button yang dipakai bentuknya bermacam-macam.

Namun tak cuma di blog download saja kita melihat button download itu,di blog lain yang berisi artikel tentang tutorial juga sering menyisipkan tombol download di postingan.Tombol tersebut di pakai untuk mendownload aplikasi yang akan dipakai untuk mempraktekkan cara yang telah dijelaskan dalam artikel tersebut.Jadi sesudah dibaca,pengunjung bisa langsung praktek setelah mengunduh filenya.Lain lagi dengan blog yang isinya tentang template,biasanya ini blog khusus yang membagikan template baik itu gratisan maupun berbayar.

Tengok saja situs seperti btemplate,zoomtemplate,mybloggerthemes dan penyedia download template blog lainnya.Pasti ketika kita memilih salah satu templatenya akan muncul keterangan lengkap yang isinya nama template dan fitur-fitur yang terdapat di dalam template itu.Di dalam artikelnya selalu muncul 2 button,yaitu download button dan demo button.Demo button di gunakan untuk melihat demo template yang dipakai sehingga jika pengunjung ingin tau bagaimana tampilan blognya jika memakai template itu,langsung tau hasilnya.


Sementara tombol downloadnya untuk mengambil template itu.Kedua tombol ini memang penting untuk blog yang memberikan informasi yang membutuhkan penerapan langsung.Dengan adanya tombol demo dan dowload,pengunjung akan mudah memilih mana kira-kira template yang mereka sukai.Nah,bagi yang mau menampilkan tombol demo dan download di blog,silahkan disimak cara membuatnya berikut ini ya :

1. Login dulu blog kalian
2. Masuk ke menu Template > Edit HTML
3. Cari kode ]]></b:skin>
4. Letakkan kode dibawah ini tepat di atas kode ]]></b:skin> tadi

/* — media2give.blogspot.com –*/
.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 }

5. Klik Simpan
6. Buat sebuah postingan di blog
7. Ubah tampilannya menjadi HTML


8. Masukkan kode di bawah ini 

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

9. Ganti url yang berwarna merah dengan alamat url yang dituju
10. Klik Publikasikan
11. Hasilnya akan terlihat seperti ini

loading...

2 Comments

Leave a Reply

Your email address will not be published.


*