Cara Membuat Tombol Download Dan Demo Yang Keren Di Blog

==Iklan Dipate Disini===

Cara Membuat Tombol Download Dan Demo Yang Keren Di Blog Lapakinfo.net - Kali ini admin berkesempatan akan membuat tutorial tentang Cara Membuat Tombol Download Dan Demo Yang Keren Di Blog, menurut saya tombol download dan demo itu sangatlah penting perannya di blog. Selain menggantikan link yang berbentuk text, tombol download dan demo juga akan membuat tampilan blog kalian menjadi rapih dan lebih profesional.

Tombol download dan demo dibuat menggunakan CSS, kelebihan menggunakan CSS ialah tidak memberatkan pada loading blog kalian, berbeda dengan yang tidak menggunakan CSS yang nantinya akan memberi pengaruh pada loading blog kalian yang membutuhkan waktu lama pada pemuatan blog kalian. Nah, buat kalian yang mau memasang tombol download dan demo di blog kalian ikuti langkahnya di bawah ini.

Cara Membuat Tombol Download Dan Demo Yang Keren Di Blog

1. Buka Blog kalian
2. Pilih Tema lalu pilih Edit HTML
3. Cari kode ]]></b:skin>
4. Jika sudah ketemu salin kode dibawah ini dan letakan tepat di atas kode ]]></b:skin>

/* CSS Button Style www.lapakinfo.net */
.coro{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.coro ul{margin:0;padding:0}
.coro li{display:inline;margin:5px;padding:0;list-style:none}
.coro li a.crot,.coro li a.download{position:relative;padding:9px 48px 9px 16px;background:#1a73e8;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}
.coro li a.download{background:#1a73e8}
.coro li a.crot:hover,.coro li a.download:hover{background:#666}
.coro li a.crot:active,.coro li a.download:active{cursor:pointer}
.coro li a.crot:after,.coro 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}
.coro li a.download:after{content:'\f019'} 

5. Simpan template kalian
6. Untuk menerapkan tombol demo dan download ini di postingan blog kalian > buat
Postingan Baru ( New Entry ) > pilih menu HTML (bukan Compose) > kemudian masukkan kode di bawah ini kedalamnya ( Atur posisinya sesuai yang kalian mau )

  <div style="text-align: center;">
  <ul class="coro">
    <li><a class="crot" href="https://www.lapakinfo.net" target="_blank">Demo</a></li>
    <li><a class="download" href="https://www.lapakinfo.net" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div> 

7. Publish

Ganti https://www.lapakinfo.net dengan URL kalian

Sangat mudah bukan untuk membuat tombol download dan demo pada blog. Sampai disini tutorial ,tentang Cara Membuat Tombol Download Dan Demo Yang Keren Di Blog, semoga dengan adanya tutorial ini bisa bermanfaat buat kalian semua. Terimakasih sudah berkunjung.

==Iklan Dipate Disini===