[Tutorial] Cara Menambahkan Tombol Demo Dan Download Pada Blog Ala Bos Malming

Banyak sekali tutorial tentang "Cara Menambahkan Tombol Demo Dan Download Pada Blog" tak kalah saing blog Saya juga akan membagikan tentang tutorial tersebut. Sebenarnya untuk apa sih tutorial Menambahkan Tombol Demo Dan Download Pada Blog itu? ya jika niche blog Anda adalah blog download pastinya Anda akan membutuhkan hal yang satu ini.
Untuk demonya dibawah ini

• Demo
• Download

untuk itu langsung saja kita lihat tutorialnya di bawah ini.

Cara Menambahkan Tombol Demo Dan Download Pada Blog

1. Login akun blogger Anda dan kemudian masuk ke Dashboard blogger Anda.

2. Pilih menu "Template" => Kemudian klik "Edit HTML".

3. Kemudian copy code di bawah ini sebelum kode ]]></b:skin>

/* -- Malming.web.id 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 }

4. Klik "Save".
5. Untuk penggunaan kode ini, gunakan kode di bawah ini setiap kali membuat postingan (gunakan mode HTML)



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

*Catatan: Ganti tulisan http://www.malming.web.id/ dengan url tujuan

Ya, bagaimana tutorial kali ini? apakah sangat membantu? Jika iya syukurlah. Kiranya hanya sekian tutorial yang dapat saya sampaikan nantikan update lainnya hanya di Malming.web.id. Wasallam.....

Share this

Share on FacebookPlus on Google+