 |
| Cara Membuat Tombol Demo dan Download Flat UI |
Kali ini kita akan membahas bagaimana Membuat Tombol atau Button Demo dan Download Flat UI, untuk kalian yang mempunyai blog Download pasti akan membutuhkan Tombol Download dan untuk Memperindah atau Memparcantik Blognya Tutorial ini boleh di coba hehe...
Tampilan Tombol atau Button Demo dan Download yang saya bagikan ini Sangat Menarik (Bagi Saya hehe), Karena menggunakan Font Awesome,
Ok tanpa menunggu lama lama Langsung aja ke Tutorialnya:
Cara Membuat Tombol Demo dan Download Flat UI
Widget ini menggunakan Font Awesome, jadi tambahkan Link Font Awesome di atas </head>
#wrap {
margin: 20px auto;
text-align: center;
}link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>Berikut kita ada Dua Syle yang kita punya silahkan Pilih hehe...
Style 1
Style 2
1. Buka Blogger > Tamplate > Edit HTML
2. Pastikan diblog anda terdapat Script pemanggil Css Style Font Awesome jika tidak ada silahkan Pasang Script di atas tadi dulu,
3. Letakkan Kode CSS di bawah ini tepat sebelum </style> atau ]]></b:skin>
Style 1
/* CSS Button Style 1 by www.sobatblog.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.sobatblog.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 Tamplate
5. Untuk menggunakan Script ini Silahkan pasang Script di bawah ini, Script pemenggil ini di gunakan saat Membuat atau Mengedit Artikel Sobat (di HTML).
Style 1
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.sobatblog.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.sobatblog.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>Style 2
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.sobatblog.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.sobatblog.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>Ganti http://www.sobatblog.com dengan link Tujuan
Demikian Tutorial Cara Membuat Tombol Demo dan Download Flat UI dari Sobat Blog semoga Bermanfaat :)