Cara Membuat Tombol Download Dalam Postingan Blog

Cara Membuat Tombol Button Download Atau Demo Di Blog

Bagi anda yang mempunyai blog yang berisi tentang berbagi file, seperti file musik, template atau Vidio, pasti menyediakan link download pada artikel yang di buatnya.

Supaya link tersebut menjadi lebih menarik anda bisa menggantinya dengan tombol download agar terlihat lebih profesional.

Pada kesempatan kali ini, saya akan sedikit berbagi tips cara membuat tombol download dalam postingan dengan css.

Dengan tampilannya yang keren dan unik, pastinya akan membuat para pelanggan anda akan tertarik untuk mendownloadnya.

Tetapi cara ini berkerja jika blog Anda telah terpasang Font Awesome pada template yang anda pakai.

Nah,jika anda ingin mengetahui apakah template yang anda pakai sudah memakainya, silahkan anda cari kode script di bawah ini :

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

Nah,Jika kode di atas tidak ada pada template anda, silahkan anda copy kode tersebut tepat di atas kode atau </head> tapi jika sudah ada Anda abaikan saja. 

•  1. Masuk ke akun Blogger 
•  2. Setting > Tema > Edit HTML 
•  3. Anda Cari Kode ]]></b:skin> Atau </style> lalu salin kode di bawah ini tepat di atas kode ]]></b:skin> Atau </style>.

/* CSS Button Style */.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} .button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s} .button li a.download{background:#3498db} .button li a.demo:hover,.button li a.download:hover{background:#666} .button li a.demo:active,.button li a.download:active{cursor:pointer} .button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome} .button li a.download:after{content:'\f019'}

• 4. Klik Simpan

Untukk Cara Penggunaannya :

Silahkan anda coba buat sebuah artikel dengan mode HTML bukan Compose dan salin kode script di bawah ini :

 <div style="text-align: center;"><ul class="button"><li><a class="demo" href="https://calonbloggerr.blogspot.com" target="_blank">Demo</a></li><li><a class="download" href="https://calonbloggerr.blogspot.com" target="_blank">Download</a></li></ul></div><div class="clear"></div>

• Tapi jika anda ingin menggunakan tombol download saja maka hapus kode dibawah ini :

<li><a class="demo" href="https://calonbloggerr.blogspot.com" target="_blank">Demo</a></li>

• Nah jika sebaliknya anda hanya ingin menggunakan tombol demo saja, maka hapus kode di bawah ini :

 

<li><a class="download" href="https://calonbloggerr.blogspot.com" target="_blank">Download</a></li>

contoh :

Demo

Download

Untuk hasil nya bisa anda lihat sendiri menarik bukan, tampilannya pun semakin keren,cukup sampai disini tips untuk cara membuat tombol button yang menarik dan keren , semoga bermanfaat !!