Membuat tombol Demo dan Download dengan icon font Awesome ~ blog sepot

Selamat malam sobat,.. Apa kabar nie,.?? HeHeHee
sudah 2 hari saya gak memposting tutorial rasa nya kayak gimana gitu,.. wkwkwwkkk
Kalau sebelum nya saya memposting tutorial cara membuat tombol demo & download dengan CSS
Untuk malam ini Membuat tombol Demo & Download dengan icon font Awesome.Sebener nya tutorial ini sudah popular atau sudah banyak yang membagikan,

Fungsi tombol ini biasanya digunakan untuk sobat yang suka berbagi template, atau di buat link Demo & Download saja.

Untuk Demonya seperti ini:

Demo Download

List Lengkap Cara menggunakan

Jika sobat berminat untuk membuat tombol seperti diatas itu silahkan sobat

Simak langkah² dibawah ini:

1. Login ke Blogger

2. Dashboar » klik template » edit HTML

3. Tambahkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

/* Tombol Demo & Download Blog Irvan Efendy
----------------------------------------------- */
.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: none;border-radius:2px;
padding: 8px 19px !important; 
background: #E55E48; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}
.download {
border: none;border-radius:2px;
padding: 8px 19px !important; 
background: #2ecc71; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}
.demo:hover { 
background: #454242;
text-decoration:none 
}
.download:hover { 
background: #454242;
text-decoration:none 
}
.download:before { 
content : "\f019"; 
font-family : FontAwesome; 
font-weight : normal; 
padding :11px 11px 9px !important; 
background : #27ae60; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 16px; 
}

.demo:before { 
content : "\f108"; 
font-family : FontAwesome; 
font-weight : normal; 
padding : 11px 11px 9px !important; 
background : #c0392b; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 16px; 
}

4. Untuk menambahkan ikon disamping link button, tambahkan kode dibawah ini tepat di atas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

5. Simpan template

Untuk penggunaan nya Copas kode di bawah ini kemudian paste di halaman posting sobat (mrnggunakan mode HTML)

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://irvan-efendy.blogspot.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://irvan-efendy.blogspot.com" target="_blank">Download</a></li>
</ul></div>
<div class="clear"></div>

Semoga tutorial ini bermanfaat buat sobat,..
jangan lupa corat coret di bawah ya agan²,... heheheee

Terima kasih telah membaca artikel tentang Membuat tombol Demo dan Download dengan icon font Awesome di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.