Sprites or Hover

Supaya paham dengan apa artinya sprites, maka postingan kali ini diangkat dari ide tersebut. Trik yang hampir-hampir mirip map area dengan trik sprites ini makin meramaikan dunia persilatan web sekarang ini :)) Ide aslinya mah dari sini kok sob ;)) Codepal :D Coba scroll paling bawah pada web tsb, maka akan ada contohnya ;)) Jika dalam bentuk screenshot akan tampak seperti ini:


Pasti sudah ngeuh lah yah :D Dibutuhkan gambar dan beberapa kode CSS dan HTML guna mau memakai trik ini sob b-) Didalam paket gambar sudah ada 1 buah gambar (skin) guna apabila sobat mau menambah link! ==> skin picture Ini gambar yg harus sobat miliki dan lalu dihosting terlebih dahulu gambarnya.

Kode CSS

Letakan kode CSS diatas kode ]]></b:skin> (kalau yg berbau CSS internal, semuanya selalu begini meletakannya)

#account {
position: relative;
width: 340px;
float: left;
}
#account ul {
padding: 0px;
margin: 0px;
position: relative;
list-style-type: none;
}
#account ul li {
position: relative;
float: left;
}
#account ul li a{
width: 56px;
height: 61px;
display: block;
text-indent: -9999px;
}
#account ul li a:hover{
background-position: center bottom;
}
#blog {
background-image: url('blogspot.jpg');
background-position: center top;
}
#fb {
background-image: url('facebook.jpg');
background-position: center top;
}
#linkedin {
background-image: url('linkedin.jpg');
background-position: center top;
}
#orkut {
background-image: url('orkut.jpg');
background-position: center top;
}
#twitter {
background-image: url('twitter.jpg');
background-position: center top;
}
#yahoo {
background-image: url('yahoo.jpg');
background-position: center top;
}

Kode HTML

Karena link yg dibuat menunjukan account yg kita miliki, maka letakan sesuai selera sobat (Add a Gadget ► HTML/Javascript)

<div id="account">
<ul>
<li><a href="http://address-link.com" id="blog">Blogspot</a></li>
<li><a href="http://address-link.com" id="fb">Facebook</a></li>
<li><a href="http://address-link.com" id="linkedin">Linked-in</a></li>
<li><a href="http://address-link.com" id="orkut">Orkut</a></li>
<li><a href="http://address-link.com" id="twitter">Twitter</a></li>
<li><a href="http://address-link.com" id="yahoo">Yahoo!</a></li>
</ul>
</div>

Sudah beres deh ;)) save dan lihat hasil kreasi kalian. Jika sobat mau berkreasi menjadikan link share, maka kode link yg dibutuhkan:

<a expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Del.icio.us</a>
<a expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a>
<a expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>StumbleUpon</a>
<a expr:href='"http://reddit.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Reddit'>Reddit</a>
<a expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Google Bookmarks</a>
<a expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@NAME)"' rel='nofollow' title='Tweet This!'>Tweet This!</a>
<a expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Facebook'>Facebook</a>
<a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' rel='nofollow' title='Share this on Mixx'>Mixx</a>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' title='Subscribe'>Subscribe</a>
<a expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Linkedin'>Linkedin</a>
<a expr:href='"http://www.designfloat.com/submit.php?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>DesignFloat</a>
<a expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Technorati'>Technorati</a>
<a expr:href='"http://scriptandstyle.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to Script & Style'>Submit this to Script & Style</a>
<a expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=http"+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Post this to MySpace'>MySpace</a>
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Blinklist'>Blinklist</a>
<a expr:href='"http://friendfeed.com/?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on FriendFeed'>FriendFeed</a>
<a expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Newsvine</a>

Pilih deh yg mau dipakainya ;)) Selamat berkreasi :-h