Membuat Tombol Demo dan Download dengan CSS di Blogger

mekz

blogging

6 April 2014

2 Komentar

Teman-teman blogger pasti sudah tidak asing dengan ulasan yang akan saya suguhkan kali ini, yaitu tentang tips blogging bagaimana caranya membuat tombol atau button Demo dan Download untuk konten yang biasanya teman-teman bagikan kepada pembaca blog kalian.

Sedikit berbeda untuk ulasan kali ini button atau tombol Demo dan Download bukanlah berupa image atau gambar. Tombol Demo dan Download kali ini full atau murni adalah sentuhan dari CSS (cascading style sheet) yang tentunya memiliki kelebihan tersendiri.

Berikut di bawah ini adalah contoh dari tombol yang akan saya posting pada ulasan kali ini.

Demo Download

Untuk dapat menggunakan tombol Demo dan Download menggunakan CSS seperti di atas, silahkan kamu ikuti trik singkat berikut.

1. Silahkan kamu pergi ke menu Edit/HTML dan tepat di atas kode ]]></b:skin> tambahkan kode CSS yang ada di bawah ini.

/* -- Tombol demo dan download thesigit.net --*/
.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 }

2. Setelah kode di atas kamu pasang, jangan lupa kamu "Save Template". Untuk melihat hasilnya berikut ini adalah cara pemasangan tombol Demo dan Download tersebut pada postingan.

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

Ingat! Jika cara pemasangan tidak bekerja dengan baik pada tab compose, silahkan kamu coba melalui tab HTML pada postingan.

Selain itu kamu juga bisa menggunakan cara yang lebih sederhana seperti yang sering saya pakai, seperti yang ada di bawah ini.

<a class="demo" href="http://www.thesigit.net" target="_blank">Demo</a>
<a class="download" href="http://www.thesigit.net" target="_blank">Download</a>

Silahkan kamu coba salah satu dari kedua cara di atas, jangan lupa untuk mengganti link atau url di atas ke target url tujuanmu.

Semoga ulasan singkat saya kali ini dapat berguna dan bermanfaat bagi teman-teman yang ingin memasang tombol demo dan download dengan CSS di blogger. Kembali saya ingatkan untuk jangan sungkan membagikan artikel yang bermanfaat melalui tombol share yang ada di bawah ini. Terima kasih.