Membuat Button Demo dan Download ala Kang Ismet

Pada kesempatan kali ini saya akan membagikan sebuah cara yang saya dapatkan dari blog kang ismet, dengan membagikan cara ini semoga anda para blogger yang belum pernah membaca postingan ini di blog kang ismet menjadi tahu dengan adanya keberadaan postingan ini.

Selain untuk menyebar luaskan trik ini, tujuan saya memposting cara membuat button demo dan download ini adalah sebagai media penyimpanan saya sendiri. Kali aja di lain waktu saya butuh, jadi saya tinggal membuka dan mencari di blog saya sendiri.

Jika anda berminat dan ingin memasang button demo dan download sederhana ala kang ismet ini silahkan ikuti langkah di bawah.


Copy dan pastekan kode berikut di atas ]]></b:skin>, Jika tidak berhasil pastekan di atas kode </style> dan setelah itu klik save


/* -- 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 }


Untuk menggunakan dalam postingan, tambahkan pada mode html kode di bawah ini
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://minahsmk1.blogspot.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://minahsmk1.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
Maka hasilnya akan sepeti gambar di bawah ini.

Membuat Button Demo dan Download ala Kang Ismet


Pada gambar tersebut saya hanya memasang button download saja, jika anda ingin memasang button download saja, pada mode html anda cukup menambah kode seperti di bawah ini.
<div style="text-align: center;">
<ul class="button">
<li><a class="download" href="http://minahsmk1.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
Keterangan : Pada tulisan yang berwarna biru pada script html, silahkan anda ganti dengan url blog anda.

Saya kira cukup sampai disini saja postingan kali ini, semoga cara ini membantu dan bermanfaat bagi anda.

Komentar

Postingan populer dari blog ini

APA ITU AGROTEKNOLOGI?

Cara Menghilangkan Redirect Pada Template

Cara Menampilkan Subtitle Film di Android