Cara Membuat Tombol Button Download dan Demo Di Blog

Bagi anda yang sedang mancari script atau kode html untuk membuat link download di blog yang keren atau biasa disebut tombol button download berikut ini artikelnya, tidak hanya tombol download di blog anda juga bisa menggunakan script ini untuk membuat tombol demo. Dengan desain yang keren anda dapat memasang tombol download di postingan blog anda, button download atau demo harus terlihat responsive agar pengunjung situs anda dapat lebih mudah mengakses link yang ingin mereka tuju. Membuat tombol button download sering digunakan oleh blog-blog yang memiliki niche berbagi link seperti download template, dan masih banyak lagi tentunya. Sebelum saya bagikan tombol botton berikut ini sudah terdapat font yang keren atau icon yang bernama Font Awesome, tentunya tampilannya akan terlihat lebih elegant. 

Baca Juga:

• Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru

Agar tombol download dan demo terpasang dengan benar di blog anda, anda harus mengikuti langkah demi langkah dibawah ini. Caranya tidak begitu sulit, anda bisa membuatnya dengan menggunakan template blog apapun. Menambahkan kode html di bagian Tema, berikut ini langkah-langkahnya. 

Cara Membuat Tombol Button Download dan Demo Di Blog

Sebelum anda memasang script atau menambahkan kode html button download dan demo, anda perlu menambahkan Font Awesome pada template kalian. Dengan menambahkan Font Awesome tombol download dan demo akan lebih keren dan nyaman dipandang, berikut ini tutorial cara membuat tombol button download:

1. Masuk ke Blogger
2. Pergi ke bagian Tema > Edit HTML 
   
   
   
   
   
3. Lalu di template tekan Ctrl + F lalu cari kode </head> atau &lt;/head&gt; selanjutnya tambahkan kode html font awesome yang ada dibawah ini:
   
   
   

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

Setelah menambahkan kode html Font Awesome berikutnya tambahkan kode tombol download dan demo diatas skin, caranya hampir sama. Anda masih di pengaturan edit html tema. Cari kode ]]></b:skin> dengan menakan Ctrl + F agar lebih mudah dalam pencarian kode. Selanjutnya masukan kode html download dibawah ini tepat diatas kode ]]></b:skin>, berikut kodenya:

.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'} 

Klik Simpan untuk menyimpan template.

Cara Pengguna Tombol Download dan Demo

Silahkan buat sebuah artikel pada mode HTML bukan Compose dan salin kan kode di bawah ini untuk membuat tombol Download dan demo:

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

Itulah cara mudah membuat tombol download, jika ada pertanyaan silahkan tanyakan di komentar pada postingan ini.

Tweet