Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.
Beranda
Blogger Tutorial
Widget

Modifikasi Tampilan Widget Followers GFC

Cara merubah tampilan Widget Followers di blog dan menjadi Valid HTML5.
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...
#Blogger Tutorial #Widget

122 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Walah... Muter2 nyari yang ini, eh nemunya di sini juga. Hahaha, Thanks Kang Ismet :D
    1. soalnya artikelnya baru.. makanya baru ketemu :)
  2. kalu templatenya belom valid html5 bisa kagak, kang?
    keren tuh modifnya :)
    1. bisa, ini bukan untuk validasi aja.. intinya merubah tampilan
  3. valid html5 lagi ya? hihihihi :D
    1. supaya satu jalur sob :)
  4. 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
    1. siap laksanakan :)
  5. Keren kang,,,,,,tapi sayang mau di pasang blum ada pengikutnyahh he,,,,
    1. kalau ga dipasang, kapan ada pengikutnya ki... :)
  6. Yaa...seperti itu kang...
    Dulu dengan ini ketika blog ditranslate jadi ga kebaca kang GFC-nya...tapi ga tahu kalau sekarang mah...
    1. o gitu ya.. saya jarang translate sih kang
  7. berarti widget asli bawaannya di hapus aja kang?
    1. iya dihapus aja
  8. design yg menarik.. Thanks for sharing Mas
    1. sama2 sob..
  9. semakin sibuk dengan mr.valid nih .. hehe
    tapi btw keren oge kang ... mantapppp
    1. kumaha atuh da tuntutan kang... jawaban petanyaan saleresnamah
  10. 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
    1. ukuran avatar juga bisa diatur ko... kalau susah pertamax.. premium aja :)
  11. kreatif ni, ijin nyoba.. walaupun blm ada followernya hehe..
    1. silahkan.. nanti juga ada pasti
  12. maaf oot ..kurang srek nih kang pada tulisan tooltip " klik ganda untuk seleksi " gak sejajar .. jadi kurang rapi !!
    1. ngahaja tadinamah kang :)
  13. gan minta kode related post di blog ini boleh?
    1. 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>
  14. Susah dihapus :(
    1. kok susah.. kalau ga bisa, dari template aja
  15. Keren-keren, oh iya kang Kok blog-pager Blog saya gk muncul? Saya coba cari Tag kondisional tidak ada?
    1. saya liat ada ah... kalau emang ga muncul, coba tambah <div class='clear'/> di atas <div class='blog-pager' id='blog-pager'>
  16. mantab nih
    1. tengkyu sob
  17. hmdetail banget.. mantap mantap mantap
    1. tengkyu sob
  18. 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.
    1. w'alaikum salam.. kayaknya tutor diatas udah jelas sob
  19. 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??
    1. kalau di pas ukurannya gimana width="728" height="90" ?
  20. keren uy, di ulik we nya kang :D
    1. hehehe.. ulik terus kang
  21. 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
    1. sama2.. semoga bermanfaat
  22. 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 :)
  23. Nice kang ;D
  24. 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 [email protected] :D
    1. beeuuh.. udah nanya, nyuruh ngirim ke email lagi :p
  25. Akhirnya Kang Ismet posting juga. Udah saya tunggu-tunggu nih.
  26. Izin praktek! comment back! http://dovinize.blogspot.com/2013/08/tips-dan-trik-menjadi-orang-keren.html
  27. kang isment memang udah melebihi master kalo buat artikel...

    ane salut!

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

    #salam dari blog STAR-US
    1. apa istilahnya ya kalo lebih dari master :)
      sama aja ko masih belajar saya juga
  28. pedoo mang! , ubrak-abrik .. cemungudhh ^_^
  29. saya coba dulu Kang :)
  30. 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...
    1. 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>
  31. aku dah d modif bos :D
    1. tutorial ini bukan buat master :D
  32. lama ngantosan posting jadi weh terus nongkrong !!!
    1. hehhehe... nuju rariweuh kang :)
  33. Berguna pisan Kang!!!!!!!
    1. nuhun atuh berguna mah :)
  34. 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.. :)
    1. intip aja source code saya ;)
  35. saya terus memperhatikan modifikasi ini dan kesimpulan awal adalah gambar profil yang sedikit buram kang !!!
    1. kalau diperbesar iya jadi buram...
  36. mantab abis dah ..
    di coba kang modifikasi tampilan widget follower nya ..
    2 Jempol dah buat kang ismet ..
  37. mantab kang sekali lagi keren, super,salam super!
    - damai kang ismet! -
  38. makasih kang, dah ane pasang :)
  39. sudah saya hapus tapi balik lagi. mohon solusinya mas :)
  40. <*b:include name='quickedit'/>
    1. biasanya itu widget attribution, hapus aja widgetnya
  41. 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
  42. Claresta
    Komentar ini telah dihapus oleh pengarang.
  43. 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 ^_^
    1. maksudnya memasang link aktif atau kaya ngiklan gitu?
  44. 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 ^_^
    1. 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')
      //]]>
  45. follow back ya mas bro :) di tunggu
  46. Kang saya mau tanya, kok widget folloer blog saya nggak muncul-muncul sih ?
  47. kang ane gx ke temu di template ane yang namanya -> renderMembersGadget

    coba cek di template ane kang maftuhijore dot blogspot dot com
    1. ketemu ko sama saya :) tinggal ganti aja kode di atas dgn ini :

      ID= div-1peitnd47tcx8
      site= 00137369076225942038
  48. Sangat membantu kang.. makasih :D

    Jangan lupa kunjungi blog ane di http://mz-allishere.blogspot.com
  49. 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
  50. kode nya dihapus semua ya kang ?
    btw thanks udah berbagi tips ini, dan tutorialnya sangat bagus untuk saya yang masih newbie |o|
  51. Pagi, kang..! sarapan dulu sambil ngopi + rokok,
    oh ya kang kalau saya ko upload image profile "joint this site" ko selalu gagal yah kang.
  52. bingung ama blogger nih kang..
  53. Keren kang infonya :)

    Salam kenal dari saya...

  54. numpang min http://webpasst.blogspot.com/2014/04/trik-download-film-di-ganool-dari-hp.html
  55. Mas Ismet Maksudnya Valid HTML5 itu apa ya ?
  56. mantep kang trikna ku abdi diaplikasiken diblog,, nuhun templatena oge kang
  57. Terima kasih, Kang. ^^
  58. ijin praktek dan kopi kodenya bos...
  59. Kala belum ad kode HTMLnya di atas trus gimana...
  60. 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

  61. kang renderMembersGadget g ketemu, tolong bantu, ini blognya
    http://clickandskip.blogspot.com
  62. punya gua gk ada id membernya kang. gimana nih? trus kalo nempel widget followers langsung di blog, gk bisa tampil -.-
  63. renderMembersGadget nya ga ada kang ..

    bijimane nih -_-
  64. Thanks kang Ismet notif blog nya udh jadi NB: http://hendra-gunawan11.blogspot.com lumayan musmet ngedit temlate sama nyatuin notif nya..:(
  65. wa sudah lama ga mampir kesini, tampilan blognya makin keren... ikut nyoba widget ini ya, trims
  66. sudah saya coba kang dan berhasil terima kasih ya kang. silahkan anda lihat di blog kami jika kang ismet berkenan..
  67. Makasih gan ! Moga tambah ganteng :D
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.