Saturday, April 24, 2010

Cara Memasang Gadget Follower Di Atas Footer

Mungkin diantara kalian ada yg nanya, apa sih tujuannya pake' dipasang di atas footer segala? Bukankah di sidebar aja udah cukup?

Oke... biar saya jelaskan. Saya memilih memasang gadget follower di atas footer karena saya ingin menampilkan sebanyak mungkin wajah followerku di halaman blog, agar para visitor yg mungkin sedang mencari teman, memiliki banyak pilihan untuk segera dikunjungi. Lagian saya rasa, halaman blog akan nampak lebih artistik dengan ditampilkannya gadget follower ini di atas footer.

Baiklah... nggak perlu berpanjang lebar lagi, buat kalian yg pengin memasang gadget followernya di atas footer, silakan disimak caranya berikut ini.

STEP 1
Pertama-tama, login dulu ke Google Friend Connect dengan akun gmail kalian (langsung diceklik aja nggak papa, halaman ini nggak akan tertutup koq). Setelah itu, pilih Add the members gadget.
Sampai disini kalian akan disuguhi tiga langkah pengaturan sebelum kalian mendapatkan kode HTMLnya.

- langkah pertama, Chose the gadget's size.
Sesuaikan lebar gadget dengan lebar wrap blog kalian. Pilih juga berapa jumlah row of face yg pengin kalian tampilkan.

- langkah kedua, Chose colors.
Sesuaikan warna gadget yg pengin kalian pasang dengan warna footer blog kalian. Warna yg harus kalian sesuaikan antara lain, Endcap background, Endcap text, Endcap links, Border, Content headlines, Content background, Alternate background, Content text, Content secondary text, Content links dan Content secondary links. Jangan lupa sesuaikan juga jenis Fontnya.

- langkah ketiga, Create the HTML code. Ceklik generate code untuk mendapatkan kode HTMLnya.
Contoh kode HTML yg diberikan kira-kira seperti ini,
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-3150486807714426224" style="width:920px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-3150486807714426224',
site: '09175742795655981326' },
skin);
</script>

Kalau sudah... silakan dicopy semua kode yg diberikan dan untuk sementara, titipkan dulu di notepad.
The first step is finished and now go to the second step.

STEP 2
Login to the Blogger and in the dashboard page, click layout, edit HTML.
Centang dulu Expand Widget Template dan jangan lupa save your template code in the Notepad. Buat jaga-jaga kalau nanti ada kesalahan pada proses pengeditan.
Kalo sudah... sekarang cari kode <div id='lower'>
atau kode <div id='footer'> (tidak harus sama percis. Berbeda template, berbeda pula kode footernya)
Gunakan F3 untuk mempermudah pencarian.
Kalau sudah ketemu, ambil kembali Skript Follower yg dititipkan di Notepad tadi, kemudian letakkan di atas kode barusan. Ingat ya DI ATASNYA bukan dibawahnya.

Oke.... sampai disini pekerjaan kalian telah selesai, silakan di ceklik pratinjau untuk melihat hasilnya dan kalo nggak ada kesalahan, gadget follower kalian akan terlihat jelas, terpampang di atas footer.
Selamat.... Anda telah berhasil memasang gadget follower di atas footer...!

NB :
Untuk hasil tampilan yg lebih jelas, silakan dilihat di my main blog Be A Great Person

Comments :

31 comments to “Cara Memasang Gadget Follower Di Atas Footer”

gimana kalo kucoba di blog yang lain hahay.. kayaknya menarik ni hihihi

None said...
on 

Bentar..., aku pelajari dulu ya Kang. Biasa, soal2 begini aku selalu lambat memahami... *tersipu*

catatan kecilku said...
on 

nyoba, nda, nyoba, nda, nyoba, nda ..

^^

J O N K said...
on 

Gak mau ahh, blog ane bukan biro jodoh/dll. Lo aja dah. #langsungdisemenmulutku

Ivan Rahmadiawan said...
on 

Hey, jgn lupa buka replies tweete mu dong... #merasadimusuhidah

Ivan Rahmadiawan said...
on 

Disini ademayem, d pasang AC 2PK yah? #efekwarnatemplatebiruputih

Ivan Rahmadiawan said...
on 

ohhh jadi seperti tambah gaget sob ya? saya pernah liat ada yang pake kaya gitutuh..

fauzan upz said...
on 

tak pelajari dulu kang, maklum masalah ginian rada lemot :)

Nikmatnya Hidup said...
on 

Makasih atas tutorialnya kang..salam..

Sudinotakim said...
on 

Artikel milik kang Sugeng beuki mantep waé. Naon béja kang?

Alfian Nawawi said...
on 

iki tutorial pokoke mantap

munir ardi said...
on 

Tutorial yang mantap Kang...
untuk memunculkan lebih banyak sahabat yang sudah menjadi follower kita.

Seti@wan Dirgant@Ra said...
on 

Ijin bookmark tutorialnya mas..
makasih ^_^

Ajeng said...
on 

mantaf, makasih atas tutor and codenya

Dewi said...
on 

walaaahh ini tho blog tutorialnya
wuihhhh uwadem pisan iki mas
biru putih cool.....
tutorialnya mantep...

bintang said...
on 

mmmm gitu ya kang. pengen juga nyoba tapi belum sempet utak atik blog...
hehehe
bener-bener biar semua wajah kebagian tempat. tooppp!!

mayank said...
on 

makasih tip'snya, asyik follower di footer.
kopi dulu tipsnya

Nyach said...
on 

Aku save dulu kawan.Untuk sementara aku masih senang pasang di side bar saja lebih enak kagak ribet.trims

Sungai Awan said...
on 

Kayaknya makin berat loadingnya blog jika dipasang di footer ya kawan ya...entahlah..

Sungai Awan said...
on 

info yang menarik sob! makasih udah berkunjung ke rumahku .....

bonk AVA said...
on 

Wah keren kang tutorx. Ane save dl ya. Trims kang dh dshare..;-)

Ratasoe said...
on 

blognya asik....
matur nuwun tipsnya.....tak bookmark

salam kenal gan

love to share said...
on 

hoke...hoke...nanti kami coba..^_^
salam kenal

Tour, Food, and Health said...
on 

ijin save dulu postingnya.. sewaktu-waktu ntar digunain..
makasih sob..

orang kampung said...
on 

hm.....jd bingung, tetep di samping ato di atas ya..

TUKANG COLONG said...
on 

Boleh juga nie buat blog ku yang lainnya hhe.....coba dulu ah....makasih info'y.....

Ferdinand said...
on 

mangtabz tutornya gan! tar kapan" dicoba, monggo..

AeArc said...
on 

Wach sepertinya keren nich tutorialnya,ijin copy dulu dan kpn2 klo lg ol langsung diterapkan...:D

Makasih infonya mas dan slm knl...:D

infophone kdr said...
on 

Makasih atas tips dan tutorialnya mas,sangat bermanfaat bagi pemula seperti saya...:D

Slm knl dari kediri dan semoga sukses...:D

infophone kdr said...
on 

Makasih gan !!!
Lam knal z

Sandy Sachrial said...
on 

oceeee sipppp hahha

arief said...
on 

Post a Comment

[ Full Page Comment Form ]

Please leave your comment after reading. If you don't have a google account, you can comment with name / URL.
URL column is optional.

Don't include links in your comment !!!