About Me
19 Ogos 1994 (19)
Kota Bharu, Kelantan
UniKL MESTECH (Sept '13)
Bachelor of Clinical Laboratory Science (Sept '13)
novelist of Penerbitan Kaki Novel
LATEST : July 10th : Salam Ramadhan :)

Haruno Hana

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


May Allah SWT Bless Us. Thanks For Visiting

70 kuntum sakura ♥:

nice smile..beauty life... said...

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

Aien Nia said...

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

Haruno Hana 하나 said...

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

Haruno Hana 하나 said...

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

pinklover said...

@Haruno Hana 하나

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

Haruno Hana 하나 said...

@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

profmie said...

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

Cik Farhana said...

Rajin buad tutorial~hee..nice sharing!

Atin Tory said...

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

Haruno Hana 하나 said...

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

Detective Fiqa said...

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

Haruno Hana 하나 said...

@Detective Fiqa hehe.. welcome :)

pinklover said...

da jadi..terima kasih :)

Haruno Hana 하나 said...

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

ridoma said...

nice tuto =)

Haruno Hana 하나 said...

@ridoma hehe.. thanks :D

peace289 said...

alalala tomei nye....ahakz

- Agunci - said...

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

aisya said...

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

AMALINA YAAKUB said...

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

Haruno Hana 하나 said...

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

Haruno Hana 하나 said...

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

Eika Nur said...

alhamdulillah, menjadi laa tuto neyy :)

thank you very much ;)

Rafi Nilhan said...

nice one :)

Kitty said...

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

Nurul Hayati said...

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..

Haruno Hana 하나 said...

@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..

jia creatifelt said...

sangt bgus info...=)

jia creatifelt said...

thanks alot dear..berjaya!!!>_<

aRa ❤ aFiq™ said...

wah nice tuto :)

aRa ❤ aFiq™ said...

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

Nor Farah Hanim Si Comot said...

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

Nor Farah Hanim Si Comot said...

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

Haruno Hana 하나 said...

@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..

Amirah Zulhijjah said...

nice tuto..izin share...:)

Lyn said...

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

Haruno Hana 하나 said...

@Amirah Zulhijjah ^_^

Haruno Hana 하나 said...

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

Lyn said...

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

Haruno Hana 하나 said...

@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.. :)

Lyn said...

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

Haruno Hana 하나 said...

@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

Anis Shahira said...

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...

Anis Shahira said...

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

Haruno Hana 하나 said...

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

Anis Shahira said...

@Haruno Hana 하나 ok kak,thanks...Anis cuba...

missp0tpet said...

thanks 4 de info.. ;)

wanie :) said...

thank you sesangat sis. dah jadi.

иιиα αмιяα said...

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

nashya (นิชคุณ) said...

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

aNiS aIsHaH said...

kenapa semua code tu tak ada...

Wawa Yuni said...

thanx hana .
sangat membantu .
:D

Gadis bertudung said...

wah menjadi!thanks hana :D

Juliana lia said...

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

! ♪ ♫ ♩ ♬✿ Siti Nadirah ✿ ! ♪ ♫ ♩ ♬ said...

dah jadi la.. tq sgt2 . dah lma nak cri kod followers.. :)

miszS wANie said...

http://miszwa.blogspot.com

follow blik taw . =D

AinnYusri said...

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

Iera Lee said...

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

farhana said...

terima kasih..

akmar said...

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

Minah Chocolate said...

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

tolong reply please :D

Haruno Hana 하나 said...

@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 ^^

Fatin Nur'Aqillah said...

Tutor berguna...menjadi..TQ yea

REDred melon said...

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

Sya Izzah said...

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

Ashjbxoxo said...

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. ;)

Marha Safwah Amni said...

Ahhh . thanks banyakbanyak . lov yaa

♥nafisahzulhilmi♥ said...

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

Nurrul said...

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

Syah Eyda said...

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

All Rights Reserved by Haruno Hana ;)