Memasang 2 Simple Button Flat UI di Posting Blog

Untuk membuat button (tombol) di blog sangatlah mudah, karena sudah dikatakan mudah artinya tidak hanya sang ahli saja yang dapat membuatnya, tetapi para blogger yang terbilang masih dalam tahap pembelajaran pun juga bisa dengan mudah membuatnya.

Saya merancang kedua tombol ini sesederhana dan seunik mungkin agar kiranya dapat merujuk perhatian para pengunjung pada saat melihat kedua tombol nan indah dan flat design ini.

Banyak sekali pengarahan pembuatan button yang dibagikan di internet dan kali ini saya akan memberikan tutorial cara Memasang 2 Simple Button Flat UI di Posting Blog dengan efek yang lumayan bagus serta ringan dan sangat menarik.

Tampilan tombol Flat UI dari Librasbr.Com

Tahap Memasang 2 Simple Button Flat UI di Posting Blog


Note: Sebelumnya terapkan CSS stylesheet Font Awesome berikut ini pada HTML blog, letakkan di bawah kode <head>

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

1. Masuk ke Dashboard Blog, pilih Template dan masuk ke Edit HTML

2. Salin dan letakkan kode CSS berikut ini tepat di atas kode ]]></b:skin> atau </style>

/* CSS Simple Button Flat UI by Libra Yanada */
#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;
}

Simpan Template/Save Template

3. Selanjutnya merupakan tahap penerepan HTML untuk button pada blog post

Keterangan : Terapkan HTML berikut di HTML editor (bukan Compose)

<div id="wrap">
<a class="btn down" href="#" rel="nofollow" target="_blank">Button 1 <i class="fa fa-paper-plane"></i></a><br />
<a class="btn down" href="#" rel="nofollow" target="_blank">Button 2 <i class="fa fa-file"></i></a></div>

Terakhir ganti bagian tulisan yang ditandai (mark) dengan judul button dan pranala milik Anda.

Update

Apabila text style Anda menampilkan garis bawah (underline), cari kode text-decoration:underline di Edit HTML (template) dan ganti kata 'underline' dengan 'none'.
Tag: CSS, HTML

Berlangganan: Masukkan e-mail Anda untuk memperoleh kiriman artikel teraktual dari librasbr.com tepat di pesan kotak masuk.

feedburner

10 Komentar untuk "Memasang 2 Simple Button Flat UI di Posting Blog"

avatar

Mantap keren template ente sob . kunbal yak bro

avatar

Ini template sang seo premium gan, hasil upgrade dari saya sendiri, jadi mirip seperti milik kang mousir.

avatar

Mantap artikelnya mas... izin coba untuk kode script di atas.. semoga bisa dipakai di blog saya...
sukses selalu...

avatar

Silakan dicoba mas, sukses juga dan semoga berhasil. ;)

avatar

Makasih sob, sangat bermanfaat. Ini juga udah tak pasang dan keren

avatar

terimakasih mas, sangat bermanfaat, langsung saya pasang :-bd

KETENTUAN BERKOMENTAR

↳ Berkomentarlah sesuai isi dan topik artikel
↳ Dilarang menyisipkan PRANALA (link) AKTIF