Banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah sahabat lain bagikan, kali ini saya akan membuat tutorial cara membuat tombol demo dan download ala blog ini, tutorialnya sih lumayan sulit bagi pemula seperti saya, hehe.
Biasanya tombol ini digunakan untuk berbagi template, atau link download saja. Demonya lihat tombol dibawah ini:
Langsung saja ketutorial nya:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Tambahkan kode di bawah ini sebelum/di atas ]]></b:skin>
/* Tombol Demo & Download ala Blog Krizeer4. Masukan font Oswald di bawah <head>
----------------------------------------------- */
.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}
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>5. Untuk menambahkan ikon disamping link button, tambahkan kode dibawah ini di atas </head>
<link href='netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>6. Simpan template
Untuk menggunakannya, lihat cara dibawah:
HTML:
<div style="text-align: center;">
<ul class="kotak-demo-download">
<!-- Demo -->
<li><a class="demo" href="http://yoga-tc.blogspot.com/" target="_blank"><i class="icon-chevron-right"></i> Demo</a></li>
<!-- Download -->
<li><a class="download" href="http://yoga-tc.blogspot.com/" target="_blank"><i class="icon-download-alt"></i> Download</a></li>
</ul>
</div>
<div class="clear">
</div>
Untuk lebih lengkapnya/lebih jelasnya tentang font awsome silahkan masuk ke: http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html
Tidak ada komentar:
Posting Komentar