Modifikasi Tampilan Widget Followers - Menambahkan widget Followers GFC (Google Friend Connect) akan memberikan keuntungan terhadap blog kita, diantara keuntungannya adalah Link artikel kita akan muncul pada dashboard pengikut / followers. Akan tetapi terkadang tampilan widget ini tidak sesuai dengan apa yang kita inginkan.widget followers

Dengan melakukan hal ini, bukan saja merubah tampilan widget followers, tapi juga akan membuat blog valid HTML5. Syaratnya, setelah semua langkah selesai, hapus kode <b:include name='quickedit'/>

Dibawah ini screenshoot hasil modifikasi dan valid HTML5.

widget followers

Apabila sobat ingin membuat tampilan berbeda, atau ingin membuat widget valid HTM5, silahkan ikuti dengan cermat langkah-langkah berikut ini.

Langkah 1 : Tambahkan widget Followers (lewati langkah ini kalau sudah ada)
Untuk menambahkannya klik Tata Letak -> Tambahkan Gadget -> Gadget Lainnya -> Pengikut

Langkah 2 : Buka blog sobat.
Klik liat sumber laman / view page source

Langkah 3 : Cari kata kunci renderMembersGadget dan lihat kode dibawahnya.
Perhatikan pada kode id dan site. seperti pada gambar di bawah ini:

widget followers

Langkah 4 : Buat widget baru HTML/JavaScript, simpan kode ini :
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-4769418095313647753" style="width:300px;border:1px solid #ff4800;"></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '42';
skin['BORDER_COLOR'] = '#000';
skin['ENDCAP_BG_COLOR'] = '#ff0000';
skin['ENDCAP_TEXT_COLOR'] = '#fff';
skin['ENDCAP_LINK_COLOR'] = '#f0ff00';
skin['CONTENT_BG_COLOR'] = '#ddd';
skin['CONTENT_LINK_COLOR'] = '#0027cf';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_HEADLINE_COLOR'] = '#007b03';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-4769418095313647753',
   site: '17038536110807365684'},
  skin);
</script>
Tugas sobat adalah mengganti 2 kode ID dan 1 site, dengan kode yang didapat dari page source (Langkah 3).

Langkah 4 : Hapus widget Followers bawaan Blogger (ihat Langkah 1)

Langkah 5 : Hapus kode <b:include name='quickedit'/> supaya valid HTML5. Abaikan jika sobat males ber-valid2 ria :)

Sampai di sini, sobat sudah membuat tampilan yang berbeda dari biasanya dan widget sudah valid HTML 5.

Modifikasi Tampilan Widget Followers


Untuk memodifikasi sesuai keinginan soobat, buka kembali widget yang tadi dibuat (Langkah 4), edit warna dan pengaturannya. Untuk memudahkan editing lihat panduan gambar dan keterangannya :

widget followers

Keterangan :

1. ENDCAP_LINK_COLOR
2. ENDCAP_BG_COLOR (Background atas / contoh gambar warna merah)
3. ENDCAP_TEXT_COLOR (tulisan : With Google Friend Connect)
4. BORDER_COLOR (garis dibawah blok merah)
5. CONTENT_HEADLINE_COLOR (Tulisan Member 530)
6. CONTENT_LINK_COLOR (tulisan More dan Sign in)
7. Garis pinggir, ganti kode warna #ff4800
8. FACE_SIZE (ukuran avatar)
9. CONTENT_BG_COLOR (background bawah)
10. CONTENT_TEXT_COLOR (tulisan Already a member?)

Kode skin['NUMBER_ROWS'] = '4'; adalah berapa baris avatar ditampilkan. Ganti angka 4 sesuai keinginan. Sesuaikan juga lebar widget dengan mengganti kode 300px.

Apabila masih ada pertanyaan silahkan di share di kolom komentar...

127 komentar

Walah... Muter2 nyari yang ini, eh nemunya di sini juga. Hahaha, Thanks Kang Ismet :D

Balas

kalu templatenya belom valid html5 bisa kagak, kang?
keren tuh modifnya :)

Balas

valid html5 lagi ya? hihihihi :D

Balas

Oke dah :D langsung praktekin aja :D...

Mohon maaf kang, bisa nggak agar url replace yang ini, blognya yang dituju pindah ke http://mestiqui.blogspot.com/ , terimakasih kang

Balas

Keren kang,,,,,,tapi sayang mau di pasang blum ada pengikutnyahh he,,,,

Balas

Yaa...seperti itu kang...
Dulu dengan ini ketika blog ditranslate jadi ga kebaca kang GFC-nya...tapi ga tahu kalau sekarang mah...

Balas

soalnya artikelnya baru.. makanya baru ketemu :)

Balas

bisa, ini bukan untuk validasi aja.. intinya merubah tampilan

Balas

supaya satu jalur sob :)

Balas

kalau ga dipasang, kapan ada pengikutnya ki... :)

Balas

o gitu ya.. saya jarang translate sih kang

Balas

Iyah juga ya kang,,,Mau dapet togel tapi gak pernah masang ya gak mungkin dapet lah,,,
Maklum kan dah pikun,,he,,,.

Balas

berarti widget asli bawaannya di hapus aja kang?

Balas

Karena masih baru jadi bisa di coba nih kang.. thanks..

Balas

design yg menarik.. Thanks for sharing Mas

Balas

semakin sibuk dengan mr.valid nih .. hehe
tapi btw keren oge kang ... mantapppp

Balas

beda yeuh nu jago nga mistik angka .. masang 87 kaluar 34 pajarkeun teh ngageris ceunah ki hehe

Balas

wah valid html5 lg nih :D,ini nih yg ane cari2 dari dulu, soalnya kalo pake widget followers gfc default suka kelebaran kang :(, jd ngga keliatan rapih gitu, nah kalo yg ini kan jadi bisa diatur width nya dan bahkan warnanya juga :), makasih banyak ya kang, oiya BTW susah bgt pertamax di blog kangismet :v

Balas

kreatif ni, ijin nyoba.. walaupun blm ada followernya hehe..

Balas

maaf oot ..kurang srek nih kang pada tulisan tooltip " klik ganda untuk seleksi " gak sejajar .. jadi kurang rapi !!

Balas

gan minta kode related post di blog ini boleh?

Balas

Keren-keren, oh iya kang Kok blog-pager Blog saya gk muncul? Saya coba cari Tag kondisional tidak ada?

Balas

kumaha atuh da tuntutan kang... jawaban petanyaan saleresnamah

Balas

ukuran avatar juga bisa diatur ko... kalau susah pertamax.. premium aja :)

Balas

silahkan.. nanti juga ada pasti

Balas

ngahaja tadinamah kang :)

Balas

kok susah.. kalau ga bisa, dari template aja

Balas

CSSnya intip aja.. ini scriptnya :
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h2>Kunjungi juga artikel lainnya</h2>&#39;;rn=&#39;<h2>Tidak ada artikel yang berhubungan</h2>&#39;;rcomment=&#39;Komentar&#39;;rdisable=&#39;Komentar di nonaktifkan&#39;;commentYN=&#39;yes&#39;;</script>
<script type='text/javascript'>
//<![CDATA[
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><img alt="'+titles[c]+'" src="'+thumb[c]+'"/><div><h3><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h3><span>'+timeR[c].substring(8,10)+'/'+timeR[c].substring(5,7)+'/'+timeR[c].substring(0,4)+comments[c]+'</span></div></li><div style="clear:both"></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>

Balas

saya liat ada ah... kalau emang ga muncul, coba tambah <div class='clear'/> di atas <div class='blog-pager' id='blog-pager'>

Balas

kok gak muncul2 ya? pencerahanya nya dong

Balas

hmdetail banget.. mantap mantap mantap

Balas

mikum kang.kern bin mantep cm ane gk bisa pasang widget gfc di blog ane,ane gk tau knp mohon di bantu kang biar bisa pasang widget gfc.

Balas

Ternyata bisa di modif2 gitu ya Kang.. :D
oiya kang, saya sudah pakai CSS terpisah, tetapi di chrome dan browser lain selain firefox hasilnya tetap sama, iklan masih ada scrollnya. Saya sudah konsultasi ke Mas Kompi Ajaib, katanya chrome nya mungkin sudah tidak up to date, tapi Chrome saya yang versi sekarang sudah versi 29.x.x.x apa saya harus re-install chrome saya ya??

Balas

Tetep kekeh gk muncul :( Saya cari gk ditemukan kok kang ?

Balas

keren uy, di ulik we nya kang :D

Balas

w'alaikum salam.. kayaknya tutor diatas udah jelas sob

Balas

kalo dengan modifikasi tampilan followers saya yakin bisa valid karena kalo tetap defaul blog kode quickedit tidak bisa dihapus dan kalo dimodifikasi bisa tambah keren. thx kang ismet

Balas

kalau di pas ukurannya gimana width="728" height="90" ?

Balas

hehehe.. ulik terus kang

Balas

sama2.. semoga bermanfaat

Balas

blognya yang mana? takutnya saya salah :)

Balas

iya kang, mantap.... terus berkarya :)

Balas

Pantasan pernah jalan-jalan keblog teman tidak sengaja nemu bentuk widget follower GFCnya lain daripada yang lain alias lebih terlihat tampilannya menarik.Rupanya disini tutorialnya jadi tidak penasaran lagi ini Kang :)

Balas

Tetap sama Kang, kan awalnya width bawaan 738 dan height bawaannya 100, saya ganti ke 728 dan 90, tapi hasilnya sama.. Lalu apanya ya? bingung saya :( ..

Balas

Halo kang ismet,

Kang, tau cara mengatasi jumlah post yang tidak sesuai dgn pengaturannya?

Penjelasan : Di pengaturan jumlah post, saya atur 20 per halaman. Tapi waktu di cek malah 17 per halaman... Nih blog yg bersangkutannya http://game-mfn.blogspot.com

Ditunggu jwbnya ya kang, bsa di kirim ke mahogra.fauzan@gmail.com :D

Balas

beeuuh.. udah nanya, nyuruh ngirim ke email lagi :p

Balas

hehehe.. @Mahogra: cari aja di google dengan kata kunci BLOGGER AUTO PAGINATION pasti ada... :)

Balas

semar badranaya : hahaha perhatian pisan hihi antep we atuh wkwkwkwk

Balas

Akhirnya Kang Ismet posting juga. Udah saya tunggu-tunggu nih.

Balas

Izin praktek! comment back! http://dovinize.blogspot.com/2013/08/tips-dan-trik-menjadi-orang-keren.html

Balas

kang isment memang udah melebihi master kalo buat artikel...

ane salut!

#sukses selalu kang.. tetap berjaya dan sehat selalu....

#salam dari blog STAR-US

Balas

apa istilahnya ya kalo lebih dari master :)
sama aja ko masih belajar saya juga

Balas

pedoo mang! , ubrak-abrik .. cemungudhh ^_^

Balas

Heheheh pasti ada photo kang Ismet di situ heheheh... :D

Balas

Wah... bagus dicoba nih... Agar widget ini seragam dengan warna blog...

Btw kang, saya mau tanya... Saat saya share link .blogspot.com di facebook... Kan ada kayak pratinjau. Nah, disitu linknya jadi .blogspot.com.au (kayak redirect url lokasi)... Mohon penjelasannya? maaf saya bertanya di komentar artikel ini...

Balas

biasanya karena banyak visitor dari Australia. supaya tetep menggunakan .COM simpan kode ini dibawah <head> :
<script type='text/javascript'>
var blog=document.location.hostname;var slug=document.location.pathname;var ctld=blog.substr(blog.lastIndexOf("."));if(ctld!=".com"){var ncr="http://"+blog.substr(0,blog.indexOf("."));ncr+=".blogspot.com/ncr"+slug;window.location.replace(ncr)}
</script>

Balas

tutorial ini bukan buat master :D

Balas

lama ngantosan posting jadi weh terus nongkrong !!!

Balas

hehhehe... nuju rariweuh kang :)

Balas

nuhun atuh berguna mah :)

Balas

ajib... keren kang.. valid.. :D .. thanks.. sangat membantu..

eh. kang maaf ni OOT bentar.. mau nanya nih.. cara bkin slot banner seperti ini gmna kang??
[img]http://s21.postimg.org/u38n9mv9z/Screenshot_12.png[/img]
terima kasih sebelumnya.. :)

Balas

intip aja source code saya ;)

Balas

saya terus memperhatikan modifikasi ini dan kesimpulan awal adalah gambar profil yang sedikit buram kang !!!

Balas

kalau diperbesar iya jadi buram...

Balas

mantab abis dah ..
di coba kang modifikasi tampilan widget follower nya ..
2 Jempol dah buat kang ismet ..

Balas

mantab kang sekali lagi keren, super,salam super!
- damai kang ismet! -

Balas

makasih kang, dah ane pasang :)

Balas

sudah saya hapus tapi balik lagi. mohon solusinya mas :)

Balas

<*b:include name='quickedit'/>

Balas

biasanya itu widget attribution, hapus aja widgetnya

Balas

Nah ini dia artikel yang saya cari arkhir muncul juga
Di blognya Kang Ismet, ijin belajar untuk di terapkan di blog saya
Hatur nuhun pisan Kang, atas Artikel dan ilmu nya. sukses terus yah

Balas
Komentar ini telah dihapus oleh pengarang.

Terimakasih infonya mas admin,,, trik ini telah saya terapkan di blog saya dan hasilnya sangat menyenangkan ^_^
Terima kasih nice sharenya yg sangat bermanfaat bagi saya ^^

Btw gimana caranya membuat komentar pengunjung terblok secara otmatis jika melanggar aturan kita? makasih infonya ^_^

Balas

maksudnya memasang link aktif atau kaya ngiklan gitu?

Balas

Iya begitu mas ^_^

Tadi saya berkomentar disini gak pasang link aktif, tetapi hanya menulis sesuatu yg maksudnya silakan kang ismet melihat hasil saya memasang gadget followers di blog saya. Tetapi komentar saya malah terblokir otomatis.

Pertanyaan saya adalah gimana caranya bikin seperti itu? agar org yg berkomentar menurut kita spam terblokir secara otomatis ^_^

Balas

edit kata2nya.. tambakan juga class untuk 'cite'
<script type='text/javascript'>
//<![CDATA[
function blockNotAllowed(parentID, children) {
var parent = document.getElementById(parentID),
content = parent.getElementsByTagName(children);
for (var i = 0; i < content.length; i++) {
var regex = /(^| |>)(minta template|bagi template|kunjungi blog saya|visit back)(<| |$)/g,
html = content[i].innerHTML;
content[i].innerHTML = (regex.test(html)) ? '<del>' + html.replace(regex, "$1<mark>$2</mark>$3") + '</del><br><br><cite class=\'note\'>Kata-kata yang ditandai sudah tidak diperbolehkan dalam komentar.</cite>' : html;
}
}
// Jalankan fungsi!
blockNotAllowed('comment-block', 'p')
//]]>

Balas

Oke makasih banyak penjelasannya mas,,, ntar saya kasih tahu hasilnya. Skrg mau saya uji coba dulu :-)

Balas

follow back ya mas bro :) di tunggu

Balas

maaf mau tanya lagi kang ismet,kode script itu dipastekan di dekatnya kode apa? makasih.

Balas

saya save gak mau, katanya; The element type "script" must be terminated by the matching end-tag "</script"

terus cara nambahkan class untuk 'cite' itu gimana? maaf jadul nich ^_^

Balas

Kang saya mau tanya, kok widget folloer blog saya nggak muncul-muncul sih ?

Balas

kang ane gx ke temu di template ane yang namanya -> renderMembersGadget

coba cek di template ane kang maftuhijore dot blogspot dot com

Balas

ketemu ko sama saya :) tinggal ganti aja kode di atas dgn ini :

ID= div-1peitnd47tcx8
site= 00137369076225942038

Balas

saya mau coba dulu kang .. terima kasih artikelnya sangat berguna buat saya..

Balas

tambakan juga class untuk 'cite' itu gimana maksudnya mas, apa yg hrs saya tambahkan di 'cite'

Balas

Sangat membantu kang.. makasih :D

Jangan lupa kunjungi blog ane di http://mz-allishere.blogspot.com

Balas
Komentar ini telah dihapus oleh pengarang.

jadi iri kang...semua sudah berhasil memasang GFC nya
sedang di blog saya muncul cuma sebentar habis itu cuma kotaknya saja yang muncul..
mohon pencerahan kang... freejustforu dot blogspot dot com
terima kasih sebelumnya kang

Balas

kode nya dihapus semua ya kang ?
btw thanks udah berbagi tips ini, dan tutorialnya sangat bagus untuk saya yang masih newbie |o|

Balas

Pagi, kang..! sarapan dulu sambil ngopi + rokok,
oh ya kang kalau saya ko upload image profile "joint this site" ko selalu gagal yah kang.

Balas

bingung ama blogger nih kang..

Balas

Keren kang infonya :)

Salam kenal dari saya...

Balas

numpang min http://webpasst.blogspot.com/2014/04/trik-download-film-di-ganool-dari-hp.html

Balas

Mas Ismet Maksudnya Valid HTML5 itu apa ya ?

Balas

mantep kang trikna ku abdi diaplikasiken diblog,, nuhun templatena oge kang

Balas

kang blog saya tidak bisa menambahkan widget blog follower ituh, terus gmna caranya ,,, mohon pencerahannya kang.

Maaf kash link biar di tinjau kang, http://templategratisblogger.blogspot.com/.

Balas

ijin praktek dan kopi kodenya bos...

Balas

Kala belum ad kode HTMLnya di atas trus gimana...

Balas

Nice Share kang
Sukses terus dan semoga terus dapatkan kebaikan karena akaang selalu memberikan yang terbaik buat semua akan dibalas kebaikan oleh orang orang sekitar

Balas

kang renderMembersGadget g ketemu, tolong bantu, ini blognya
http://clickandskip.blogspot.com

Balas

punya gua gk ada id membernya kang. gimana nih? trus kalo nempel widget followers langsung di blog, gk bisa tampil -.-

Balas

renderMembersGadget nya ga ada kang ..

bijimane nih -_-

Balas

Thanks kang Ismet notif blog nya udh jadi NB: http://hendra-gunawan11.blogspot.com lumayan musmet ngedit temlate sama nyatuin notif nya..:(

Balas

wa sudah lama ga mampir kesini, tampilan blognya makin keren... ikut nyoba widget ini ya, trims

Balas

sudah saya coba kang dan berhasil terima kasih ya kang. silahkan anda lihat di blog kami jika kang ismet berkenan..

Balas

Makasih gan ! Moga tambah ganteng :D

Balas

kang nahanya di blog abdi mah teu kapendak renderMembersGadget cek kang bangsantri.blogspot.com

Balas

wah.. naha nya... ke urang tingali

Balas

kumaha kang? kapendak hnteu??

Balas

Kang, kumaha aya teu renderMembersGadget dinu blog abi teh? Duh puntn ngawagel kang..

Balas

aduh.. rada riweuh kang.. teu acan kabujeng :D

Balas

Poskan Komentar


×
Chat