Cara Membuat Tombol Demo dan Download ala Kang Ismet

Cara Membuat Tombol Demo dan Download ala Kang Ismet

Cara Membuat Tombol Demo dan Download ala Kang Ismet - Kali ini saya akan share sebuah tips dan trik yang mungkin dimana trik ini sering sekali di gunakan untuk para blogger yang akan membuat sebuah link download ataupun demo dalam sebuah produk yang mereka juala ataupun produk yang free , seperti Free Download Template Blogger ataupun produk yang lainya. Baca juga artikel sebelumnya tentang Cara Setting Robots.txt Khusus dan Tag Header Robot Khusus untuk membuat blog anda akan menjadi lebih Seo Friendly.

Penerapan Membuat Tombol Demo Dan Download

• Log in ke Blogger  dan Edit HTML

• Letakan kode dibawah ini diatas kode ]]></b:skin>

/* -- Kang Ismet Button --*/
 .button{float:left; list-style:none; text-align:center; width:100%; margin:5px 0; padding:0; font-size:14px; clear:both}
 .button ul{margin:0; padding:0}
 .button li{display:inline; margin:0; padding:0}
 .demo{border:none; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; padding:8px 80px !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:none; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; padding:8px 80px !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:#454242; 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:#454242; 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} 

• Kemudian Simpan Template / Save Template. Selesai.

• Untuk menggunakan di postingan Blog anda, silahkan copy code ini di HTML.

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

Keterangan :

• Kode yang bercetak Tebal, Miring, dan Berwarna Merah adalah URL Tujuan untuk Demo.

• Kode yang bercetak Tebal, Miring, dan Berwarna Biru adalah URL Tujuan untuk Download.

• Jika ada kesulitan dalam penerapanya silahkan komen di bawah , sekian tips dari saya yang saya ambil dari blog kang ismet