Cara Memasang CSS3 Buttons Untuk Blogger, Tutorial Belajar Blog Kali Ini Mau berbagi Tetang Beberapa Tombol Menarik Dengan CSS3, Mau Lihat Demonya ? Demo
Gimana ? Menarikkan, Tombol Ini Ada Beberapa Macam, Ada Download, Play, Like, dll .CSS3 Buttons Untuk Blogger Bisa Digunakan Untuk Tombol Download Dan Lain-Lain
Berikut Tutorialnya :
*Login Blogger
*Klik Template
*Edit HTML
*Centang Expand Template Widget
*Cari Kode Ini ]]></b:skin>
*Copy Kode Dibawah, Lalu Paste Diatas ]]></b:skin>
.button {
display: inline-block; white-space: nowrap; background-color:
#ccc; background-image: -webkit-gradient(linear, left top, left bottom,
from(#eee), to(#ccc)); background-image: -webkit-linear-gradient(top,
#eee, #ccc); background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc); filter:
progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee',
EndColorStr='#cccccc'); border: 1px solid #777; padding: 0 1.5em;
margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration:
none; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius:
.2em; -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0
rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8)
inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px
rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); } .button:hover {
background-color: #ddd; background-image:
-webkit-gradient(linear, left top, left bottom, from(#fafafa),
to(#ddd)); background-image: -webkit-linear-gradient(top, #fafafa,
#ddd); background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd); filter:
progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa',
EndColorStr='#dddddd'); } .button:active {
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0
0 4px 2px rgba(0,0,0,.3) inset; box-shadow: 0 0 4px 2px rgba(0,0,0,.3)
inset; position: relative; top: 1px; } .button:focus { outline: 0;
background: #fafafa; } .button:before { background: #ccc;
background: rgba(0,0,0,.1); float: left; width: 1em;
text-align: center; font-size: 1.5em; margin: 0 1em 0 -1em; padding: 0
.2em; -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0
rgba(255,255,255,.5); -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0
0 rgba(255,255,255,.5); box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0
rgba(255,255,255,.5); -moz-border-radius: .15em 0 0 .15em;
-webkit-border-radius: .15em 0 0 .15em; border-radius: .15em 0 0 .15em;
pointer-events: none; } /* Hexadecimal entities for
the icons */ .add:before { content: "\271A"; } .edit:before { content:
"\270E"; } .delete:before { content: "\2718"; }
.save:before { content: "\2714"; } .email:before { content:
"\2709"; } .like:before { content: "\2764"; }
.next:before { content: "\279C"; } .star:before { content: "\2605"; }
.spark:before { content: "\2737"; } .play:before { content: "\25B6"; }
Simpan Template
Sekarang Kode HTML Pemanggilnya (Pilih Salah Satu)
<a class="button add" href="#">Add</a>Kode Itu Silahkan Ditaruh Di HTML, Baik Itu Postingan / Gadget
<a class="button delete"href="#">Delete</a>
<a class="button edit" href="#">Edit</a>
<a class="button save" href="#">Save</a>
<a class="button email" href="#">Email</a>
<a class="button like" href="#">Like</a>
<a class="button next" href="#">Next</a>
<a class="button spark" href="#">Spark</a>
<a class="button play" href="#">Play</a>
Keterangan HTML Pemanggil
<a class="button add" href="#">Add</a> : Tombol Add<a class="button delete"href="#">Delete</a> : Tombol Delete<a class="button edit" href="#">Edit</a> : Tombol Edit<a class="button save" href="#">Save</a> : Tombol Save<a class="button email" href="#">Email</a> : Tombol Email<a class="button like" href="#">Like</a> : Tombol Like<a class="button next" href="#">Next</a> : Tombol Next<a class="button spark" href="#">Spark</a> : Tombol Spark<a class="button play" href="#">Play</a> : Tombol Play
Contoh :
Juka Sobat Ingin Menggunakan Tombol Download Maka Begini Pemanglannya HTML
<a class="button save" href="URL Tujuan">Download</a>Contoh Ada Dibawah Ini
Add Delete Edit Save Email Like Next Spark Play
