Cara Menciptakan Tombol Demo Dan Download Keren Di Blog
Assalamualaikum...
KENEONO – Dikesempatan kali ini aku akan share Cara Membuat Tombol Demo dan Download di Blog. Mungkin sebagian sahabat pernah menemui tombol download file atau tombol demo pada blog yang keren responsive disini aku akan menunjukkan tutorial cara membuatnya, dengen menambahkan tombol demo dan download yang keren ini pada blog sahabat akan menunjukkan tampilan yang menarik dan menciptakan pungunjung sangat gampang untuk mendownload sebuat file pada tampilannya yang terperinci dan keren pastinya. Seperti yang ada pada blog ini.
Berikut Cara Membuat Tombol Demo dan Download Pada Blog Yang Responsive :
- Pertama silakan sahabat masuk dashboard blogger dan pilih sajian “Tema” terus pilih “Edit HTML”.
- Selanjutnya silakan cari instruksi <style type='text/css'> dengan Ctrl+F lebih gampang nyarinya, lalu copy script dibawah ini dan taruh dibawahnya instruksi <style type='text/css'>.
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px; padding:2px;font-size:14px;clear:both;} .button ul {margin:0;padding:0} .button li{display:inline;margin:5px;padding:0;list-style:none;} .demo,.download {padding:10px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:'Open Sans',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;opacity:0.9;transition:all 0.3s ease-out;} .demo {background-color:#5a6269;} .download {background-color:#1E90FF;} .demo:hover {background-color:#ff9e47;color:#fff;opacity:1;} .download:hover {background-color:#5a6269;color:#fff;opacity:1;} .demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} .download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} - Kemudian “Simpan” templatenya.
- Kalau sudah kita tinggal pasang tombol Demo dan Downloadnya di postingan artikel dengan mode “HTML” bukan
Compose/ atau taruh sesuka sobat. Copy script dibawah ini.
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="URL DEMO DISINI" target="_blank" title='Demo'>Demo</a></li> <li><a class="download" href="URL DOWNLOAD DISINI" target="_blank" title='Download'>Download</a></li> </ul> </div> <div class="clear"></div> - Keterangan : goresan pena “URL DEMO DISINI” ganti dengan link URL tujuan, dan juga “URL DOWNLOAD DISINI”
- Jika tidak tampil dengan sempurnya atau icon Demo & Download tidak tampil tambahkan instruksi dibawah ini diatas tad </head>.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> - Selesai, silakan coba lihat hasilnya.
Sekian artikel kali ini perihal Cara Membuat Tombol Demo dan Download keren di tengah artikel blog responsive, agar dapat bermanfaat untuk sahabat semua.
Kunjungi terus blog keneono untuk mendapat artikel menarik lainnya. Terimakasih.
Wassalamualaikum...