VARIETY DEMO AND DOWNLOAD BUTTON

Demo and download button. Informasi kali ini mengenai keberadaan tombol demo dan download. Biasanya kita temukan di weblog yang menerangkan tentang tutorial. BeBeN si bloglang anu ganteng kalem tea mau memberikan contoh pemakaian tombol yang simpel. Diambil dari web www.marcofolio.net, web yang bagus untuk mempelajari script jQuery di artikelnya mengenai jHTML-Ipsum : HTML Ipsum using a jQuery plugin. Jika sobat masuk ke halaman tersebut akan menjumpai tombol demo dan download seperti...

  

Itu sobat apa yang BeBeN maksudkan itu :D Walau sudah basi dan pasti sudah pada tahu mengenai cara pembuatannya :"> siapa tahu saja ada yang belum tauk ;)) atau malah mau ganti dengan yang lebih GAYA :)) Untuk contoh diatas kode yang dipakainya yaitu<div style="text-align: center;">
<a href="HTTP://LINK-TUJUAN" title="JUDUL-LINK"><img src="HTTP://LINK-GAMBAR.JPG" alt=""></a>  <a href="HTTP://LINK-TUJUAN" title="JUDUL-LINK"><img src="HTTP://LINK-GAMBAR.JPG" alt=""></a>
</div>Jadi setiap mau mempostingkan ya itu yg dipakainya :-" Kalau BeBeN masang seperti ini nih [..]

Kalau mau kayak aku, sobat buat terlebih dahulu satu gambar yg beresolusi 455px × 55px terlebih dahulu. Setelah itu masukin deh kode CSSnya sebelum/diatas kode ]]></b:skin>

#buttonDDL{background:#DEBE94;height:55px;width:455px;text-align:center;margin:3px auto}
a.livedemo{background:transparent url(HTTP://LINK-GAMBAR.JPG) no-repeat scroll 0 0;display:block;float: left;height:55px;text-decoration:none;width:227px}
a.livedownload{background:transparent url(HTTP://LINK-GAMBAR.JPG) no-repeat scroll right top;display:block;float: left;height:55px;text-decoration:none;width:228px}

Setelah itu nanti dalam setiap mau memostingnya menggunakan rumus...
<div id='buttonDDL'><a class='livedemo' href='/' target='_blank' title='JUDUL-LINK'></a><a class='livedownload' href='/' title='JUDUL-LINK' target='_blank'></a>
</div>Kalau mau contoh lagi ada kok ;)) Berikut kode CSSnya...

.demoDL {
font-weight:bold; padding-top:3px;padding-bottom:3px; text-align:center;}
.demoDL a {
-moz-border-radius:4px; border:1px solid #528ac4; background-color:#528ac4; color:#fff; padding:3px 8px 4px 8px; margin-left:.5em;}
.demoDL a:hover {
background-color:#00FF00 !important;color:#FF6600; border:1px solid #c30 !important;}

Ini kode untuk memanggilnya...
<div class="demoDL">
<a href="/" title="JUDUL-LINK">DEMO</a><a href="/" title="JUDUL-LINK">DOWNLOAD</a>
</div>
Nah sok lihat bagaimana itu jadinya ;)) Selamat berkreasi dan Happy blogging with BeBeN si bloglang :-h