Ads 720 x 90

Fiksioner Free Blogger Theme Download

Cara membuat Tombol Demo dan Download pada Blog

B-KREATIF - Pada kesempatan Kali ini saya ingin membagikan sedikit tutorial Bagaimana Sih Membuat Tombol Download dan Demo pada Blog.


Tentunya Jika kamu memiliki Blog download seperti menyediakan file template kamu memerlukan kedua tombol ini. Script ini sendiri saya dapatkan dari Blog resmi www.arlinadzgn.com. ada 2 style yang bisa kamu gunakan. Berikut Cara membuat Tombol Download dan Demo pada blog.

CARA MEMBUAT TOMBOL DOWNLOAD DAN DEMO

Untuk membuat tombol ini berfungsi, kita menggunakan font awesome. Jika pada template kamu masih belum terdapat font awesome silahkan pasang script dibawah ini tepat dibawah <head>



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

Setelah Dipasang silahkan pilih salah satu dari beberapa file dibawah ini untuk bisa kamu gunakan pada blog kamu.

Style 1




Style 2




Cara pemasangan :

  1. Buka akun blogger kamu.
  2. Silahkan cari tag </style> atau ]]></b:skin>
  3. Jika sudah masukan script dibawah ini. Silahkan Pilih salah satu Style
  4. Dan simpan

STYLE 1



/* CSS Button Style 1 by www.arlinadzgn.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'}


STYLE 2



/* CSS Button Style 2 by www.arlinadzgn.com */
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';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:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}


Jika sudah disave kamu Bisa menggunakan Tombol di postingan dengan Scrip berikut ini :

STYLE 1 



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

STYLE 2



<div style="text-align: center;">
  <ul class="button2">
    <li><a class="demo" href="http://www.arlinadzgn.com" target="_blank">Demo Link</a></li>
    <li><a class="download" href="http://www.arlinadzgn.com" target="_blank">Download Link</a></li>
  </ul>
</div>
<div class="clear"></div>


Ganti Tulisan Berwarna merah dengan link sobat. 
Nanda Krisbianto
Be a person who is useful to the world, Never sink with limitations.

Related Posts

Subscribe Our Newsletter