Membuat Tombol Demo/Download Dengan CSS Dalam Postingan


Untuk membuat tombol demo dan tombol download dengan css, sangat mudah tentunya. Custom button css ini berguna untuk membuat link download bagi anda yang mempunyai file seperti mp3 atau download template dan lain-lain yang tentunya sangat berguna dan memudahkan pengunjung dalam mendownloadnya. Untuk membuat/memasang link download dengan gambar, coba lihat juga postingan saya sebelumnya mengenai cara memasang link download di blog. Tutorial ini nantinya akan berlaku seterusnya karena didalam template sudah terpasang kode css untuk link download dan demo. Nah jika suatu saat anda akan mempergunakan lagi anda tinggal posting saja tanpa harus edit template lagi di bagian cssnya.

Tombol Demo/Download Dengan Css Dalam Postingan

Untuk membuat tombol demo atau tombol download dengan css lihat caranya :
1. Masuk ke Blogger
2. Klik Templates
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

.tombol a{
background-color: #222;
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
background-image: -moz-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
background-image: -ms-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
background-image: -o-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
background-image: linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
border: 1px solid #111;
color: #c6c6c6;
float: left;
font: bold 14px/30px sans-serif;
height: 30px;
margin: 10px 20px;
padding: 0 15px;
position: relative;
text-decoration: none;
text-shadow: 0 -1px 1px hsla(0,0%,0%,.8);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2);
-moz-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2);
box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2);
}
.tombol a:hover, .tombol a:focus {
background-color: #242424;
color: #f6f6f6;
-webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2);
-moz-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2);
box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2);
}
.tombol a:hover:after, .tombol a:focus:after {
background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
background-image: -moz-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
background-image: -ms-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
background-image: -o-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
background-image: linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
background-position: 50% 0%;
background-size: 200% 200%;
content: '';
display: none;
height: 1px;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.tombol a:hover:after, .tombol a:focus:after {
display: block;
}
.tombol a:before {
background: #363636; bottom: -8px; content: '';
left: -8px;
position: absolute;
right: -8px;
top: -8px;
z-index: -1;
-webkit-border-radius: 6px; -moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px hsla(0,0%,100%,.3), inset 0 1px 1px hsla(0,0%,0%,.4), inset 0 0 5px hsla(0,0%,0%,.2);
-moz-box-shadow: 0 1px 1px hsla(0,0%,100%,.3), inset 0 1px 1px hsla(0,0%,0%,.4), inset 0 0 5px hsla(0,0%,0%,.2);
box-shadow: 0 1px 1px hsla(0,0%,100%,.3), inset 0 1px 1px hsla(0,0%,0%,.4), inset 0 0 5px hsla(0,0%,0%,.2);
}
.tombol a:active {
background-color: #202020; color: #b6b6b6;
line-height: 32px;
-webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.1), inset 0 1px 4px hsla(0,0%,0%,.8);
-moz-box-shadow: 0 1px 0 hsla(0,0%,100%,.1), inset 0 1px 4px hsla(0,0%,0%,.8);
box-shadow: 0 1px 0 hsla(0,0%,100%,.1), inset 0 1px 4px hsla(0,0%,0%,.8);
}
.tombol a:active:after {
display: block;
left: 1px;
opacity: .5;
right: 1px;
top: 31px;
}

6. Selesai, simpan

Kode pemanggil untuk tombol demo / download didalam postingan blog :

<div class="tombol">
<a href="#" target="_blank">Demo</a></div>

dan

<div class="tombol">
<a href="#" target="_blank">Download</a></div>


Kalau mau digabung dan disejajarkan antara tombol demo dan download kodenya seperti ini :

<table><tbody>
<tr>
<td><div class="tombol">
<a href="#" target="_blank">Demo</a></div>
</td>
<td><div class="tombol">
<a href="#" target="_blank">Download</a></div>
</td>
</tr>
</tbody></table>

Catatan :
1. Untuk meletakkan kedua tombol tersebut di dalam postingan harus pada posisi HTML, bukan compose
2. tanda pagar (#) ganti dengan link yang akan menjadi tempat link download dan link demo

Nah sudah paham bukan?, ok saya akhiri saja tutorial membuat tombol demo/download menggunakan css, selamat mencoba.

0 komentar:

No Spam
And
Live Link