Cara Menciptakan 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 akan memasang tombol Demo dan Download dengan cara mudah. Tombol yang akan kita buat tampilannya menyerupai dibawah ini :

• Demo
• Download

Pemasangan dengan cara 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 cara lebih mudah, kalau 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: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 }

Tarus dimana saja. Namun kalau telah banyak menyimpan script CSS didalamnya, pilihlah daerah 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 ganti dengan halaman demo yang telah Anda buat. Anda juga dapat menghapus tombol Demo atau Download kalau 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.



Sumber https://www.blogooblok.com/

Share this post