Tutorial: Floating Social Bookmark Gaya Mashable

July 1st, 2010 | 5:55 pm | Blogging, Tutorials | 612 views | 54 responses

Kalau sudah biasa melawat laman Mashable.com pastinya kita akan perasan di sebelah kiri setiap artikel laman tersebut ada floating social bookmark widget. Bila pelawat scroll ke bawah browser mereka, widget tersebut kelihatan bergerak mengikut sekali dan seolah-olah floating di browser tersebut. Sebenarnya widget tersebut sudah di ‘fixed’ kan posisi kedudukannya dalam browser.

Saya pun di antara mereka yang tertarik dengan Floating Social Bookmark gaya Mashable ni, dan nak cuba juga buat benda ni macam contoh yang ada di setiap single page blog ni. Sebenarnya bagi pengguna wordpress sudah ada plugin khusus untuk digunakan, install je plugin Digg Digg ataupun Sharebar dan sudah siap untuk digunakan.

Cumanya saya terfikir selain di gunakan untuk social bookmarking, kalau kena gayanya widget tersebut juga boleh digunakan untuk tujuan lain. Kalau guna plugin fungsinya terhad, manakala kalau kita buat cara manual kita boleh ubah kegunaannya. Contohnya boleh juga guna untuk floating iklan, feed, twitter, Fan page link dan sebagainya. Janji ada kod untuk tujuan tu.

Hari ni nak kongsikan tutorial bagaimana untuk membuat ‘floating social bookmark gaya mashable’ ikut cara saya. Apa yang saya gunakan adalah menggunakan fungsi jquery untuk menjadikan widget tersebut seolah-seolah floating.

Hanya melibatkan 6 step yang mudah dan sempoi:

Step 1

Sebelum fungsi social bookmark ni berfungsi, benda asas yang nak kena ada adalah plugin khusus untuk iaitu:

Tweetmeme; dan
FB Share.

Manakala fungsi aplikasi lain seperti digg, stumble upon, addthis dan sebagainya boleh digunakan kod HTML di laman masing-masing.

Pada masa yang sama lain-lain keperluan asas adalah:

script jquery untuk buat floating;
fail php khas untuk masukkan kod-kod bagi aplikasi social bookmark terlibat; dan
kod style CSS untuk sempurnakan kedudukan widget tersebut dalam theme masing-masing.

Tapi tok sah dok pening cari benda tu, semuanya saya sudah sediakan kat download ni. :D

Step 2

Kalau nak cuba, selepas download dan extract folder floating socials tadi, ada 5 subfolder semuanya images, plugins, scripts, socials dan stylecss.

Step 3

Buka FTP client untuk uploadkan fail-fail yang terdapat di dalam folder tu (bukan folder ya). Terus pergi ke folder wp-content/themes/’theme sendiri yg sedang digunakan’ . Detailsnya macam ni:

2 gambar dalam folder image diupload kedalam subfolder images di dalam theme masing-masing;
Di dalam folder plugins tu ada 2 plugin tweetmeme dan FB share bagi mereka yang masih belum install dalam wordpress masing-masing (yang ni optional, kalau sudah install dan ada tak payah buat);
Bagi folder scripts, uploadkan fail di dalamnya iaitu socials.js terus ke subfolder javascript dalam theme masing-masing; dan
bagi folder socials pula, uploadkan fail socials.php ke dalam root folder theme masing-masing.

Kalau masih keliru, gini caranya secara bergambar:

Nota: biasanya setiap theme mempunya nama folder unik tersendiri untuk letak javascripts ni, ada yang guna nama js, javascripts atau scripts. Jadinya kena upload ikut kesesuaian theme sedia ada.

Step 4

Bila sudah selesai proses upload, langkah seterusnya melalui wp-admin editor, buka file header.php, dan masukkan kod



<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/socials.js"></script>

ini ke dalamnya. Lokasi yang di syorkan seperti contoh dalam gambar kat bawah ni

Nota: Kalau nama folder untuk javascript theme anda lain dari scripts, kena ubah dulu perkataan ‘scripts’ tu kepada nama folder sebenar yang theme anda guna sama ada js, javascripts atau sebagainya. Ikut kat mana kita upload fail socials.js tadi. Save dan selesai bab ni

Step 5

folder socials.php yang sudah diupload tadi sepatutbnya sudah ada dalam root theme kita, scroll ke bawah dan pastikan ada fail tersebut, klik untuk melihat isi kandungannya yang merupakan aplikasi dan fungsi widget. Secara asasnya ni lah kod dia



<div id="socials_content">
<div id="socials_wrapper">
<div id="socials_widget">
 <div class="button">
  < ?php if (function_exists('tweetmeme')) echo tweetmeme(); ?>
 </div>
 <div class="button">
  <a href="http://www.google.com/buzz/post" data-button-style="normal-button" data-locale="ms" target="_blank"><img src="<?php bloginfo('template_directory'); ?/>/images/buzz.gif"/></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
 </div>
 <div class="button">
  < ?php if (function_exists('fbshare_button')) echo fbshare_button(); ?>
 </div>
 <div class="button">
  <script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square">ARTICLEURL</script>
 </div>
 <div class="button">
<a href="mailto:?subject=<?php the_title(); ?>&body=< ?php the_permalink() ?>"><img src="<?php bloginfo('template_directory'); ?/>/images/mailthis.png" alt="email" title="Send this article to a friend!" /></a>
 </div>
 <div class="button">
  <a href="#"><img src="<?php bloginfo('template_directory'); ?/>/images/myhome.png" alt="myhome" title="back to posting" /></a>
 </div>
</div>
</div>
</div>

Untuk ubah apa-apa fungsi dan aplikasi widget tu boleh ubah melalui fail ni, nak masuk apa sahaja pun boleh, janji kena sesuai dengan saiznya. Nak tambah sampai berapa pun boleh, terpulang ikut selera masing-masing, janji HTML markupnya tidak lari.

Setiap aplikasi menggunakan class “button” tu. Kalau nak ubah atau tambah apa-apa pastikan semuanya masuk dalam open-end class button tu

Step 6

Selepas tu, sudah sampai step terakhir, untuk make-up widget tu supaya sesuai dengan kedudukan theme kita. Buka folder stylecss yang diekstrak sebelum ini dan copy semua isi dalam fail tu.

Kemudian melalui wp-admin theme editor buka fail stylesheet theme kita iaitu style.css, paste kan code tadi di mana sahaja yang diingini.



#socials_content{
position: relative;
}
 
#socials_widget{
position:absolute;
text-align: left;
margin: 0px 0px 0px -90px; /**ubah kedudukan di sini**/
padding: 10px;
background: #FFF;
border-top:1px solid #dfdfdf;
border-left:1px solid #dfdfdf;
border-bottom:1px solid #dfdfdf;
}
 
#socials_widget.fixed {
position: fixed;
top:30px;
}
 
#socials_widget .button{
float:left;
clear:left;
margin-bottom: 10px;
}

Untuk mengubah kedudukan widget ke kiri atau ke kanan, boleh edit di #socials_widget dan ubah kedudukan margin tu. Nak ubah ikut warna sedia ada theme kita pun ubah kat sini jugak

Ok. Sepatutnya sudah siap dan sudah boleh berfloating. Kalau ada soklan saya cuba bantu

Newsfeed

Jangan abai pelacur, anak jalananWALAUPUN hanya pakaian terpakai, kegembiraan pada wajah sesetengah pekerja seks dan penagih dadah umpama mereka mendapat pakaian hari raya yang baru.

Abouts

Personal site where I share ideas and opinions generally in society and humanity.Specifically focuses on human resources development, leadership, management, blogging tutorials and tips, home and global affairs, photography, gadgets, entertainment as well as paid reviews and advertorials in both English and Bahasa Melayu. Currently etomyam also registered as guest writer at

email | Twitter | Facebook | RSS Feed

Responses so far...(54)

1

Thoha

said on July 1st, 2010 at 6:15 pm

tutorial yang menarik ni..terima kasih kerana berkongsi..

Reply
- 2
  
  etomyam
  
  said on July 2nd, 2010 at 12:21 am
  
  steady
  
  Reply
  - 3
    
    Thoha
    
    said on July 2nd, 2010 at 9:44 am
    
    steady bro..hehe
    artikel terkini dari Thoha: Melahirkan Keikhlasan Dalam Diri
    
    Reply
4

paan

said on July 1st, 2010 at 6:19 pm

Thanks untuk tutorial nie….

Reply
- 5
  
  etomyam
  
  said on July 2nd, 2010 at 12:21 am
  
  sama-sama…
  
  Reply
6

mijie

said on July 1st, 2010 at 6:32 pm

terbaik la bro nih, cuma saya skrg ngah ringankan loading blog sy, hold dulu
artikel terkini dari mijie: Suami asyik mengantuk je

Reply
- 7
  
  etomyam
  
  said on July 2nd, 2010 at 12:21 am
  
  bila ada keperluan baru boleh guna
  
  Reply
  - 8
    
    mijie
    
    said on July 2nd, 2010 at 6:40 am
    
    betul tu, dalam perancangan dulu
    artikel terkini dari mijie: Suami asyik mengantuk je
    
    Reply
9

joegrimjow

said on July 1st, 2010 at 7:03 pm

huuuu
da lama tinggal WP
bile ntah nak berjinak balik ni
artikel terkini dari joegrimjow: WORLD CUP – Senarai penuh pasukan ke Suku Akhir

Reply
- 10
  
  joegrimjow
  
  said on July 1st, 2010 at 7:04 pm
  
  melengkapkan 2 komen di setiap entry
  artikel terkini dari joegrimjow: WORLD CUP – Senarai penuh pasukan ke Suku Akhir
  
  Reply
- 11
  
  zik
  
  said on July 1st, 2010 at 7:07 pm
  
  takpe jeo… yang ada nie pun dah mantap tuh…
  artikel terkini dari zik: Imam muda minggu ke lima
  
  Reply
  - 12
    
    etomyam
    
    said on July 2nd, 2010 at 12:22 am
    
    mesti ada sebab tersendiri kenapa bro joe tak nak guna domain sendiri yg dah ada tu
    
    Reply
13

zik

said on July 1st, 2010 at 7:11 pm

macam ne nak buat nie… adui..
artikel terkini dari zik: Imam muda minggu ke lima

Reply
- 14
  
  etomyam
  
  said on July 2nd, 2010 at 12:23 am
  
  buat pelan2 mesti jadik
  
  Reply
15

ST

said on July 1st, 2010 at 7:16 pm

memang bagus info ni. siap dengan koding sekali.
artikel terkini dari ST: GIMP 271 kini berada dalam Ubuntu 1004

Reply
- 16
  
  etomyam
  
  said on July 2nd, 2010 at 12:23 am
  
  biar jelas untuk pelawat
  
  Reply
17

RozaniGhani

said on July 1st, 2010 at 8:39 pm

Nice tutorial bookmark ni. Sebelum ni saya guna plugin digg digg. sebelum ni, saya ada perasan bro guna plugin digg digg.
artikel terkini dari RozaniGhani: Release Anak Child Theme Twenty Ten aka 2010

Reply
- 18
  
  etomyam
  
  said on July 2nd, 2010 at 12:24 am
  
  tu masa aku try je kot plugin tu..
  
  Reply
19

zulkbo

said on July 1st, 2010 at 8:53 pm

salam saudara..
berguna banyak widget tu
tapi rasanya untuk blog
wordpress je kan..
terima kasih berkongsi
artikel terkini dari zulkbo: Berpakaian Hakikatnya Bertelanjang

Reply
- 20
  
  etomyam
  
  said on July 2nd, 2010 at 12:25 am
  
  code yg boleh di juga diguna utk blogspot juga ni
  
  Reply
  - 21
    
    zulkbo
    
    said on July 2nd, 2010 at 1:15 am
    
    ooo..ye ke?
    thanks..
    now i know..hu hu
    
    Reply
    - 22
      
      etomyam
      
      said on July 2nd, 2010 at 1:18 am
      
      dengan sedikit pengubahsuaian dari php ke html tu
23

Syafrizal

said on July 1st, 2010 at 9:22 pm

terima kasih atas tutorial ni…
dari dulu lagi mencari hehe
artikel terkini dari Syafrizal: Pameran produk halal tapi yang dipamerkan haram

Reply
- 24
  
  etomyam
  
  said on July 2nd, 2010 at 12:25 am
  
  molek jugak kalau gitu
  
  Reply
25

Nadri

said on July 1st, 2010 at 9:42 pm

klu selalu buat tutorial mcm nie, alamatnya dah boleh jadi “SIFU” kpd blogger2 lain bro…
artikel terkini dari Nadri: Baling Longkang -amp Bersih Longkang Club

Reply
- 26
  
  etomyam
  
  said on July 2nd, 2010 at 12:26 am
  
  belum sampai tahap sifu … sekadar kongsi apa yg tahu je ni hehe
  
  Reply
27

wazy

said on July 1st, 2010 at 9:43 pm

bgus gak tutorial ni,nanti nk try buat kat local host dulu
artikel terkini dari wazy: Wazy84com Pada Jun 2010

Reply
- 28
  
  etomyam
  
  said on July 2nd, 2010 at 12:27 am
  
  boleh test run guna localhost dulu bro..
  
  Reply
29

RozaniGhani

said on July 1st, 2010 at 9:44 pm

Ada dua plugin dalam link mediafire tu. Aiseh men, ingatkan satu plugin je.
artikel terkini dari RozaniGhani: Cara Buat Child Theme Untuk Twenty Ten

Reply
- 30
  
  etomyam
  
  said on July 2nd, 2010 at 12:27 am
  
  memang dua spt yg di tulis kat artikel tu
  
  Reply
31

tehr

said on July 1st, 2010 at 11:13 pm

mungkinkah boleh disesuaikan untuk blogspot?
…boleh dicuba ni
hehehe
artikel terkini dari tehr: Teman Ketawa Teman Menangis

Reply
- 32
  
  etomyam
  
  said on July 2nd, 2010 at 12:28 am
  
  boleh jugak rasanya ni…dengan sedikit pengubahsuaian dari php ke html
  
  Reply
33

Luth Textile

said on July 2nd, 2010 at 12:10 am

menarik tapi bab – bab edit code css ni aku tak mahir walaupun benda tu memang senang. huhuhu

tq share. pakai plugin je senang
artikel terkini dari Luth Textile: Panduan untuk membeli kereta terpakai

Reply
- 34
  
  etomyam
  
  said on July 2nd, 2010 at 12:29 am
  
  pakai plugin kegunaannya terhad hanya untuk bookmark je..
  
  Reply
35

kulanz

said on July 2nd, 2010 at 1:23 am

tunggu lepas tukar theme nanti bolehlah pasang social bookmark ni.. sekarang ni tak boleh lagi.. blog berat sangat..
artikel terkini dari kulanz: Statistik Blog Bagi Bulan Jun 2010

Reply
- 36
  
  etomyam
  
  said on July 2nd, 2010 at 8:18 am
  
  sekarang blog bro dah makin ok tu…laju je
  
  Reply
37

yoy

said on July 2nd, 2010 at 1:32 am

steady tutorial..:)
artikel terkini dari yoy: The Vampire Diaries Season 2

Reply
- 38
  
  etomyam
  
  said on July 2nd, 2010 at 8:18 am
  
  steady sokmo
  
  Reply
39

Affan

said on July 2nd, 2010 at 2:46 am

Wah,menarik ni.
First time wat tutor gak eh?
haha. sama lah
artikel terkini dari Affan: Nano Robot dan Projek LUCID

Reply
- 40
  
  etomyam
  
  said on July 2nd, 2010 at 8:18 am
  
  bagi yg 1st time baca
  
  Reply
41

nazra

said on July 2nd, 2010 at 10:26 am

sbnrnya naz ada gak berkenan bila memula tengok kt sini dulu tp asyik lupa nk bertanya sbb dok komen entri. alhamdulillah skrg dh ada. jd boleh la kasi bookmark dlm delicious terus

Reply
- 42
  
  etomyam
  
  said on July 2nd, 2010 at 10:45 am
  
  boleh dicuba kalau berkena tu
  
  Reply
43

RozaniGhani

said on July 2nd, 2010 at 11:20 am

Saya dah try buat floating social pada theme 2010 tapi tak jadi. Saya nak try guna theme yang awak guna selepas ini.
artikel terkini dari RozaniGhani: Cara Buat Child Theme Untuk Twenty Ten

Reply
- 44
  
  etomyam
  
  said on July 4th, 2010 at 12:35 am
  
  sangkut kat mana? tak floating ke aplikasi tak berfungsi? fbshare n tweetmeme kena install dulu
  
  Reply
  - 45
    
    RozaniGhani
    
    said on July 5th, 2010 at 10:20 am
    
    dah install macam biasa tapi tak jadi jugak. saya try theme redmudah yang awak buat itu. saya cuba detect dari mana datang errornya nanti.
    artikel terkini dari RozaniGhani: Percubaan Mengikut Tutorial Etomyam- Floating Social Bookmark Gaya Mashable
    
    Reply
46

AyieBlog

said on July 2nd, 2010 at 3:25 pm

Salam,toturial yang berguna buat pengguna wordpress selfhosting,thank q bro etomyam and nice toturial .

Reply
47

RedBoy

said on July 2nd, 2010 at 6:57 pm

alaa… ingatkan boleh pakai utk blog juga.. hehe
artikel terkini dari RedBoy: Kotak Pesanan Di Atas Kotak Komen

Reply
48

sangilapi

said on July 2nd, 2010 at 10:39 pm

memang kreatif betul
artikel terkini dari sangilapi: tradisi tukang kasut

Reply
49

lazaac

said on July 2nd, 2010 at 10:50 pm

tutorial yg menarik ni… bookmarked!

Reply
50

mancai

said on July 5th, 2010 at 2:04 pm

mudah dan ringkas untuk difahami… terima kasih bro…

Reply
51

hafizmd

said on July 5th, 2010 at 5:23 pm

terbaiklah bro..nanti kalau ade mase..nak juge cube letakkan..tapi sekarang..tgah cube ringankan load dulu..so kene hold..hehe..

anyway..thanks bro
artikel terkini dari hafizmd: Iran dalam kenangan

Reply
52

wan

said on July 30th, 2010 at 10:14 am

tutorial yang menarik bro.. try godek masuk blogspot pulak.. hehe

Reply

Ideas.Think.Share