Membuat tombol Demo dan Download dengan icon font Awesome

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:

DemoDownload

List LengkapCara 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

Membuat tombol Demo dan Download dengan icon font Awesome 2014-05-20T05:38:00-07:00 Rating: 4.5 Diposkan Oleh: Unknown