Demo dan Download | Pada kesempatan kali ini saya akan memagikan cara membuat tombol "Demo" dan "Download" yang sudah sahabat lain bagikan, kali ini saya akan membuat tutorial cara membuat tombol demo dan download dengan font awesome. Sebenarnya banyak sobat blogger lainnya yang mengeshare tombol demo dan download ini, tetapi saya sedikit memodifikasinya sebagus mungkin.Biasanya tombol ini digunakan untuk berbagi template, atau link download saja.
Penampakannya seperti ini :
Berikut Tutorialnya
Langkah 1 : Tambahkan script diatas
Langkah 2 : Tambahkan kode di bawah ini sebelum
Langkah 3 : Untuk penggunaannya, buat kode seperti ini ketika membuat postingan (gunakan mode
Penampakannya seperti ini :
Berikut Tutorialnya
Langkah 1 : Tambahkan script diatas
</head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Langkah 2 : Tambahkan kode di bawah ini sebelum
]]></b:skin>
.button{float:left;list-style:none;text-align:center;width:100%;margin:5px 0;padding:0;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo{border-radius:3px;padding:8px 12px;background:#e74c3c;color:#fff!important;transition:background-color 1s 0s ease-out}
.download{border-radius:3px;padding:8px 12px;background:#3498db;color:#fff!important;transition:background-color 1s 0s ease-out}
.buton a{color:#fff}
.demo:hover{background:#c0392b;text-shadow:0 0 1px #222;color:#fff}
.download:hover{background:#2980b9;text-shadow:0 0 1px #222;color:#fff}
.download:before{content:"\f019";font-family:FontAwesome;font-weight:normal;padding:8px;background:#2980b9;margin-left:-12px;margin-right:6px;border-radius:3px 0 0 3px;font-size:16px}
.demo:before{content:"\f06e";font-family:FontAwesome;font-weight:normal;padding:8px;background:#c0392b;margin-left:-12px;margin-right:6px;border-radius:3px 0 0 3px;font-size:16px}
Langkah 3 : Untuk penggunaannya, buat kode seperti ini ketika membuat postingan (gunakan mode
HTML
)<ul class="button">
<li><a class="demo" href="http://microsoft-cyber.blogspot.com/" rel="nofollow" target="_blank">Demo</a></li>
<li><a class="download" href="http://microsoft-cyber.blogspot.com/" rel="nofollow" target="_blank">Download</a></li>
</ul>
Lebih Lanjut
- Ganti icon sesuai keinginan sobat, icon dapat di cari di sini
1 comments:
Click here for comments:2thumbup
Berkomentarlah dengan sopan.
Berkomentarlah sesuai topik yang dibahas #ThinkHIGH! ^_^ ConversionConversion EmoticonEmoticon