selamat datang di Blog-Mas Tedy.. nah pada kesempatan kali ini saya akan berbagi sebuah tutorial untuk membuat tombol Demo dan Download...
Hmm biasanya tombol demo digunakan untuk berbagi sebuah template.. dan untuk tombol downloadnya anda bisa memasangnya jika anda memposting sebuah artikel yang berkaitan dengan mendownload..
jika anda penasaran lihat demonya tombol di bawah ini :
nah sekarang langsung saja kita bahas..
Bagaimana Membuat Tombol Demo dan Download Keren ?
simak langkah-langkahnya :
1. Masukklah Ke Akun Blog kalian
2. Pilih Menu Dasbor Template >> Edit HTML
3. Letakkan Kode Di bawah in di atas ]]></b:skin>
/* Tombol Demo & Download Keren
----------------------------------------------- */
.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}
4. Masukkan Font Oswald di bawah <head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>
5. Untuk Menambahkan Icon gambar di sebelah tombol tambahkan kode dibawah ini diatas </head>
<link href='netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
6. Simpan
Nah Dan Untuk Cara Penggunaanya Letakkan Kode di bawah ini di kotak HTML anda saat ingin Memposting
<div style="text-align: center;"> <ul class="kotak-demo-download"> <!-- Demo --> <li><a class="demo" href="http://blog-mastedy.blogspot.com/" target="_blank"><i class="icon-chevron-right"></i> Demo</a></li> <!-- Download --> <li><a class="download" href="http://blog-mastedy.blogspot.com/" target="_blank"><i class="icon-download-alt"></i> Download</a></li> </ul> </div> <div class="clear"> </div>
Nah bagaimana..??? mudah bukan.. Hmm jika ada yang dipertanyakan silahkan anda berkomentar di bawah ini.. cukup sekian postingan dari saya mengenai Bagaimana Membuat Tombol Demo dan Downlaod Keren.. semoga apa yang saya posting dapat bermanfaat bagi kalian :D
kunjungan siang
ReplyDelete