Jquery disini

Jumat, 02 Januari 2015

Membuat Tombol Download dan Demo dengan Font Awesome

Membuat Tombol Download dan Demo dengan Font Awesome - Hai sobat blogger. Kembali lagi dengan saya disini. Kali ini saya akan memberikan sedikit tutorial. Tutorial ini adalah membuat tombol demo dan download dengan font awesome. Jangan ditanya, tombol ini sangatlah keren. Liat contohnya di bawah.
Keren kan? Tertarik? Ikuti cara di bawah ini!
1. Buka Blogger
2. Pilih Template lalu Klik Edit HTML
3. Cari kode </head>
4. Copy kode di bawah ini tepat diatas kode tadi
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
5. Cari kode ]]></b:skin>  lalu copy kode di bawah ini tepat di atas kode tadi
.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}
6. Simpan Template
 Untuk menggunakannya di posting, copy kode HTML ini di posting
<ul class="button">
<li><a class="demo" href="http://p-mahardika.blogspot.com/" rel="nofollow" target="_blank">Demo</a></li>
<li><a class="download" href="http://p-mahardika.blogspot.com/" rel="nofollow" target="_blank">Download</a></li>
</ul>
 Itu saja dari saya. Sekian dan terima kasih

Tidak ada komentar:

Posting Komentar

Artikel Populer

Diberdayakan oleh Blogger.