jendelablog.wordpress.com

budiscyan weblog area's

menambah screenshot/’tumbnail pada link

Ide ini datang ketika aQ berkunjung ke salah satu site temanQ yaitu segotuwul .maka dari itu terimakasih sebelumnya kepada beliau yang juga telah mengajarkan ilmunya pada saya .
screenshot pada link sebenarnya sudah saya ketahui sejak lama cuma saya sendiri belum tahu formulanya .ternyata formulanya seperti berikut :

<span class=”budi“><a class=”poto1″ href=”http://budiscyan.multiply.com” title=”my site”>WELCOME IN MY SITE<img class=”poto2″ src=”http://images.budiscyan.multiply.com/logo/57“></a></span>

keterangan:



pada CSS :
sebenernya caranya tidak jauh berbeda dengan customisasi pada google search pada site yaitu dengan memberikan kontrol HTML dari CSS .

langsung saja , kontrol CSSnya sebagai berikut :

//** thumbnail **//

.budi {

position:relative;
z-index:100;
}

.budi a img {

border:0;
}

.budi a.poto1:hover {

text-decoration:none;
background-color:none;
color:#000;
border:none;
}

.budi a .poto2 {

display:block;
position:absolute;
width:0;
height:0;
border:0;
top:0;
left:0;
}

.budi a.poto1:hover .poto2
{

display:block;
position:absolute;
top:30px;
left:0px;
width:180px;
height:200px;
border:1px solid #999999;
}

NB : kata budi bisa diganti dengan apa saja asalkan sama antara HTML dengan CSS .

hasilnya dapat dilihat pada homepage saya yang tulisan WELCOME IN MY SITE .

sekian terimakasih…..

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Information

This entry was posted on 7 Mei 2009 by in artikel.

Kategori

Blog Statistic

  • 21,290 hits

Contact

%d blogger menyukai ini: