Cara Menciptakan Tombol Download Dan Demo Di Blogger
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.
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 saat diklik.
Dan kali ini tombol yang akan dibahas adalah 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 hidangan Tema > klik tombol Edit HTML > Tambahkan aba-aba CSS dibawah ini sebelum aba-aba ]]></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 aba-aba 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 aba-aba "#" dengan url yang diinginkan.
Untuk demonya sanggup dilihat pada gambar di atas dalam postingan ini.
Sekian untuk artikel kali ini, biar sanggup terapkan pada blog anda dengan sukses. Sumber https://www.tikusmales.com/
