Cara Membuat Tombol Demo dan Download Flat UI

Cara Membuat Tombol Demo dan Download Flat UI - Apa kabar sobat blogger semua, kali ini saya membagikan turorial cara membuat tombol demo dan download flat ui. Pasti para blogger sering membagikan sesuatu di dalam blognya baik itu lagu,film,maupun template pasti sering menampilkan tombol demo atau download. Nah tapi saya akan membagikan tombol yang flat ui. Langsung aja kita ke topik Utamanya.

Cara Membuat Tombol Demo dan Download Flat UI

Widget ini memerlukan Font Awesome, jadi silahkan tambahkan kode dibawah ini tepat di atas </head>

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

Berikut contoh tombol yang Flat UI

• Demo
• Download

1. Masuk ke Blogger>Template>Edit HTML
2. Copykan kode CSS di bawah ini dan paste di atas kode ]]></b:skin> atau </style>

/* CSS Button by sembadakost.blogspot.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'}

3. Simpan Template.
4. Dan untuk penggunaannya, silahkan gunakan kode di bawah ini ketika membuat postingan. Tapi harus di tab HTML.

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

Ganti http://sembadakost.blogspot.com dengan link tujuan

Demikian tutorial Cara Membuat Tombol Demo dan Download Flat UI , Semoga bermanfaat.

Baca Juga : Cara Membuat Blog

Share This