Cara Membuat Tombol Button Download Atau Demo Di Blog

Pada kali ini saya akan membagikan bagaimana caranya membut tombol Button download atau demo responsive serta keren di blog sobat, apalagi jika blog kalian merupakan blog yang niche berbagi link seperti link film, link download template pastinya tombol-tombol button ini sangat dibutuhkan bukan.

Namun sebelum lanjut tutorial ini sekedar pemberitahuan untuk kalian semua kalau tombol button ini terdapat icon Font Awesome yang tentunya membuat tampilannya akan lebih elegant dan keren pada blog sobat.

Nah tanpa berlama-lama lagi silahkan simak cara penerapannya di bawah berikut ini :

Cara Membuat Tombol Button Download Atau Demo Di Blog

Note cara ini berkerja apabila blog sobat sudah memasang Font Awesome pada template kalian, untuk cara melihat apakah template sobat sudah menerpakannya silahkan cari kode di bawah ini pada tempalate sobat.

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

Jika kode tersebut tidak ada pada blog sobat, silahkan copy kode tersebut dan tempelkan di atas kode </head> atau &lt;/head&gt; namun jika sudah ada abaikan saja.


1. Masuk Blogger
2. Tema > Edit HTML
3. Cari Kode Berikut ini ]]></b:skin> Atau </style> dan salin kode dibawah ini dan pastekan di atas kode tersebut.

 /* CSS Button Style www.lewatinaja.com */
.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 Pada Template

Cara penggunaan :

Silahkan buat sebuah artikel pada mode HTML bukan Compose dan salin kan kode di bawah ini :

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

Namun jika kalian ingin menampilkan tombol salah satu button saja contohnya saja kalian ingin menampilakan tombol download saja maka hapus kode ini :

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

Begitupun sebaliknya jika kalian hanya ingin menggunakan tombol demo saja maka kode di bawah ini tinggal di hapus saja :

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

Maka lihat sekarang tombol yang kalian gunakan sudah keren bukan dan tentunya membuat tampilan blog semakin menarik bukan, oke sampai disini tutorial cara membuat tombol button yang menarik dan keren dan jangan lupa untuk membagikan artikel ini ke media sosial kamu jika anda menyukainnya. terima kasih telah berkunjung

Share this