Cara Membuat Tombol Download dan Demo di Blog. Sebelum kita masuk ke tutorial mengenai cara membuat tombol DEMO dan DOWNLOD di Blog, apa fungsi dari tombol demo dan download dalam sebuah blog.
Tombol demo di blog di gunakan untuk melihat suatu contoh hasil tampilan pada sebuah blog yang membawa anda pergi ke alamat yang di masukan kedalam tombol demo tersebut. Misalkan anda menjual sebuah template SEO 2015 dan anda sudah memunculkan screenshot tampilan SEO tersebut, agar pengunjung yang ingin membelinya melihat secara langsung bagaimana tampilan blog yang menggunakan template SEO maka di buatlah tombol demo di bawah gmabar screenshot template.
Sedangkan fungsi dari tombol download di blog yaitu memudahkan pengunjung untuk mengunduh file yang sudah di upload di dalam blog tersebut. Jadi anda tidak perlu membuka banyak halaman lagi, cukup klik tombol download maka file yang ingin anda download akan terdownload otomatis.
Sedangkan untuk membuat tombol Demo dan Download di postingan blog sendiri sebenarnya banyak cara yang bisa di gunakan. Salah satunya membuat tombol demo dan download ala kang ismet. Baik itu tombol demo keren atau tombol download keren di blog, tetap memiliki fungsi dan tujuan yang sama memudahkan pengunjung untuk melihat blog anda.
Untuk melihat cara membuat tombol Demo dan Download pada blog silahkan anda lihat lebih jelas di bawah ini.
Membuat Tombol Demo Dan Download
1. Silahkan masuk di blog anda.
2. Pilih Template
3. Pilih Edit Html
4. Silahkan anda cari kode ini ]]></b:skin> gunakan Ctrl+F untuk mempermudah pencarian
5. Letakan kode script di bawah ini tepat di atas kode ini ]]></b:skin>
/* -- Kode 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 }
6. Simpan Template anda
Memasang Tombol Demo dan Download di Blog
Untuk cara memasang tombol di blog dapat anda lakukan dengan mudah, silahkan anda letakan kode script di bawah ini pada postingan yang ingin anda tambahkan tombol demo dan download di postingan blog. masuk ke postingan blog pilih HTML seperti gambar di bawah.
Dan letakan kode script berikut ini di bawah potingan blog anda, ganti alamat URL bacaan gratis dengan alamat URL blog anda
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.bacaan-gratis.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.bacaan-gratis.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
Demikian tutorial blog bagi pemula mengenai cara membuat tombol Demo dan Download di blog, semoga dapat bermanfaat bagi anda dan terima kasih sudah mampir di situs Bacaan-Gratis.Com ^_^
Tag :
BLOG
0 Komentar untuk "Bagaimana Cara Membuat Tombol Demo dan Download Keren di Postingan Blog"
PERINGATAN..!!
1. Berkomentarlah Sesuai Judul Diatas Dengan Sopan dan Jangan Spaming.!!
2. Dilarang Berkomentar Yang Mengandung Unsur Pornografi dan Sara.!!
3. Mohon Maaf Bagi Yang Berkomentar Melampirkan Link Langsung Ane Masukan Spam.!!
Mohon Untuk Mematuhu TOS diatas. Terimakasih