Modifikasi Tampilan Widget Followers GFC
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.
Dibawah ini screenshoot hasil modifikasi dan valid HTML5.
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:
Langkah 4 : Buat widget baru HTML/JavaScript, simpan kode ini :
Langkah 4 : Hapus widget Followers bawaan Blogger (ihat Langkah 1)
Langkah 5 : Hapus kode
Sampai di sini, sobat sudah membuat tampilan yang berbeda dari biasanya dan widget sudah valid HTML 5.
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 :
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
Apabila masih ada pertanyaan silahkan di share di kolom komentar...

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.

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:

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 :

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...
122 komentar
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
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
bijimane nih -_-
http://clickandskip.blogspot.com
Sukses terus dan semoga terus dapatkan kebaikan karena akaang selalu memberikan yang terbaik buat semua akan dibalas kebaikan oleh orang orang sekitar
Salam kenal dari saya...
oh ya kang kalau saya ko upload image profile "joint this site" ko selalu gagal yah kang.
btw thanks udah berbagi tips ini, dan tutorialnya sangat bagus untuk saya yang masih newbie |o|
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
Jangan lupa kunjungi blog ane di http://mz-allishere.blogspot.com
coba cek di template ane kang maftuhijore dot blogspot dot com
ID= div-1peitnd47tcx8
site= 00137369076225942038
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 ^_^
<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')
//]]>
Terima kasih nice sharenya yg sangat bermanfaat bagi saya ^^
Btw gimana caranya membuat komentar pengunjung terblok secara otmatis jika melanggar aturan kita? makasih infonya ^_^
Di blognya Kang Ismet, ijin belajar untuk di terapkan di blog saya
Hatur nuhun pisan Kang, atas Artikel dan ilmu nya. sukses terus yah
- damai kang ismet! -
di coba kang modifikasi tampilan widget follower nya ..
2 Jempol dah buat kang ismet ..
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.. :)
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...
<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>
ane salut!
#sukses selalu kang.. tetap berjaya dan sehat selalu....
#salam dari blog STAR-US
sama aja ko masih belajar saya juga
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
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??
<div id='related-posts'>
<script type='text/javascript'>var ry='<h2>Kunjungi juga artikel lainnya</h2>';rn='<h2>Tidak ada artikel yang berhubungan</h2>';rcomment='Komentar';rdisable='Komentar di nonaktifkan';commentYN='yes';</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>
tapi btw keren oge kang ... mantapppp
Dulu dengan ini ketika blog ditranslate jadi ga kebaca kang GFC-nya...tapi ga tahu kalau sekarang mah...
Mohon maaf kang, bisa nggak agar url replace yang ini, blognya yang dituju pindah ke http://mestiqui.blogspot.com/ , terimakasih kang
keren tuh modifnya :)