Cara Membuat Tombol Demo dan Download Yang Keren

Membuat Tombol Demo dan Download Yang Keren - Pernah kah kalian melihat sebuah tombol Demo dan Downloadm pastinya tombol itu sering kalian temui pada blog Template, tombol ini sangat bagus di gunakan di blog karena kelihatan sangat rapi.

Tombol Demo dan Download

Itulah penampakan tombol Demo dan Download yang saya gunakan atau untuk lebih jelasnya silahkan lihat contoh tombol Demo dan Downloadnya di artikel saya ini BroSense Responsive Blogger Template.

Cara Membuat Tombol Demo dan Download

1. Loggin Ke akun blogger masing masing

2. Pilih Dashboard > Template > Edit HTML

3.Cari kode ]]></b:skin>, Lalu Letakan kode di bawah ini tepat di atas kode ]]></b:skin>

.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;border-radius:2px;padding: 8px 19px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);transition: background-color .4s ease-out 0s;}
.download {border: none;border-radius:2px;padding: 8px 19px !important; background: #2ecc71; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);transition: background-color .4s ease-out 0s;}
.demo:hover { background: #454242;text-decoration:none }.downloadx:hover { background: #454242;text-decoration:none }
#putar-putar-bro
{
text-align:center;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out; 
transition: all 2s ease-in-out;
}
#putar-putar-bro:hover { -moz-transform:scale(1.5) rotate(-360deg); -webkit-transform:scale(1.5) rotate(-360deg); -o-transform:scale(1.5) rotate(-360deg); -ms-transform:scale(1.5) rotate(-360deg); transform:scale(1.5) rotate(-360deg);cursor:pointer;color:#2295b5; }

4. Lalu tambahkan kode JQueryberikut ini tepat diatas kode </head>

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

5.  Untuk menerapkan Tombol Demo dan Download pada postingan caranya adalah ambil kode di bawah ini dan taruh di postingan baguan HTML

<ul class="button">
<li><a class="demo" href="http://masmulki.com"><i class="icon-desktop"></i>Demo</a></li>
<li><a class="download" href="http:/masmulki.com.com"><i class="icon-cloud-download"></i>Download</a></li>
</ul><div class="clear">