Langkah Pemasangan Butang Perkongsian Sosial (WordPress)

Diterbitkan Pada . Oleh

Jika korang perasan, blog ini mengalami perubahan sedikit sejak semalam apabila aku menambah butang perkongsian sosial pada bahagian atas dan bawah entri. Jika sebelum ini aku hanya memasang butang Facebook Like dan Tweet Button, kini ia ditambah dengan butang Google+. Idea untuk menambah butang ini datangnya dari paparan tema blog Amanz.MY. Disebabkan ia nampak kemas, lalu aku dengan tiada perasaan bersalah aku mencuri idea tersebut.

Jika korang merupakan pengguna tema Thesis, korang boleh mengikuti tutorial khas untuk tema tersebut di blog Si Bintang. Jika korang bukan pengguna Thesis, korang boleh cuba cara yang aku akan tunjukkan ini. Oh ya, paparan pada butang ini juga agak berbeza jika dibandingkan dengan butang yang terdapat pada entri Si Bintang.

 

 

Contoh Butang Sosial Dari Sibintang

 

Satu perkara lagi, buat masa ini, tutorial butang perkongsian sosial ini hanya untuk pengguna WordPress. Aku akan cuba mengubah kodnya bagi pengguna Blogspot dapat menggunakannya. InsyaAllah.

Langkah Pemasangan.

1. Pertama sekali, sila ke bahagian Appearance Editor.  Dashboard > Appearance > Editor.

2. Pastikan korang berada di style.css kerana proses pemasangan akan dimulakan.

Sesetengah theme, korang perlu memasukkan kod dibawah pada lokasi yang lain.

3. Masukkan kod dibawah ke dalam style.css tadi.

Sebelum melakukan pengubahsuaian, aku sarankan korang buat backup kod asal sebagai langkah berjaga-jaga.

4. Seterusnya, pergi ke header.php dan masukkan code dibawah sebelum </head>.


5. Seterusnya pergi ke Single Post (single.php), dan masukkan pula kod dibawah pada tempat yang korang mahu.


Korang boleh memilih untuk meletakkan pada bahagian atas atau bawah entri atau kedua-duanya. Tetapi diingatkan, sila lakukan backup pada kod asal.

6. Sila periksa samaada pemasangan butang sosial ini berjaya. Jika tidak, sila cuba sampai boleh. Boleh tanya pada aku, tetapi mungkin jawapan korang akan terima sedikit lewat.

Tambahan

Untuk butang sosial Facebook, terdapat 2 jenis butang yang disediakan (sila rujuk gambar dibawah). Bagi kod diatas, ia menggunakan butang jenis ‘a’. Bagi mereka yang mahukan butang jenis ‘b’, sila tukarkan kod Facebook diatas, kepada kod dibawah.


Jika kedudukan butang sosial ini kelihatan sedikit terkeluar dari entri, sila lakukan pengubahsuaian pada kelebaran butang Facebook. Ini kerana, kod yang aku buat ini mempunyai kelebaran kira-kira 580px.

Akhirnya berjaya jugak aku siapkan entri ni. Banyak error masa nak lihatkan kod. Kod ini diubahsuai dari kod yang dibuat oleh AzmanIshak. Bagi mereka yang mahu berkongsikan kod diatas, sila lakukan backlink kepada entri ini dan kalau ada yang nak kongsi, tolong jangan lakukan hotlinking pada gambar diatas. Sila save dan upload semula. Hargailah usaha aku membuat kod dan tutorial ini.

 

56 Komen Diterima.

  1. Azah

    23/07/2011, 12:04 pm

    ak pun dah pasang, curi code dr amanz.my jgk.. x pe dh mintak kebenaran dia utk curi. tp thanks buat tutorial ni, sbb sblm ni pun ak ada masalah jgk utk psg dgn betul. now br blh psg yg betul2 punya. :D

    Reply
  5. Affan

    23/07/2011, 01:23 pm

    aku dah pernah buat dulu, ada org suruh aku update dgn butang G+ aku malas nak buat haha. btw, ada background tu nampak lebih nice.

    Tau tak apa problem die? width untuk setiap theme tak sama. tapi macam ko nye theme ni standard size kut, dalam 600px camtu. Kalau nak bg lebih flexible, width tu mungkin blh tukar guna % hehe.

    Btw, untuk blogspot pun dah ada org buat. Cuma perlu tambah css untuk background je. Settle

    P/s: aku pnh cuba wat untuk genesis, masih belum berjaya lagi dgn hook2 yang ada

    Reply
  13. Azuan

    01/08/2011, 04:40 am

    Emm, yg facebook like tu kan, aku tak letak kod ni: div id = ” fb-root ” / div
    Ok ke bro?
    Emm, aku nak yg gambar ikon tu ek… :)

    Reply
  15. Izwan

    02/08/2011, 12:02 pm

    bro..dah pasang tapi google plus pnya button tak keluar la..
    lagi satu code facebook ( b ) tu rasanya takde semicolon kat akhir ( ; )

    Reply
  18. Mr Leypark

    04/09/2011, 03:28 am

    bro, lain je aku punya walaupun jadi.. background image maca tak keluar je.. warna sama je dalam aku punya bro.. nak letak mana lagi ek?

    Reply
  19. eddyhata

    10/09/2011, 01:32 am

    tutorial menarik…tapi saya jumpa satu plugin yg memudahkan nak pasang butang sosial ni…dengan aktivate saje.tak perlu nak paham kod html ni.download plugin ni …Facebook , twitter , google-new button pastu setting saje nak letak kat bawah atau kat atas.just nak kongsi….

    Reply

Tinggalkan Komen Anda

:amazed: :angel: :angry: :beaten: :bored: :clown: :confused: :cool: :cry: :devil: :doubtful: :emo: :frozen: :grin: :indian: :karate: :kiss: :laugh: :love: :millionaire: :nerd: :ninja: :party: :pirate: :punk: :sad: :smile: :speechless: :sweating: :tongue: :vampire: :wacky: :wink: :actress: :archaeologist: :artist: :comedian: :genius: :hippie: :newpolitician: :politician: :queen: :robot: :singer: :villian:

(*) Penting!! Jangan tinggalkan ianya kosong!

Trackbacks/Pingback

  • Langkah Pemasangan Butang Perkongsian Sosial (Blogspot) | MrPiratz[dot]Com
  • Memasang Butang Perkongsian Sosial Pada Wordpress | Ahmad Rushdi Dot Com