Cara membuat tombol Demo dan Download ~ blog sepot

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:

Jika kalian ingin mengganti gambar icon nya silahkan

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²,..

Terima kasih telah membaca artikel tentang Cara membuat tombol Demo dan Download di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.