Hallo semuanya ketemu lagi dengan aku Admin blog draplan yang pada kesempatan ini aku akan membagikan isu menarik mengenai cara menciptakan tombol demo dan download keren di blog.
Tombol demo dan download merupakan tombol yang seringkali dipakai dalam suatu website atau blog. Penggunaan tombol tersebut tentu saja akan mempercantik tampilan serta menciptakan pengunjung lebih gampang memahami dimana ia harus mengklik tombol demo dan download.
Sebenarnya ada begitu banyak artikel mengenai pembuatan tombol demo dan download, begitu juga dengan desainnya terdapat aneka macam macam desain, baik yang jelek, unik maupun cantik. Selain itu tombol demo juga ada yang mempunyai dampak pada tampilannya dikala diklik.
Dan kali ini tombol yang akan dibahas ialah tombol yang dijamin keren dan unik yang tentu saja akan mempercantik tampilan blog anda. Silahkan sobat draplan simak :
Cara Membuat Tombol Demo Dan Download Keren Di Blog
Pertama buka Blogger > pilih sajian Tema > klik tombol Edit HTML > Tambahkan arahan CSS dibawah ini sebelum arahan ]]></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:'\f06e'}.btn.download:before{content:'\f0ed'}.btn.contact:before{content:'\f003'}
Kemudian silahkan simpan template.
Untuk pemasangan / penerapan di artikel, tambahkan arahan 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 arahan "#" dengan url yang diinginkan.
Untuk demonya sanggup dilihat pada gambar di atas dalam postingan ini.
Nah itulah sobat draplan ku sekalian, ulasan artikel wacana cara menciptakan tombol demo dan download keren, supaya ulasan yang aku bagikan diatas sanggup terapkan pada blog anda dengan sukses.
