Membuat Tombol Demo dan Download Terbaru

zoct net cinema

blogger, tutorial

Belum ada komentar

sudah banyak tombol demo dan download yang bersebaran di dunia online, namun kali ini saya ingin share riquest dari salah satu members yang menginginkan tombol live demo dan download seperti diblog ini. Berikut previewnya.

• Demo
• Download

Gimana udah lihat previewnya? jika tertarik menggunakan tombol demo & download seperti di atas silahkan ikuti tutorialnya sampai selesai.

1. Sobat harus memasang Font Awesome Icons diblog sobat, namun jika sudah ada lewati langkah ini. Untuk memasangnya silahkan copy kode berikut tepat sebelum atau di atas kode </head>

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

2. Copy CSS berikut di atas kode ]]></b:skin> atau </style>

/*CSS DEMO dan DOWNLOAD*/
.button{text-align:center;width:100%;margin:10px 0;padding:0;font-size:14px;font-family:'Tahoma',Geneva,Sans-serif;color:#fff;margin-left:0!important}
.button ul{margin:0;padding:0}
.button li{display:inline-block;margin:10px 0;padding:0}
.demo{border-radius:5px;padding:8px 12px;background:#e74c3c;color:#fff!important;text-shadow:0 0 1px #222;transition:background-color 1s 0s ease-out}
.demo:before{content:"\f06e";font-family:FontAwesome;font-weight:normal;padding:8px;background:rgba(0,0,0,.2);margin-left:-12px;margin-right:6px;border-radius:5px 0 0 5px;font-size:16px}
.download{border-radius:5px;padding:8px 12px;background:#3498db;color:#fff!important;text-shadow:0 0 1px #222;transition:background-color 1s 0s ease-out}
.download:before{content:"\f019";font-family:FontAwesome;font-weight:normal;padding:8px;background:rgba(0,0,0,.2);margin-left:-12px;margin-right:6px;border-radius:5px 0 0 5px;font-size:16px}
.demo:hover,.download:hover{background:rgba(0,0,0,.6);text-shadow:0 0 1px #222;color:#000}

3. Klik Save

Untuk Cara Penggunaan

Cara penggunaannya sih sangatlah mudah, terlebih dahulu ubah Compose menjadi HTML pada post sobat. Setelah itu masukkan kode berikut di tempat yang sobat inginkan.

• Demo

<a class="demo" href="http://zoctnet.blogspot.com/" target="_blank">Demo</a> 
<div class="clear"></div>

• Download

<a class="download" href="http://zoctnet.blogspot.com/" target="_blank">Download</a> 
<div class="clear"></div>

Atau jika sobat ingin membuatnya berdampingan seperti preview diatas, sobat cukup menggunakan kedua kode sekaligus seperti berikut.

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