Cara Membuat Tombol Demo dan Download Responsive Di Blogger Dengan Mudah

Cara Membuat Tombol Demo dan Download Responsive Di Blogger Dengan Mudah


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.com */
.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.com" target="_blank">Demo</a></li>
    <li><a class="download" href="http://TongkolPedia.com" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

Note:
Silahkan ubah http://TongkolPedia.com 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.

    Berlangganan update artikel terbaru via email:

    0 Response to "Cara Membuat Tombol Demo dan Download Responsive Di Blogger Dengan Mudah"

    Post a Comment

    - Mohon Berkomentar Dengan Wajar
    - Dilarang Menyertakan Link Aktif Maupun Tidak Aktif
    - Dilarang Berkomentar Dengan Unsur Pornografi, Sara, Promosi Dan Hal-Hal Yang Bertentangan Dengan Hukum Yang Berlaku


    Jika ada hal-hal yang tidak pantas atau bertentangan, Saya selaku pengurus Blog ini tidak segan segan menghapus Komentar Anda.
    Terima Kasih!!

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel