June 4, 2013

Modifikasi Widget Followers Pada Blog



Selamat siang...

Postingan kali ini saya buat untuk membantu temen-temen yang ingin memodifikasi widget followers pada blog nya sehingga menjadi lebih menarik.

Sebenarnya, untuk memodifikasi warna dan lain sebagainya cukup hapus tanda centang pada bagian "Gunakan Gaya Template Default" saat kalian menambahkan widget followers bawaan blogger seperti gambar dibawah ini.



Namun, bukan hanya untuk alasan itu saja hal ini menjadi perlu untuk dilakukan, karena dengan memodifikasi nya pula maka blog akan lolos (pada bagian ini) saat validasi HTML 5. Jadi, bisa dikatakan kita melakukan satu hal untuk dua manfaat, hehehe...

Ok, langsung saja :

1. Login ke blogger.
2. Pilih Tata Letak - Tambahkan Gadget - HTML/Javascript.
3. Masukkan script dibawah ini :

<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-13f90a5odka7x" style="width:auto;border:none;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#D580FE';
skin['ENDCAP_BG_COLOR'] = '#FEBFBF';
skin['ENDCAP_TEXT_COLOR'] = '#000';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#33FF00';
skin['CONTENT_BG_COLOR'] = '#FFFFFF';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#1919B3';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#FF0000';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-13f90a5odka7x',
   site: '14360626934896265745' },
  skin);
</script>


4. Simpan.
5. Enjoy. dad

Coba lihat kode yang saya beri warna ungu dan warna biru, yang mana kode tersebut dapat dilihat pada blog kalian dengan cara berikut :

1. Klik kanan dan pilih "View Page Source" atau dengan menekan CTRL+U.



2. CTRL+F dan cari kode " renderMembersGadget ".



3. Copy paste kode yang diberi kotak sesuai gambar dalam script diatas.

Terima kasih dan semoga bermanfaat...

78 comments

  1. ini maksudnya mengatur warna yg ada di kolom follower yah?

    ReplyDelete
    Replies
    1. iya, selain warna bisa atur border dan jumlah row nya juga mba... pleased

      Delete
  2. justru saya lagi berusaha untuk memanipulsi daftar jumlah pengikut biar tampak banyak yang follower.

    ReplyDelete
    Replies
    1. wah, kalau yang begitu saya kurang tau gan... shake
      kalau saya modifikasi kemaren untuk ngurangin error saat validasi html5, hehehe...

      Delete
  3. hehe puyeng sy tp komen aja deh

    ReplyDelete
    Replies
    1. shake shake shake
      oiya gan, berat banget kayaknya ya komen pake google+...

      Delete
  4. wah tip dan trik nya mantap sob bisa di coba,ni trmksih dah berbagi sobat.

    Flow sukses ful tanpa tertinggal sedikitpun heheh

    ReplyDelete
  5. kunjungan siang gan.......
    http://andirifki25.blogspot.com/

    ReplyDelete
  6. Selalu menarik tutor mbak Alya, thks Mbak...

    ReplyDelete
  7. laporan di medan perang mbak alya ketika saya mencari renderMembersGadget ternyata di blog saya tidak ada mungkin sudah di modif jadinya sembunyi, ada cara lain selain mencari kode di atas.

    Direktur : angelofdeathdevil.blogspot.com

    ReplyDelete
  8. ketika saya cek lagi dengan kata kunci lain seperti followers ternyata di temukan seperti ini id='XXXXsensorXXXX'> #maaf mbak alya saya sensor kodenya untuk menghindari hal terburuk :D

    ReplyDelete
    Replies
    1. iya gan, yang penting ID sama site nya sudah dapat mungkin lebih pas kalau keyword nya "follower' kali yaa...

      Delete
  9. keren nih gan kalo d aplikasikan d blog ane :D
    thanks gan udah berkunjung
    knjungan blik dr
    Apthanta Blog
    http://www.online.liputin.com/

    ReplyDelete
  10. keren oew..langsung praktek modifikasi-widget-followers-pada-blog dehhh !!

    ReplyDelete
  11. gan , link saya boleh di sidebar agan nggak ??

    hehehe pleased

    ReplyDelete
    Replies
    1. maaf gan, sesuai kebijakan yang sudah saya tulis saja ya...
      kebijakan pertukaran link nya disini gan :
      http://aiizahh.blogspot.com/2010/01/bannerlink-exchange.html

      Delete
  12. Yang sobat ke mana followersnya? huhhh

    ReplyDelete
  13. keren nih mba bs di coba ... folbek done mba

    ReplyDelete
  14. emang kalau widget default gak valid html5 ya mbak? trus kalau valid/tidak html5 itu ngaruh dimana? Mohon dijawab, dan... difolbek juga. Makasiii...h.

    ReplyDelete
    Replies
    1. ya, setahu saya tidak lolos saat validasi html 5 makanya kemarin saya juga memodifikasi widget follower blog ini...
      kalau pengaruh sepengalaman saya lebih ke SEO kali ya (dengan parameter nya persentase SEO di chkme) meskipun blog ini pun tidak 100% valid HTML 5... winds

      Delete
  15. wahh... trik andalan ane nih,.. pleased ctrl + u happy

    ReplyDelete
    Replies
    1. buat apaan gan dijadiin trik andalan? hmmm

      Delete
  16. punya gw sudah keren sob,, tapi follower sekarang sering error2, knp ya sob.?
    comment back ya..

    ReplyDelete
    Replies
    1. kurang tahu gan, saya belum ngalamin error di widget follower saya... huhhh

      Delete
  17. Terima kasih Mbak Aiizah atas tutor dan tips2nya. Jago utak atik Blog ya Mbak..?

    ReplyDelete
    Replies
    1. ga jago juga kok gan, masih belajar... pleased

      Delete
  18. aku udah follow blognya.
    di tunggu follow baliknya yaa..??
    :)

    ReplyDelete
    Replies
    1. sudah saya follow mba...terima kasih... :)

      Delete
  19. Keren pokonya, terimakasih banyak miss sudah berbagi

    ReplyDelete
  20. uwow . si mba yang satu itu rajin banged utak atik sih wat2

    pengen banged warnanya jadi lucu gitu yah mba , happy
    tapi syangnya aku ga bisa .puyeng edit htmlnya spoiled

    ReplyDelete
    Replies
    1. hehehe, lg ga ada kerjaan aja makanya bikin postingan mba iin... winds

      Delete
  21. makasih dah share mb alya,,,,
    blm bsa praktek

    ReplyDelete
  22. tutor yang bermnfaat kawan...
    ntar di praktekin!

    ReplyDelete
  23. langsung pake pengaturan.. yang ada di blogger .. aku pakenya itu coz puyeng mbak. hoho.

    ReplyDelete
    Replies
    1. iya, saya modifikasi seperti itu kemaren biar ngurangin error saat validasi html 5, hehehe... cheer

      Delete
  24. berarti bisa juga ya kalo saya ganti jadi warna merah :dad:

    ReplyDelete
    Replies
    1. ya, bisa saja gan tinggal edit pada kode berwarna kuning... pleased

      Delete
  25. artikel yang sangat bermanfaat...
    thanks...

    ReplyDelete
  26. jadi lebih mudah ya mbak kalo mau custom widget follownya..

    ReplyDelete
    Replies
    1. iya gan, tinggal ganti kode warna nya saja... pleased

      Delete
  27. Wahh.. mantab nih tutorialnya mbak..
    coba cobi dulu aahh :)

    ReplyDelete
  28. gan tolong saya. lihat homepage saya..bagaimana ya caranya menghilangin jumlah komentar itu ..bls ya pliss

    ReplyDelete
    Replies
    1. yang angka di atas itu ya?
      coba gunakan tag kondisional pada kode yang membuat jumlah komentar tersebut muncul agar hanya terlihat pada halaman posting...
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      KODE YANG MENAMPILKAN JUMLAH KOMENTAR
      </b:if>

      Delete
  29. wuichhhh keyen keyen mbak ntar ane coba dewch btw kunjung malam nie gan shake

    ReplyDelete
  30. Dicoba dulu tutorialnya..
    +
    Iklannya bagus ngga ada tombol closenya wat2

    ReplyDelete
    Replies
    1. masa ga ada tombol close nya gan ^:D ^:D ^:D

      Delete
  31. sip...sip.... haii


    jngn lupa follow back blog ku yoO dad


    http://thalp0uz.blogspot.com/

    ReplyDelete
  32. pengen sih nyoba...
    tapi takut berat blog sya sob.... spoiled
    tuh widget berat / ringan untk blog..??


    http://thalp0uz.blogspot.com/

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. ringan saja gan, tidak berbeda dengan widget followers default, hanya memodifikasi ini agar lebih cantik + valid html5 saja...

      Delete
  33. Wah terimakasih mbak..
    visit back http://center60.blogspot.com/

    ReplyDelete
  34. Penerangan sedang mencari berkat gan haii

    ReplyDelete
  35. terimakasih kawan, nice inpoh. salam damai kami sepanjang hari dari Inyonk .

    ReplyDelete
  36. Apakah ini valid mbak untuk keperluan Seo bagi blog...??soalnya blognya sudah banyak yang eror htmlnya..hehehe

    ReplyDelete
  37. Apakah ini valid mbak untuk keperluan seo bagi blog...??soalnya blognya sudah banyak yang eror htmlnya..hehehe

    Mampir ya mbak di blog saya liputins.com

    ReplyDelete
  38. Tip Trik yang bagus untuk mempercantik blog, terima kasih atas sharenya, slam blogger :)

    ReplyDelete