Widget Get Connect Versi Sembang Cyber

January 25, 2012

Hari ni M'Rie nak kongsikan dengan anda semua. Bagaimana nak membuat widget "Get Connect" sama seperti dalam blog Sembang Cyber. Contohnya adalah seperti dibawah ini.
Sebenarnya tutorial ini dihasilkan atas permintaan rakan blogger. Di mana rakan blogger berkenaan berkenan dengan widget "Get Connect" tersebut.

Sebenarnya widget berkenaan dicipta adalah untuk mengurangkan masa loading blog. Di mana widget asal bagi Google Friend Connect dan juga Google Plus telah mempengaruhi masa loading blog. Disebabkan itu, M'Rie membuat kajian dengan mencipta widget berkenaan. Alhamdulillah ianya dapat membantu meringankan loading blog ini.

Download  & Upload Imej

Okay perkara pertama yang anda perlu lakukan adalah memuat turun imej-imej dibawah ke dalam komputer anda. Kemudian sila upload kesemua gambar yang telah di muat turun tadi ke dalam Picasa Web Album ataupun Picture Hosting yang anda mahukan.

Tujuan anda disuruh berbuat demikian adalah untuk mengelakkan widget ini hilang fungsi. Kerana tiada jaminan imej-imej dibawah akan terpapar di blog anda jika anda menggunakan link imej yang ada di dalam tutor ini. Tetapi anda boleh cuba dulu memasang widget ini ke dalam blog anda dan jika imej-imej dibawah terpapar. Anda tidak perlu lakukan seperti yang disuruh tadi. Tapi anda nak buat pun boleh juga. Ianya sebagai sokongan jika saya terdelete imej-imej berkenaan dari Picasa Web Album saya.




Langkah-langkah Pemasangan

Selepas anda selesai dengan langkah utama tadi. Silalah Log In ke dashboard blog anda, kemudian pilih "Layout" diikuti "Add a Gadget" dan seterusnya pilih "HTML/JavaScript".

Copy and Paste code dibawah ke dalam ruangan HTML/JavaScript tadi.

HTML/JavaScript

<div style='text-align:center;padding-top:5px;'>
<a href='http://feeds.feedburner.com/ID-Feedburner' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHCWfvh1vPkV1cdByKcgPNQ1Q-CTVyoO25WOacZaD7S3WJfsC5a3kPsAxhagrtYDtJ5DR3yVYNdPftSKLot9jgCblF7SVaatWR3n9XlRRvP7_o_v9yYz26OdffmFOG7aFEhHSe2xr67HSh/s80/Subscribe.png' width='80'/></a> <a href='http://feedburner.google.com/fb/a/mailverify?uri=ID-Feedburner&amp;loc=en_US' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwWryJE1G-0i6Ym5TUjygmQNk4perL2xVCjH0iHWa6QLFARHV1dIUKsf68j71q_1IBQ9EZDoJl_p7rjtVbm65NnQylTVngU3LDvIH8jCiwv1h4-gkS0uL_50YfO3l-nS0yhs9Oz_5vk-Da/s36/Mail.png' width='36'/></a>    
<a href='URL-FANPAGE-FACEBOOK' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPx1qoxiLc6dhoxuedz1xBlpYIMUYooSFzwnz0pkh6PF_CqEg29CXOfDwlPYurRx-z7oDodEf6P36LOLas6nuImNU8ATknv87HeX0kyuugMFJiW79rFszV6-yIqVkjtc1usJDNm7UzqEja/s80/Facebook%252520%2525282%252529.png' width='80'/></a>    
<a href='http://twitter.com/ID-Twitter' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEWPnrnuFZytB-Mnhm_0xIcw18eSVF-eMq-zJQ4f_2xXdo_98kLWfvLi-giDYnY3Fm9iwDlsNg0N9b_6aeYoEQ8CIpjnBDgpokqwiNijeCHKa9bwkl7HybKU8N4lBKxGZai-YA-gl4gAyT/s80/Twitter%252520%2525281%252529.png' width='80'/></a>
</div>
<center style='padding-top:5px;padding-bottom:5px;'><a href='http://www.blogger.com/follow-blog.g?blogID=ID-BLOG' rel='nofollow' target='_blank' title='follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoBA7pd_4CM-xgumD7AGuu3Bm_2reHn5beSIqTR8RvY5fL3u_JgQbT86EtNmEHT57xyWgZRMf9QF5aVe7SZeRhpxQzqvB1wKGlsWsOMIwRMMhu1NNAbHGqvjIFog3v-_v61oVwnufVjT7F/s118/GFC3.png' style='margin-right:2px;border:2px solid #000;'/><a href='https://plus.google.com/ID-Google-Plus' rel='nofollow' target='_blank' title='Google +'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj__Npt7Ek88H26Fmhwd0s2BB0rCTn8sKDUDVI1bK7MDNTzM-EbYmP0q2vUpUYWx2UgkBau5Ll9VH9pAFPB29MiF5wHch_-c1OHwd-68FO9PDP55IXvxh5fR8qS3pHQNV0dgp8gDs0SuWrC/s159/gfc1.png' style='border:2px solid #000;'/></a></a></center>

Langkah untuk Customize Widget Get Connect

Sekarang kita teruskan dengan arahan untuk customize widget berkenaan.
  1. Okay yang berwarna merah tu anda perlu gantikan dengan ID anda sendiri. Untuk yang gambar sampul surat tu. Anda perlu aktifkan fungsi email di feedburner. Kerana jika anda tidak aktifkan. Ianya tidak akan berfungsi.
  2. Manakala yang berwarna hijau itu pula adalah link/url bagi imej button yang anda download dan upload ke dalam hosting gambar anda sendiri. Anda boleh tukar dengan link anda sendiri.
  3. Sekian itu sahaja. Apa-apa hal boleh roger saya di facebook ataupun hantar email kepada saya melalui ruangan feedback. Nak lagi senang, anda boleh tinggalkan komen anda dibawah.

Serupa Tapi Tak Sama

Mesti anda berasa pelik. Kerana hasil yang anda akan dapat dari tutor di atas tidak sama dengan di sidebar. Okay sebenarnya widget "Get Connect" yang terdapat didalam blog ini adalah gabungan dari widget "Label Blogspot" dan juga widget "Get Connect".

Anda boleh buat sama seperti yang saya lakukan. Tapi anda haruslah men-tweak widget label kepada versi dropdown terlebih dahulu. Jika anda mahukan yang sama seperti di blog ini sila tinggalkan komen dibawah. Jika terdapat banyak permintaan. Baru saya akan buat tutor penuh widget berkenaan.

Post a Comment

 

Artikel Terkini