Membuat Tombol Demo Dan Download Keren Di Blog

Kali ini saya akan membagikan informasi menarik mengenai cara membuat tombol demo dan download di blog.

Tombol demo dan download merupakan tombol yang seringkali digunakan dalam suatu website atau blog. Penggunaan tombol tersebut tentu saja akan mempercantik tampilan serta membuat pengunjung lebih mudah memahami dimana dia harus mengklik tombol demo dan download.

Ada begitu banyak artikel mengenai pembuatan tombol demo dan download, begitu juga dengan desainnya terdapat berbagai macam desain, baik yang jelek, unik maupun cantik. Selain itu tombol demo juga ada yang memiliki efek pada tampilannya ketika diklik.

Dan kali ini tombol yang akan dibahas yaitu tombol yang dijamin keren dan unik yang tentu saja akan mempercantik tampilan blog anda.

Cara Membuat Tombol Demo Dan Download Keren Di Blog


Pertama buka Blogger > pilih menu Tema > klik tombol Edit HTML > Tambahkan kode CSS dibawah ini sebelum kode ]]></b:skin> atau </style>

/* Tombol Demo */
.wrap {text-align: center;}
.btn{background:#23a6d5;color:#fff;border-radius:5px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.1);box-shadow:0 5px 10px rgba(0,0,0,0.1);-webkit-transition:-webkit-box-shadow .5s;transition:-webkit-box-shadow .5s;transition:box-shadow .5s;transition:box-shadow .5s,-webkit-box-shadow .5s;transition:box-shadow .5s,-webkit-box-shadow .5s;overflow:hidden;display:inline-block;position:relative;cursor:pointer;padding:10px 20px;margin:0 20px}.btn:hover{-webkit-box-shadow:0 10px 10px rgba(0,0,0,0.2);box-shadow:0 10px 10px rgba(0,0,0,0.2)}.btn:before{font-family:'FontAwesome';margin-right:10px;display:block;float:left}.btn.demo2:before{content:'\f06e'}.btn.download2:before{content:'\f019'}.btn.contact:before{content:'\f003'}.btn.demo:before{content:&#39;\f06e&#39;}.btn.download:before{content:&#39;\f0ed&#39;}.btn.contact:before{content:&#39;\f003&#39;}

Kemudian silahkan simpan template.

Untuk pemasangan / penerapan di artikel, tambahkan kode HTML dibawah ini di dalam postingan pada tab HTML.

Tombol 1

<div class="wrap">
<a class="btn demo" href="#" rel="nofollow" style="color: white;" target="_blank">Demo</a> <a class="btn download" href="#" style="color: white;" target="_blank">Download</a></div>


Tombol 2

<div class="wrap">
<a class="btn demo2" href="#" rel="nofollow" style="color: white;" target="_blank">Demo</a> <a class="btn download2" href="#" style="color: white;" target="_blank">Download</a> <a class="btn contact" href="#" style="color: white;" target="_blank">Contact</a> </div>


Silahkan ganti kode "#" dengan url yang diinginkan.

Sekian untuk artikel kali ini, semoga dapat terapkan pada blog anda dengan sukses.

0 Response to "Membuat Tombol Demo Dan Download Keren Di Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel