Cara Membuat Tombol Download dan Demo di Blogger

Pada Tutorial ini saya akan berbagi cara membuat tombol demo dan download Flat UI dengan tambahan icon Font Awasome. untuk sahabat blogger yang biasa membagikan sesuatu melalui blog baik itu berbagi template , software, film, dan lainnya yang dapat dibagikan pastinya akan membutuhkan tombol demo dan download.

Tampilan tombol demo dan download yang saya bagikan kali ini sangat menarik , karena terdapat icon Font Awasome pada tombol tersebut, oke tanpa perlu kelamaan langsung saja ikuti langkah berikut ini :

CARA MEMBUAT TOMBOL DEMO DAN DOWNLOAD Flat UI

Widget ini menggunakan Font Awasome , jadi silahkan tambahkan link CSS berikut ini di atas </head>

Style 1

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

Berikut demo Tombol Demo dan Download yang sudah dibuat :

See the Pen rZzXOr by ANDRE (@andremubarok4646) on CodePen.

1. Masuk ke Blogger > Template > Edit HTML

2. Pastikan di blog anda terdapat script pemanggil CSS style font Awasome seperti dibawah ini yang terletak di atas kode </head>. jika tidak ada silahkan letakan script pemanggil Css Style font Awasome di bawah ini di atas kode </head>

3. Letakan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>
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)}}

4.Simpan Template

5. Untuk penggunaannya ,silahkan gunakan kode berikut ini ketika membuat postingan (tambahkan dalam tab HTML)

<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 link http://www.arlinadzgn.com dengan link tujuan

Demikian tutorial singkat dari saya semoga bermanfaat artikel ini. sumber 

www.arlinadzgn.com/

Share this post