Cara Membuat Tombol Download & Demo Flat UI di Blogger

Cara Membuat Tombol Download & Demo Flat UI di Blogger - Untuk kalian yang mempunyai sebuah blog yang berniche Download tentunya sangat butuh tombol Download dan Demo ya, kali ini Teknolopedia akan membagikan sebuah tutorial cara membuat tombol download Flat UI, tombol download dan demo kali ini menggunakan icon font awesome agar terlihat elegan.

Tanpa berlama-lama lagi, jika kalian tertarik mari kita lihat tutorial pemasangannya dibawah ini :

Cara Membuat Tombol Download & Demo Flat UI

Karena tombol download dan demo ini menggunakan icon font awesome maka kita harus menaruh link CSS terlebih dahulu di atas </head>

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

1. Masuk ke Dashboard Blogger => Template => Edit HTML

2. Salin kode dibawah ini dan letakkan tepat di atas kode </style> atau ]]></b:skin>

/* 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)}}

3. Untuk penggunaanya silahkan salin kode dibawah ini saat membuat sebuah artikel

<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>

Demikian Artikel Cara Membuat Tombol Download & Demo Flat UI di Blogger, jika ada yang ingin ditanyakan silakan komen di kolom komentar ya teman teman.

Bagikan Artikel ini