Cara Membuat Tombol Demo dan Download ~ Koran Teknologi

Koran Teknologi - Cara Membuat Tombol Demo dan Download. Hai Kortekers, setelah berlama-lama posting tentang teknologi, kali ini mimin mau memberikan tutorial untuk blog :D. widih bener banget, yups cara membuat tombol demo dan download ala css :D. Tapi tombol demo dan download yang akan mimin berikan berbeda lho, karna menggunakan font awasome :D jadi simak baik-baik ya.

Nah mau tau caranya ? nih mimin kasih tau :p

1. Login ke Blogger kalian lalu masuk kedalam

Dashboard
Pilih Template
Klik Edit HTML

2. Pertama yang harus kalian lakukan adalah menerapkan CSS stylesheet Font Awesome. Letakan tepat dibawah kode <head>

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

3. Salin dan letakan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>


/* CSS Tombol Demo dan Download by Koran Teknologi */
#wrap {
 margin:20px auto;
 text-align:center;
}
#wrap br {
 display:none;
}
.btn {
 display:inline-block;
 position:relative;
 font-family:'Source Sans Pro', Helvetica, sans-serif;
 background:#3b3f48;
 padding:6px 14px;
 font-size:14px;
 margin:0 3px;
 color:#fff!important;
 border-radius:3px;
 border:none;
 text-transform:uppercase;
 text-decoration:none;
 transition:all 0.3s ease-out;
}
.btn.down {
 background:#3b3f48;
 color:#fff!important;
}
.btn.down:hover,.btn.down:active,.btn:hover,.btn:active {
 background:#fc4f3f;
 color:#fff;
}
a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active {
 color:#fff;
}
.btn i {
 margin-left:10px;
 font-weight:normal;
 font-family:FontAwesome;
}

4. lalu Simpan Template / Save Template
5. Selanjutnya adalah tahap dimana menerapkannya pada postingan kalian

Keterangan : Terapkan HTML berikut pada tab HTML bukan ~~Compose~~

Jika Kalian menggunakan settingan Gunakan tag <br>

<div id="wrap">
<a href="#" class="btn" rel="nofollow" target="_blank">Live Demo <i class="fa fa-paper-plane"></i></a><br>
<a href="#" class="btn down" rel="nofollow" target="_blank">Download <i class="fa fa-download"></i></a><br>
</div>

Jika Kalian menggunakan settingan Tekan "Enter" untuk baris baru


<div id="wrap">
<a href="#" class="btn" rel="nofollow" target="_blank">Live Demo <i class="fa fa-paper-plane"></i></a>

<a href="#" class="btn down" rel="nofollow" target="_blank">Download <i class="fa fa-download"></i></a>
</div>

6. Selanjutnya ganti tanda # dengan link demo dan download Kalian dan selesai :D

Nah itulah Cara Membuat Tombol Demo dan Download pada blog, semoga membantu kalian ya kortekers :D

http://koran-teknologi.blogspot.com/2015/04/cara-membuat-tombol-demo-dan-download-di-blog.html

Koran Teknologi

Cara Membuat Tombol Demo dan Download

Related Post