Tuesday, April 17, 2012

246#Ai no Kotoba ~ [Tutorial] Add Follower Widget Untuk Blogskin Cara Baru




Awal-awal beritahu, tuto ni Hana dapat daripada blog adik Yati, salah seorang pengguna Blogskins yang comel. Yati pun dapat tuto ni daripada Kitty. Setakat tu je la yang Hana tahu empunya tuto ni *dah kira kredit lah ni letak link dan nama :)* 

Sebab dah tak boleh generate code macam biasa, ada cara manual untuk sesiapa pengguna Blogskins atau mana-mana template yang nak letak Follower Widget. Follower Widget ni penting sebab bukan semua blogger boleh follow blog dengan hanya guna Button Follow comel ala Tumblr tu. Nak tahu kenapa, baca entri INI. So, alert! Korang boleh guna tuto ni.







1. Pergi ke Template dan tukar daripada Blogskins kepada Blogger Template. Sebelum tu, save template Blogskins korang kalau tak nak hilang. Kalau tak tahu cara nak tukar dari Blogskins ke Blogger Template, klik SINI

2. Pergi ke Dashboard > Design > Edit Layout. Sebab korang dah bertukar pada Blogger Template, korang dah boleh add gadget Follower. Sesetengah Blogger Template tu dah ada Follower Widget ni, sesetengah tu korang kena add guna Add A Gadget. Lepas add, save terus.

3. Korang pergi ke blog dan tekan Ctrl + U (SERENTAK!) untuk view page source. Bila dah keluar page source yang banyak kod HTML tu, korang cari kod seakan-akan kod kat bawah ni. Untuk cari code, korang tekan Ctrl + F serentak dan masukkan keyword 'friendconnet'


Page Source akan keluar kalau anda tekan key Ctrl & U SERENTAK! :)

AMARAN : Jangan copy kod ni. Setiap blog ada kod yang tersendiri. Yang ini kod untuk Follower Widget blog Hana sahaja :) 
Korang copy bermula kod <script type="text/javascript"> sehingga kod locale: 'en'}, skin); </script></div>
Rujuk kod dalam Scroll Box ni. Cari kod seakan-akan kod dalam ni.


<script type="text/javascript">
if (!window.google || !google.friendconnect) {
document.write('<script type="text/javascript"' +
'src="http://www.google.com/friendconnect/script/friendconnect.js">' +
'</scr' + 'ipt>');
}
</script>
<script type="text/javascript">
if (!window.registeredBloggerCallbacks) {
window.registeredBloggerCallbacks = true;


gadgets.rpc.register('requestReload', function() {
document.location.reload();
});

gadgets.rpc.register('requestSignOut', function(siteId) {
google.friendconnect.container.openSocialSiteId = siteId;
google.friendconnect.requestSignOut();
});
}
</script>
<script type="text/javascript">
function registerGetBlogUrls() {
gadgets.rpc.register('getBlogUrls', function() {
var holder = {};
holder.currentPost = "http://www.blogger.com/feeds/8787990000793435477/posts/default/3323307139959403149";
holder.currentComments = "http://www.blogger.com/feeds/8787990000793435477/3323307139959403149/comments/default";
holder.currentPostUrl = "";
holder.currentPostId = 3323307139959403149
holder.postFeed = "http://www.blogger.com/feeds/8787990000793435477/posts/default";
holder.commentFeed = "http://www.blogger.com/feeds/8787990000793435477/comments/default";
holder.currentBlogUrl = "http://haruno-hana.blogspot.com/";
holder.currentBlogId = "8787990000793435477";
return holder;
});
}
</script>
<script type="text/javascript">
if (!window.registeredCommonBloggerCallbacks) {
window.registeredCommonBloggerCallbacks = true;

gadgets.rpc.register('resize_iframe', function(height) {
var el = document.getElementById(this['f']);
if (el) {
el.style.height = height + 'px';
}
});

gadgets.rpc.register('set_pref', function() {});

registerGetBlogUrls();
}
</script>
<div id="div-17fr1iuczk6d3" style="width: 100%; "></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = "260";
skin['TITLE'] = "Tomodachi";
skin['BORDER_COLOR'] = "transparent";
skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#444444";
skin['ENDCAP_LINK_COLOR'] = "#09dada";
skin['ALTERNATE_BG_COLOR'] = "transparent";
skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#09dada";
skin['CONTENT_TEXT_COLOR'] = "#444444";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#09dada";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
skin['CONTENT_HEADLINE_COLOR'] = "#3b75e3";
skin['FONT_FACE'] = "normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif";
google.friendconnect.container.setParentUrl("/");
google.friendconnect.container["renderMembersGadget"](
{id: "div-17fr1iuczk6d3",
height: 260,
site: "04056827126375876332",
locale: 'en' },
skin);
</script>
</div>






4. Dah copy kod Follower korang? Bagus. Sekarang paste dulu pada Notepad. Tapi kalau korang online Facebook dan tengah menghadap profil FB korang masa ni, paste dekat Post Status aje. Maksud Hana, paste aje kod ni kat situ, tapi jangan pulak korang tekan Post. Sebagai alternatif kalau malas nak buka Notepad aje. Hana selalu buat macam ni. Ha ha.

5. Sekarang, boleh tukar balik template korang daripada Blogger Template kepada Blogskins atau apa-apa template sahajalah. Nak tuto klik SINI. Kod yang korang paste kat Notepad atau Post Status Facebook tu, korang copy dan paste lah dekat mana-mana kod Blogskins korang bahagian sidebar (Part sidebar ni kena tanya blogger yang terer coding Blogskins. Tanya Yati pun boleh) 

Macam yang ni, Hana gabungkan Follower Widget dengan Fieldset :) Dengan hanya guna tuto ni. Untuk pengguna Blogger Template yang nak guna tuto ni, boleh copy and paste pada gadget HTML/JavaScript.

Okey. Done. Kepada pengguna Blogskins yang nak tau lebih lanjut, tanya Yati sendiri. Sebab dia dah berjaya buat. Hana cuma nak sebarkan tuto ni aje untuk sesiapa yang tak tahu. Harap menjadi. Daa~ (^.^)v

71 comments:

  1. alhamdulillah.. tuto ney la yang najwa cari dari pagi sampai petang..naek pening kepala..thanks sangat sangat sangat !!!

    ReplyDelete
  2. Tuto nie berguna..Aien xpakai blogskin dah sekarang pun sebab xtahu macam mana nak letak widget follower untuk blogskin

    ReplyDelete
  3. @nice smile..beauty life... try buat baik2 ^_^ terima kasih pd Yati yg buat tuto ni juga :)

    ReplyDelete
  4. @Aien Nia hehe.. ni pon Hana jumpa blog orang len :)

    ReplyDelete
  5. @Haruno Hana 하나

    boleh tak tanye adik Hana..dye guna templete apa masa dye tukar? urgent !
    tQ :)

    ReplyDelete
  6. @pinklover dia guna Blogskins dulu dan tukar kepada Blogger Template.. pilih aje Simple Template atau mana2 template blogger.. sbb sume boleh add follower widget.. paling senang guna Simple Template

    ReplyDelete
  7. thanx for the info..nk try jg.hehe..klu rjinlah,hehee

    ReplyDelete
  8. Rajin buad tutorial~hee..nice sharing!

    ReplyDelete
  9. hana . yg step ke 3 tu x phm la .. klo bole step 3 tu hana bg contoh guna photo edit .. pls2 .. atin dh try tp yg code tulah x tau mn >_< .. bg contoh photo la ye huhu

    ReplyDelete
  10. @Atin Tory dah letak :) harap Atin faham.. kalau x pon, try tanya Yati sendiri.. sebab dia dah berjaya buat :)

    ReplyDelete
  11. wahhhh. hahaha baru haritu fiqa pening2 dgn bende nii err. hehehe thanks alot yee

    ReplyDelete
  12. @pinklover sama2 :) jgn buang kod follower tu tau ^_^

    ReplyDelete
  13. Salam ziarah dari Agunci. Jom kita belajar dari kesungguhan sang kura-kura ! Terima kasih :D

    ReplyDelete
  14. susah kan kalau org yg xde follower widget ni.. bkan main lg suruh follow balik, tp xbg kemudahan nk follow.. huhu

    ReplyDelete
  15. semua dah boleh ada widget follower lepas ni tak adalah masalah follow menfollow lagi..

    ReplyDelete
  16. @aisya betul3 :) nnti ada lak yg rasa nk marah sbb kita x follow balik :)

    ReplyDelete
  17. @AMALINA YAAKUB setuju! sapa yg kata xde tu mmg kena kasi tuto ni lah.. mmg susah kalo xde follower widget :)

    ReplyDelete
  18. alhamdulillah, menjadi laa tuto neyy :)

    thank you very much ;)

    ReplyDelete
  19. Aww I'm so glad the tutorial works for you and everyone. The tutorial was originally written by me. :D

    ReplyDelete
  20. yati pun ambik pada orang lain la kak hana! adus ... tapi ayat kat tuto yati tu macam ayat budak darjah satu.ayat kak hana memang mudah difahami.. tengs sebab dah bagi kemudahan untukk orang lain..

    ReplyDelete
  21. @Nurul Hayati tau.. amik dgr Kitty kan? Kak Hana dh ucapkan thanks pd Kitty sbb buat tuto ni ^_^ xde la masalah nk letak Follower Widget lg..

    ReplyDelete
  22. ara buat entry & linkkan kt sini http://izara4eva.blogspot.com/2012/05/cara-letak-follower-widget.html :)

    ReplyDelete
  23. awak kenapa farah buad tak buley ? lama dah crii tuto ni tapi bila dh jumpa xley plss tolong

    ReplyDelete
  24. kod follow tu nak amek dkt mana ? xphm ? ap-2 info dkt blog farah

    ReplyDelete
  25. @Nor Farah Hanim Si Comot awak kena buat step by step.. x pon tnya pengguna blogskins yg dh berjaya buat sbb hana x guna blogskins..

    ReplyDelete
  26. maaf menggangu..waktu lyn nak ctrlf ddan taip friend connect x der... nak buat macam mana yer?

    ReplyDelete
  27. @Lyn cuba buat sekali lagi :) sbb kdg2 coding x betul n x jumpa

    ReplyDelete
  28. saya dah buat 10 kali...x dapat..

    ReplyDelete
  29. @Lyn adik nk guna blogskins ke? sbb akak tgok kt blog adik dh ada follower widget.. akak dh view page source adik.. ada je friendconnect tu.. :)

    ReplyDelete
  30. saya terpaksa tukar template..actually saya pakai blogskin pas2 ikut tuto nih..pastu jadi.. sbb cari friend connect x dapat..

    ReplyDelete
  31. @Lyn owh :O kalo susah2 guna je blogger template.. bukannya susah sgt nk edit.. lg pon blogger template more flexible dr blogskins.. dulu pon akak nk guna blogskins sbb cantik ^_^ tp last2 x jd sbb x reti coding.. hehe

    ReplyDelete
  32. Salam,blogger template simple sbb Anis x pndai nk guna...nk hias cam kak Hana nye cam ne?nk ltak followers widgets tuk blogskins susah sgt...dh cuba byk kali tp xleh buat jgak...

    ReplyDelete
  33. x de la,bukan psal blogskins,tp nk tnye cam mane nk edit n tmbah widgets mcm kak hana punye blog ye?

    ReplyDelete
  34. @Anis Shahira akak guna tuto Kak Lyssa Faizureen aje selama ni.. kalo rajin, x susah mana pon.. akak guna Blogger Template Picture Window :)

    ReplyDelete
  35. thank you sesangat sis. dah jadi.

    ReplyDelete
  36. saya guna tutorial nie untuk blog sy. terima kasih :)

    ReplyDelete
  37. saya buat tak jadi lah , sebab takde code 'friendconnet' . tp , dekat sedebar blog ada button follower tuh . pelik lah . pening dibuat nyer :3

    ReplyDelete
  38. kenapa semua code tu tak ada...

    ReplyDelete
  39. thanx hana .
    sangat membantu .
    :D

    ReplyDelete
  40. thanx awk tolong sya...thanx sgt..btw,sya folo cini k :)

    ReplyDelete
  41. http://miszwa.blogspot.com

    follow blik taw . =D

    ReplyDelete
  42. Alhamdulillah. Dah menjadi ! :D Jazakallah ya ukhti :)

    ReplyDelete
  43. seriuosly dah lama carik..thank you so much dear!

    ReplyDelete
  44. saya punya tak dapatla.Tak dapat jumpa friendconnect tu.. :(

    ReplyDelete
  45. salam akak, nak tanya sikit. Saya dah jumpa code tuh tapi bila preview dia jadi kosong. nape ehh?

    tolong reply please :D

    ReplyDelete
  46. @Minah Chocolate wassalam :) akak rasa ada dua kemungkinan nape jadi kosong camtu..

    1 : kod tak jadi
    2 : line slow..
    sbb kadang2 bila line slow, kod tu tak keluar, kena reload banyak kali.. akak pun byk kali gak jadi camtu..

    cadangan akak, buat back up template, then save terus.. tengok jadi ke tak.. kalo x jadi, upload balik back up template tu.. harap dapat membantu ^^

    ReplyDelete
  47. salam , thanks bg tuto . pnat cri tak jmpe-2 , mle-2 baca pening . rupa-2nya senang jek ! TERIMAKASIH :DD

    ReplyDelete
  48. akak , dh jadik . Time kaseh2 byk2 .. dh lme scha carik tuto ni :) . klau ade mase , lawat lha blog scha .. http://littleizzah.blogspot.com/

    ReplyDelete
  49. Yaw ! thank you so much akak . tutorial nhe memang absolutely easy sangat dan saya ikut step by step, ternyata ia berhasil. Sekali lagi thank u akak. ;)

    ReplyDelete
  50. cntik u punya blog .. jeles sy.. mcm mna nk bt cntik mcm tu ? ..:( xpndai sgt nk guna blogskin .

    ReplyDelete
  51. Nice tuto nie... boleh buat follower widget warna-warni..

    ReplyDelete
  52. kak, page source saye tkde code friendconnect :( camne ek ? rep di cbox saye kayy . mekasehh

    ReplyDelete
  53. cantik la blog ni.. semua terer2.. visit blog saya... newbie.. =)
    tunjuk ajar plis

    http://southpawska.blogspot.my/

    ReplyDelete

Finished reading my entry? Why not you drop a comment or two? ;)