Cekerholic

Kemarin saya menulis tentang CSS Sprites dan contoh penggunaannya. Nah kali ini saya akan mengajak anda untuk membuat sebuah Sosial Media Sharing Button/Menu dengan menggunakan teknik CSS Sprites.

Preview

Inilah hasil akhir dari tutorial ini, klik gambar untuk melihat live-demo

Langkah 1 – Persiapan

Sebelum memulai sebaiknya anda berdoa dulu *ini tidak wajib :D*. Pertama, download dulu paket ikon sosial media dari situs Komodo Media. Kemudian bukalah Photoshop, dan buatlah layer baru dengan ukuran 187px X 64px.

Kemudian buatlah guide horizontal pada posisi 32px. Untuk membuat guide klik View > New Guide.

Langkah 2

Ambil 6 buah ikon yang berukuran 32px, yaitu: twitter, facebook, delicious, digg, tumblr dan stumbleupon. Letakkan diatas guide dan beri jarak antar ikon 1px.

Langkah 3

Gabungkan semua layer ikon dengan memilihnya lalu tekan Ctrl+E atau klik Layer > Merge Layers. Setelah itu duplikat layer ikon dengan Ctrl+J atau klik Layer > Duplicate Layer. Geser posisi layer duplikat ke bawah guide.

Langkah 4

Ubah layer ikon duplikat menjadi hitam putih dengan menekan Ctrl+Alt+Shift+B atau klik Image > Adjusments > Black & White.

Langkah 5

Simpan dokumen dengan mengklik File > Save for Web & Devices atau tekan Ctrl+Alt+Shift+S. Simpan dengan format PNG transparan dengan nama share_sprite.png.

Langkah 6 – Membuat Kode HTML

Sekarang mari kita buat markah HTML-nya dulu, jangan lupa untuk memberi CSS class pada setiap elemen link sosial media.

1
2
3
4
5
6
7
8

	<div id="share-button">
		<a class="twitshare" href="http://twitter.com/home?status=Currently%20reading http://yourwebsite.com"></a>
		<a class="fbshare" href="http://www.facebook.com/sharer.php?u=http://yourwebsite.com"  title="Share this on Facebook" ></a>
		<a class="delishare" href="http://del.icio.us/post?url=http://yourwebsite.com" title="bookmark on delicious"></a>
		<a class="diggshare" href="http://digg.com/submit?url=http://yourwebsite.com" title="Digg it"></a>
		<a class="tumblrshare" href="http://www.tumblr.com/share?v=3&amp;u=http%3A%2F%2Fourwebsite.com%2F" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.tumblr.com']);" title="Post to Tumblr"></a>
		<a class="stumbleshare" href="http://www.stumbleupon.com/submit?url=" title="Stumble This Page" ></a>
	</div>

Langkah 7 – CSS Sprites in Action

Sekarang saatnya minum bermain CSS Sprites. Sebelum mulai menulis CSS sebaiknya kita memahami dulu markah HTML-nya. Di markah HTML semua link sosial media dikumpulkan dalam sebuah elemen induk <div id="share-button">, kemudian di setiap link sosial media kita buat class CSS yang berbeda. Nah class-class CSS ini gunanya adalah untuk mengatur posisi gambar dengan menggeser koordinat X dan Y gambar.

Sekarang mari kita mulai menulis kode CSS. Pertama kita atur dulu tampilan elemen induknya, atur lebarnya agar nantinya posisi ikon tidak bergeser, buat juga sebuah garis di bagian bawah.

1
2
3
4
5
6
7

	#share-button{
		margin:0 auto;
		border-bottom:1px solid #adadad;
		overflow:hidden;
		padding:0 10px;
		width:222px; 
	}

Sekarang buat dulu pengaturan global untuk link sosial media :

8
9
10
11
12
13
14
15

	#share-button a{
		background-image:url(share_sprite.png);
		float:left;
		height:24px;
		margin:8px 5px 0 0;
		outline:0 none;
		width:32px;
	}

Kode di atas artinya kira-kira seperti ini: gambar master dipanggil agar tampil, tinggi setiap link adalah 24px, jarak antar link adalah 8px dari atas dan 5px dari kanan, lebar setiap link adalah 32px.

Selanjutnya kita buat pengaturan global untuk link sosial media ketika salah satu link di-hover atau ditelusuri dengan tombol tab. Dalam CSS langkah ini disebut membuat pseudo class :hover dan :focus.

16
17
18
19

	#share-button a:hover,#share-button a:focus{
		height:28px;
		margin:4px 5px 0 0;
	}

Kode di atas artinya adalah : ketika link di-hover atau ditelusuri dengan tombol tab, tinggi link akan berubah menjadi 28px dan jarak link berubah menjadi 4px dari atas.

Cobalah lakukan tes di peramban, hasilnya akan seperti ini:

Link tampil dalam bentuk gambar ikon dengan posisi yang sama, ketika di-hover ikon akan sedikit menyembul.

Agar ikon sosial media tampil sesuai dengan link-nya, kita perlu menggeser posisi gambar pada setiap link. Nah inilah yang disebut CSS Sprites. Sekarang buatlah kode CSS berikut:

20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

	.twitshare{
	background-position:0 32px;
	}
	.fbshare{
		background-position:156px 32px;
	}
	.delishare{
		background-position:125px 32px;
	}
	.diggshare{
		background-position:94px 32px;
	}
	.tumblrshare{
		background-position:63px 32px;
	}
	.stumbleshare{
		background-position:32px 32px;
	}

Dari kode diatas kita bisa melihat bahwa yang berubah-ubah posisinya hanya koordinat X, sedangkan koordinat Y tetap pada posisi 32px.

Sekarang kita atur posisi gambar ketika di-hover atau ditelusuri dengan tab:

39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

		.twitshare:hover,.twitshare:focus{
			background-position:0 0;
		}
		.fbshare:hover,.fbshare:focus{
			background-position:156px 0;
		}
		.delishare:hover,.delishare:focus{
			background-position:125px 0;
		}
		.diggshare:hover,.diggshare:focus{
			background-position:94px 0;
		}
		.tumblrshare:hover,.tumblrshare:focus{
			background-position:63px 0;
		}
		.stumbleshare:hover,.stumbleshare:focus{
			background-position:32px 0;
		}

Dari kode di atas dapat kita lihat bahwa koordinat Y bergeser kembali ke posisi 0.

Sekarang coba lakukan tes di peramban, tampilannya seharusnya akan seperti ini:

Hasil Akhir

Inilah hasil akhir dari tutorial ini, sebuah sosial media sharing menu dengan efek Rollover, silakan klik gambar untuk melihat live-demo-nya

Download File Tutorial

Silakan download file hasil tutorial dengan meng-klik tombol berikut:

DOWNLOAD