Cara Membuat CSS3 Download Button Otomatis

Unknown

blogging, cari duit

Tuesday, 29 July 2014

3 Komentar

Kamu pengin bisa buat download Button otomatis untuk blog download kamu? sebenarnya sangat simple banget untuk membuat tombol download yang kamu inginkan. tapi memang kadang keterbatasan kita memahami HTML aja yang membuat kita males bikin yang kaya gini.

Yok bro, hari ini kiata bakal membahas tutorial gimana sih caranya merancang dan menyesuaikan tombol Download yang mengagumkan dalam beberapa menit. tombol yang bakal ane kasih ini bakal disimpan di blog kamu sebagai gambar dan toggle

dan kali ini kita akan membahas tentang memperindah blog menggunakan CSS, termasuk beberapa CSS3!. mengapa kita pakai CSS3? Kita semua tahu kok alasannya. mengapa? karena CSS3 itu mudah diedit, cross-platform alias bisa digunakan lintas platform, ringan, mudah diakses.

tapi toh sekarang sebuah link seperti download button seperti itu dapat membuat kita lebih kaya jika button tersebut di isi link dari sponsor kita. bayangkan aja jika pengunjung blog kamu klik di gambar download button nya , kemudian dikali 100 orang aja setiap hari, berapa penghasilan yang kamu miliki jika 1 kliknya berharga $0.05 dolar aja? hmm... menggiurkan bukan??


Cara Membuat CSS3 Download Button

• masuk blogger
• template--> edit HTML
• cari <b:skin> (CTRL+F kemudian masukkan <b:skin>)
• Copy link dibawah ini dibawahnya.....

/* === Button Style === */
.mbt-button {
background-color: #0C464A;
background-image: -o-linear-gradient(bottom, #0C464A 0%, #276268 100%);
background-image: -moz-linear-gradient(bottom, #0C464A 0%, #276268 100%);
background-image: -webkit-linear-gradient(bottom, #0C464A 0%, #276268 100%);
background-image: -ms-linear-gradient(bottom, #0C464A 0%, #276268 100%);
background-image: linear-gradient(to bottom, #0C464A 0%, #276268 100%);
border: 1px solid #0C464A;
border-bottom: 1px solid #0C464A;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #0D5357;
-webkit-box-shadow: 0 1px 0 0 #0D5357 inset ;
-moz-box-shadow: 0 1px 0 0 #0D5357 inset;
-ms-box-shadow: 0 1px 0 0 #0D5357 inset;
-o-box-shadow: 0 1px 0 0 #0D5357 inset;
color: white;
font-weight: bold;
padding: 8px 25px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}
.mbt-button:hover {
opacity:.85;
cursor: pointer;
}
.mbt-button:active {
border: 1px solid #0D5357;
box-shadow: 0 0 10px 5px #0D5357 inset;
-webkit-box-shadow:0 0 10px 5px #0D5357 inset ;
-moz-box-shadow: 0 0 10px 5px #0D5357 inset;
-ms-box-shadow: 0 0 10px 5px #0D5357 inset;
-o-box-shadow: 0 0 10px 5px #0D5357 inset;
}

• Save dan lihat blog kamu

nah kemudian sekarang waktunya untuk memanggil HTML CSS3 di atas....

normalnya kodenya adalah seperti ini

<a href="Here is Your Page Link"> CSS3 Button </a>

selamat berburu Klik....