Cara Membuat Tombol Demo dan Download Flat UI

2:24:00 AM
loading...

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



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




Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Formulir Kontak

Name

Email *

Message *