Pages

Thursday, July 1, 2010

Floating social media buttons - Css

Supaya blog ini  gak jamuran dan ditumbuhi alang2, mo posting dulu ah.. tapi sebelumnya special thx bwt stef'z makasih banyak ya awardnya.. :D

Floating button biasanya banyak digunakan  sebagai media sharing, social bookmark, atau sekedar icon yang merujuk ke link seperti status YM!, profile di situs jejaring seperti facebook/twitter.

Letaknya bisa di sebelah kiri atau kanan halaman web, posisinya tidak berubah menyesuaikan dengan jarak margin yang telah ditentukan. Meskipun halaman web memanjang ke bawah, button tetap mengikuti dan menyesuaikan jarak margin dengan scrolling browsernya.

Kurang lebih seperti skrinsut ini :


Untuk macam2 button-nya, bisa diambil di website2 yang menyediakan icon dan button gratisaaaaan. bisa dicoba googling dengan keyword free social media button.

Walaupun namanya floating, tapi untuk penerapan css-nya tidak menggunakan float.. tapi menggunakan position

Langkah pertama, membuat style untuk mengatur posisi button :




















Untuk css style-nya  :










Lanjutan-nya, menggunakan div dan ul :








Menyesuaikan skrinsut di awal postingan jadi :







Selesai sudah, singkatnya... :D

6 comments:

"om rame" said...

saya simpen duLu yah om tutornya, terima kasih atas sharenya.

gitu dong jangan sampe bLog ini jadi Lumutan kaya adminnya, hehehe...

"om rame" said...

sebentar Lagi juga jamuran nih bLog pLus Lumutan, hihihi...

9ete said...
hahaha.. kalo gitu gw harus beli ikan sapu2 biar dibersihin tuh lumut :D
"om rame" said...

ngobroL aja ach.
hehehe..., makanya kaLo nahan postingan jangan Lama-Lama om. nih rumah jarang dihuni, nti juga Lama-Lam kemaLingan. hakhakhak...

oh ya, mohon maaf sekedar info. kenapa yah Link yang ditinggaLin di komentar enggak bisa terhubung kesini?, mohon diperhatikan.

"om rame" said...

ngobroL Lagi.
untuk sampai ke dashboard sobat, itu masih jauh dari kapasitas saya. tapi nanti kaLau sudah dapat iLmunya akan saya praktekan di bLog ini, hakhakhak...

buat mraktekin tutor aja masih kepuyengan, apaLagi suruh ngehack bisa botak ubanan nih kepaLa, hihihi...

9ete said...
@"om rame" kpala gak bisa ubanan om.. ada juga rambut yg ubanan :D