Membuat Tombol Demo dan Download Keren Dengan CSS

Bloggerisn - Membuat Tombol Demo dan Download Keren Dengan CSS. Hai sahabat blogger, berjumpa lagi dengan Saya di artikel ini. Siapa si yang tidak mau Blognya terlihat profesional? semuanya pasti mau blognya terlihat profesional, termasuk pada tombol/button yang di terapkan di blognya.

Nah kali ini Saya akan memberikan cara membuat tombol demodan tombol download pada blog Sobat menjadi lebih profesional dan menarik.

Baca Juga :

1. Memasang Tombol Demo & Download Keren Ala Slide

Demo tampilan :

Live Demo

Download

CATATAN!: Blog sobat harus sudah terpasang Font Awesome. Jika Sobat belum menerapkannya, sobat bisa mengunjungi artikel berikut ini : Cara Memasang dan Menggunakan Font Awesome di Blog

Jik blog sobat sudah menerapkan font awesome silahkan langsung kepada cara penerapan. Oke sekarang adalah waktunya penerapan pada blog sobat.

Cara Penerapan:

1. Login ke Blogger Sobat

• Dashboard.
• Pilih Template.
• Klik Edit HTML.

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

/* CSS Tombol Demo dan Download Bloggerisn */
#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 / Save Template Sobat
5. Masih belum selesai, selanjutnya adalah tahap dimana menerapkannya pada postingan Sobat.

Keterangan : Terapkan kode dibawah pada tab HTML bukan Compose

• Jika Sobat 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 Sobat 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. Langkah terakhir adalah, ganti tanda # dengan link demo dan download yang Sobat inginkan

Nah itulah Cara Membuat Tombol Demo dan Download Keren Dengan CSS, semoga berguna dan bermanfaat untuk blog Sobat, sampai jumpa

http://bloggerisn.blogspot.com/2015/05/membuat-tombol-demo-dan-download-keren.html

Share ya Sobat Jika Artikel Diatas Membantu :)

Suka Dengan Artikel Diatas? Bagikan Gratis:

• Tweet
• Share
• Share
• Share
• Share

Irham Satriawan

Saya adalah seorang yang sangat menyukai design dan juga dunia internet sobat bisa memanggil saya (CT), dengan blog ini semoga saya akan berbagi pengalaman saya kepada sobat semua.

Artikel Menarik Lainnya