Cara Membuat Tombol Demo dan Download Responsive Di Blogger Dengan Mudah

Tombol Demo dan Download ini sangat penting untuk diketahui. Fungsi tombol ini adalah sebagai perantara menuju link selanjutnya. Apabila kamu memiliki website tutorial atau kamu menjual template, maka tombol demo dan download ini snagat penting untuk kamu gunakan.

TongkolPedia - Tombol Demo dan Download ini sangat penting untuk diketahui. Fungsi tombol ini adalah sebagai perantara menuju link selanjutnya. Apabila kamu memiliki website tutorial atau kamu menjual template, maka tombol demo dan download ini snagat penting untuk kamu gunakan.

Bukan hanya itu, tombol demo dan download ini juga bisa mempercantik dan menjadikan blog kamu kelihatan lebih rapi. Nah, kali ini TongkolPedia akan membagikan cara untuk membuat tombol Demo dan Download responsive di Blogger dengan mudah seperti yang sering TongkolPedia gunakan disini.

Cara Membuat Tombol Demo dan Download Responsive Di Blogger Dengan Mudah

Pertama, silahkan kamu masuk ke Blogger
Kemudian menuju menu Template - Edit HTML.
Silahkan cari kode </head> bisa menggunakan CTRL + F
Setelah ketemu silahkan Copy kode CSS dibawah ini

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

Letakkan kode CSS ini tepat diatas kode </head>
Setelah disimpan, silahkan masuk ke Blogger - Template - Edit HTML kembali
Copy kode CSS dibawah ini

/* Demo and Download Button by  TongkolPedia.net */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.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'}

Tempelkan kode CSS ini di atas kode ]]></b:skin> atau </style>
Klik Simpan
Untuk penggunaannya, silahkan tambahkan kode dibawah ini pada artikel pada Mode HTML

<div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="http://TongkolPedia.net" target="_blank">Demo</a></li>
    <li><a class="download" href="http://TongkolPedia.net" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

Note:
Silahkan ubah http://TongkolPedia.net dengan link yang ingin dituju.

Penutup

Gimana? Mudah bukan? Nah itulah cara untuk membuat tombol demo dan download yang bisa kamu gunakan di website atau blog pribadi kamu sendiri dengan mudah. Apabila ada yang belum dipahami atau ingin ditanyakan silahkan cantumkan saja di kolom komentar atau langsung melalui Live Chat. Semoga informasi kali ini bermanfaat bagi kamu.