CARA MEMBUAT TOMBOL DEMO DAN DOWNLOAD KEREN

Hasil aslinya akan menjadi seperti dibawah ini:

• Demo
• Download

• Demo
• Download

Halo, biasanya para bloger meletakkan link dwonload pada postingan nya. agar link dwonload tersebut terlihat lebih cantik maka di beri tombol-tombol buton untuk link download atau demo, pembuatan tombol demo/download ini menggunakan CSS saja jadi tidak perlu lagi upload-upload gambar untuk sebagai tombol buton nya. ok langsung saja ikuti langkah di bawah ini jika anda ingin membuatnya:

Login ke akun bloger anda.
Masuk ke template lalu pilih edit HTML.
Selanjutnya cari code ]]></b:skin> atau </style>.
Letakkan CSS di bawah ini tepat di atas code ]]></b:skin> atau </style>.

/* Tombol Demo & Download ala Blog Krizeer
----------------------------------------------- */
.kotak-demo-download {
float:left;list-style:none;text-align:center;width: 100%;margin:8px 0!important;padding:0;font-size:14px;clear:both;font-family:Oswald, Open Sans, Arial, sans-serif;text-transform:uppercase;
}
.kotak-demo-download ul {
margin:0;padding:0
}
.kotak-demo-download li{
display:inline;margin:0;padding:0;
}
.demo {
border: 1px solid #d24932;border-bottom-color:#c84934;box-shadow:1px 1px 1px #aaa;padding: 7px 40px !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: 1px solid #549dd4;border-bottom-color:#4b8cbe;box-shadow:1px 1px 1px #aaa;padding: 7px 40px !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: #d94a33;box-shadow:none;border-color:#d0412a #d0412a #c43d27; 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: #4296d5;box-shadow:none;border-color:#378dcd #378dcd #2a80c0; 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}



Simpan template anda.
 
Cara pemakaian/pemanggilan:

Copy code di bawah ini lalu letakkan di postingan anda dengan mode HTML.

<div style="text-align: center;">
<ul class="kotak-demo-download">
<!-- Demo -->
<li><a class="demo" href="Link tujuan" target="_blank"><i class="fa fa-eye fa-1x"></i> Demo</a></li>
<!-- Download -->
<li><a class="download" href="Link tujuan" target="_blank"><i class="fa fa-download fa-1x"></i> Download</a></li>
</ul>
</div>
<div class="clear">
</div>

Keterangan: 

• Ganti tulisan warna kuning dengan URL tujuan.
• Kode warna Hujau adalah code icon gambar.
• Warna merah ganti dengan code icon gambar yang anda pilh 

• Pilih disini

 

 Jika anda ingin merubah Icon/gambar pata tombol buton tersebut ada terlebih dahulu harus memasang memasang Code jQuery di bawah ini di template anda.

• Cari kode </head>.
• Copy jQuery di bawah ini lalu letakkan tepat di atas code </head>.

<link href='netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

• Simpan template.

Sekian dari saya lebih dan kurang nya saya mohon ma'af.....

Credit to  http://rumahucul.blogspot.com