Cara membuat tombol Demo dan Download

Cara membuat tombol Demo dan Download - Ini adalah cara mudah untuk membuat tombol demo dan download. Tombol ini bisa sobat pergunakan untuk berbagai macam keperluan di blog sobat. Dengan memakai tombol ini tentunya bisa memudahkan sobat dalam membuat tombol, dari pada harus upload image satu persatu. Oiya, tombol ini adalah full CSS, jdi membuat tampilan lebih menarik dan tidak lemot untuk di load.

Biasanya tombol ini di gunakan untuk berbagi template atau link download saja.

Untuk DEMO nya nanti seperti ini:

• Demo
• Download

Jika kalian ingin mengganti gambar icon nya silahkan

• List lengkap
• Cara menggunakan

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.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; }

5. 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'/>

Gimana cara nya agar Tombol tersebut muncul di postingan???
Nah,.. sobat cukup COPAS kode dibawah ini trus taruh di postingan sobat (gunakan mode HTML)

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

Okey,.. cukup sekian tutorial dari saya,..
semoga bermanfaat buat sobat blogger semua nya ...

Jangan lupa tinggalkan komentarnya ya agan²,..