Tombol Buton bagi para blogger khususnya yang sering sharing tutorial-tutorial / link download, dengan Tombol Button Demo Download Di Blog ini tampilan link akan terlihat semakin menarik, banyak sebenarnya blog-blog yang sharing tombol buton dan menurut saya tombol buttton ini yang paling keren, simpel, tidak terlalu nora untuk dipasang di blog kita.
Dengan tombol ini prngunjung blog kita akan semakin tertarik untuk mencobanya, karena kalau yang hanya menyertakan link-link tanpa tombol itu biasanya kurang menarik, contoh saja blog-blog penyedia template blog, hampir semua bahkan tidak ada yg tidak memakai tombol button, bagaimana dengan anda? tertarik untuk mencobanya
Berikut tutorial sederhana Cara Membuat Tombol Button Demo Download Di Blog
1. Login ke blog
2. Masuk ke menu Template > Edit HTML
3. Cari kode ]]></b:skin>
4. Letakkan kode dibawah ini tepat di atas kode ]]></b:skin>
Dengan tombol ini prngunjung blog kita akan semakin tertarik untuk mencobanya, karena kalau yang hanya menyertakan link-link tanpa tombol itu biasanya kurang menarik, contoh saja blog-blog penyedia template blog, hampir semua bahkan tidak ada yg tidak memakai tombol button, bagaimana dengan anda? tertarik untuk mencobanya
1. Login ke blog
2. Masuk ke menu Template > Edit HTML
3. Cari kode ]]></b:skin>
4. Letakkan kode dibawah ini tepat di atas kode ]]></b:skin>
/* Tombol Demo & Download amin404.co.vu
----------------------------------------------- */
.kotak-demo-download {
float:left;list-style:none;text-align:center;width: 100%;margin:8px 0!important;padding:0;font-size:14px;clear:both;font-family:Oswald, Open Sans, Arial, sans-serif;text-transform:uppercase;
}
.kotak-demo-download ul {
margin:0;padding:0
}
.kotak-demo-download li{
display:inline;margin:0;padding:0;
}
.demo {
border: 1px solid #d24932;border-bottom-color:#c84934;box-shadow:1px 1px 1px #aaa;padding: 7px 40px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px;
}
.download {
border: 1px solid #549dd4;border-bottom-color:#4b8cbe;box-shadow:1px 1px 1px #aaa;padding: 7px 40px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;
}
.demo:hover {
background: #d94a33;box-shadow:none;border-color:#d0412a #d0412a #c43d27; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222;
}
.download:hover {
background: #4296d5;box-shadow:none;border-color:#378dcd #378dcd #2a80c0; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222}
SimpanUntuk memanggilnya copy dan Paste kode dibawah ini
<div style="text-align: center;">
<ul class="kotak-demo-download">
<!-- Demo -->
<li><a class="demo" href="http://amin404.co.vu/" target="_blank"><i class="icon-chevron-right"></i> Demo</a></li>
<!-- Download -->
<li><a class="download" href="http://amin404.co.vu/" target="_blank"><i class="icon-download-alt"></i> Download</a></li>
</ul>
</div>
<div class="clear">
</div>
Untuk Pengguna'an alihkan ke HTML jangan di Compose