Cara Membuat Tombol Demo Dan Download Blogger

Cara Membuat Tombol Demo Dan Download Blogger
Tampilan Demo dan Download di blog ini pasti sudah tahu? Tampilannya cukup sederhana sekali tanpa ada tambahan effek lainnya tapi dengan style yang simple pasti bikin pengunjung mudah sekali untuk menggetahui jika itu adalah Tombol download dan demo.

Disini kita juga bisa menambahkan Tampilan Icon pada bagian Tombol tersebut dengan menggunakan Font Awesome atau bisa juga menggunakan Font lain seperti Boostrap dan Materialize, tapi dikarenakan yang sudah biasa kita gunakan adalah Awesome jadi lebih baik gunakan saja Font Awesome.

Untuk membuat Tombol Demo Dan Download ini kalian hanya perlu memasukan CSS dan HTML saja tanpa perlu tambahan Javascript, nah untuk membuatnya silahkan kalian simak Tutorialnya dibawah ini dan jangan lupa, bacanya pelan pelan saja agar dapat dipahami.

Cara Membuat Tombol Demo Dan Download Blogger


1. Buka Blogger > Klik Template/Tema > Tambahkan kode dibawah ini sebelum kode </head> or </header>

/* Tombol Demo */
.wrap {text-align: center;}
.btn{background:#26a69a;color:#fff;border-radius:5px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.1);box-shadow:0 5px 10px rgba(0,0,0,0.1);-webkit-transition:-webkit-box-shadow .5s;transition:-webkit-box-shadow .5s;transition:box-shadow .5s;transition:box-shadow .5s,-webkit-box-shadow .5s;transition:box-shadow .5s,-webkit-box-shadow .5s;overflow:hidden;display:inline-block;position:relative;cursor:pointer;padding:10px 20px;margin:0 20px}.btn:hover{-webkit-box-shadow:0 10px 10px rgba(0,0,0,0.2);box-shadow:0 10px 10px rgba(0,0,0,0.2)}.btn:before{font-family:'FontAwesome';margin-right:10px;display:block;float:left}.btn.demo:before{content:'\f06e'}.btn.download:before{content:'\f019'}.btn.contact:before{content:'\f003'}

2. Berikutnya Tambahkan kode dibawah ini, dan paste saat kalian ingin membuat post dengan mode HTML

<div class="wrap">
<a class="btn demo" href="https://www.kangian.com/" rel="nofollow" style="color: white;" target="_blank">Tutorial</a> <a class="btn download" href="https://www.kangian.com/" style="color: white;" target="_blank">Demo</a></div>

3. Selesai

4. Hasilnya akan terlihat seperti tampilan dibawah ini



Tampilan nya terlihat seperti diatas sangat sederhana dan ada tambahan icon juga pasti membuat pengunjung tahu fungsinya jika ditambahin icon karena pengunjung biasanya melihat pada bagian icon bila suka mengunduh semisal lagu.

Show comments
Hide comments

6 Responses to "Cara Membuat Tombol Demo Dan Download Blogger"

  1. Mantap kang jangan lupa kunjungi nya di www.apkfile1.blogspot.com

    ReplyDelete
    Replies
    1. siap, jangan lupa berkunjung biar dapet tutorial baru :)

      Delete
  2. mas cara bikin "Baca Juga" Model kayak mas ini, ditunggu tutorial selanjutnya :)
    jangan lupa mampir mas https://getrongers.blogspot.co.id/ hehehehehe :D

    ReplyDelete
  3. mantap gan,, tapi buat blog AMP bisa gak ya..??
    https://www.sukamitos.com/

    ReplyDelete

Centang kotak "NOTIFT ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Δ