Cara Mudah Membuat Button Download Sederhana

Sudah lama nich gak bagi-bagi tutorial blogger. Kali ini saya akan memberi ilmu tentang blogger kepada sobat blogger, sebenernya tutorial ini sudah beredar di internet dan sudah tidak asing lagi tapi demi melengkapi tutorial di blog saya, maka saya akan memposting buat sbat blogger yang masih newbie. Sudah gak perlu banyak bicara, silahkan di ikuti langkah-langkahnya di bawah ini :

Cara Ke 1

• masuk aku blogger sobat
• pilih template --> edit HTML --> lanjutkan
• jangan lupa centang expand widget, lalu cari kode ]]></b:skin>, lalu copas code css berikut tepat di atas code ]]></b:skin>

/* download button */
.download { -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7; -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7; box-shadow:inset 0px 1px 0px 0px #bbdaf7; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #84bbf3; display:inline-block; color:#ffffff; font-family:arial; font-size:16px; font-weight:bold; padding:11px 30px; text-decoration:none; text-shadow:1px 1px 0px #528ecc; }

.download:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5; }

.download:active { position:relative; top:1px; }

/* demo button */
.demo { -moz-box-shadow:inset 0px 1px 0px 0px #fce2c1; -webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1; box-shadow:inset 0px 1px 0px 0px #fce2c1; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) ); background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25'); background-color:#ffc477; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #eeb44f; display:inline-block; color:#ffffff; font-family:arial; font-size:16px; font-weight:bold; padding:11px 50px; text-decoration:none; text-shadow:1px 1px 0px #cc9f52; }

.demo:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) ); background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477'); background-color:#fb9e25; }

.demo:active { position:relative; top:1px; }

• jika sudah maka save template sobat
• jangan buru-buru meilhat hasilnya, sekarang tinggal memberi sentuhan terakhir
• pada saat sobat membuat postingan baru yang berisi link download maka tinggal ganti menjadi HTML dan copas code berikut

<a href="#" class="demo">demo</a>
<a href="#" class="download">download</a>

Ganti tanda # warna biru dengan link download sobat, dan sobat juga bisa membuat button sendiri dengan button generator di sini www.cssbuttongenerator.com

Cara Ke 2
tetap sobat lakukan langkah-angkah diatas, hilangkan langah ke tiga, tapi langsunglah sobat membuat postingan yang berisi link download dan rubah menjadi pengaturan HTML dan masukkan code berikut :

<a href="http://www.ziddu.com/download/19044499/tatelustyle.rar.html" target="_blank"><img alt="Download Button" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTlOzQnHYEa2-mwTwAivRZxvf5YwUFDdcgvE9TWKOWuQEut8wIpfEzVtdBpck1BFMj6Xfsu_A7Lqmlpy_wiJVD1YV5nla1hTVHnUiIjhI96ydel1OdZUH67pnV_O2Aodr7vS6onBjFxxi8/s1600/download-button.jpg" /></a>

selamat mencoba, dan sukse selalu,,,,,,,,,

Bagi sobat blogger yang ingin download tutorial ini, silahkan download filenya disini :

Sumber http://christiantatelu.blogspot.com/, http://de-henda.blogspot.com/

Artikel Terkait :

Posted in: Blogger