Cara Membuat Tombol Demo Dan Download Di Postingan Blog

Tombol Demo dan Download punya banyak kegunaan pada dunia blog. Bagi setiap blogger, tombol ini dipakai untuk keperluan masing-masing. Kebanyakan, tombol ini dipakai untuk menampilkan halaman demonstrasi atau link download dari pokok bahasan yang sedang diulas disatu postingan.

Kebanyakan blogger mengulas pemasangan tombol ini dengan mengharuskan kita masuk ke halaman HTML. Kali ini kita bakal memasang tombol Demo dan Download dengan trik mudah. Tombol yang bakal kita buat tampilannya menyerupai dibawah ini :

• Demo
• Download

Pemasangan dengan trik konvensional mengharuskan kita masuk ke akun blogspot dan menentukan tab Edit HTML pada tab Template. Setelah didalam kita diminta untuk mencari kode ]]></b:skin> dan mempaste script dibawah ini sempurna dibawahnya.

Namun ada trik lebih mudah, jikalau Anda merasa kurang percaya diri bertamu dengan halaman HTML. Kita pilih tab Sesuikan yang sempurna disebelah tab Edit HTML, dimana tampilannya lebih interaktif.

Setelah itu, pilihan selanjutnya ialah Tindak Lanjut dan Tambahkan CSS. Pada kotak isian CSS, masukkan script dibawah ini.

/* -- bloGoooblok.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:hkelewat / over { 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:hkelewat / over { 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 }

Tarus dimana saja. Namun jikalau telah banyak menyimpan script CSS didalamnya, pilihlah kawasan dibagian bawah. Lihat Gambar.

Setelah itu simpan dan kembali ke dhasbor. Setiap kali ingin menampilkan tombol Demo dan Download pada postingan, sisa memasukkan script dibawah ini kedalam postingan dengan mode HTML.

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

Kode berwarna glamor pada script diatas silahkan ubah dengan halaman demo yang telah Anda buat. Anda juga dapat menghapus tombol Demo atau Download jikalau ingin menampilkan satu saja. Caranya hapus satu baris dari <li> hingga </li>.

Jika punya pertanyaan, tak perlu sungkan untuk meninggalkan komentar dibawah ini. Semoga bermanfaat.

Tweet