Memodifikasi Followers Blog Widget Blogger

Memodifikasi Followers Blog Widget Blogger

Bola Hero Gawai

Memodifikasi Followers Blog Widget Blogger

Anda merasa bosan dengan tampilan Followers Blog Widget bawaan asli Blogger? Atau mungkin tampilan Follower Blog Blogger-nya tidak sesuai dengan theme blog? Jangan bingung, saya share cara Memodifikasi Followers Blog Widget Blogger sehingga sesuai dengan theme blog Anda.

Sebagai contoh bisa Anda lihat pada gambar di atas, atau pada Followers Blog Widget blog Kompi Ajaib yang ada di bawah (Footer).

Berbeda kan?...itu karena sudah saya modifikasi. Cara Memodifikasi Followers Blog Widget Blogger sebenarnya gampang-gampang susah.

Langkah Pertama

Biarkan dulu Followers Blog Widget bawaan asli Blogger yang sudah Anda terapkan di blog Anda, karena ada kode yang mesti dilihat. Klik kanan pada halaman blog Anda >> Klik View Page Source >> Cari title dari widget tersebut, misalnya "Followers" (tanpa tanda kutip). Gunakan CTRL + F Pada keyboard untuk memudahkan pencarian. Setelah ketemu, scroll ke bawah sehingga Anda menemukan kode seperti di bawah ini. 


<div id="div-65y5uikkmesc" style="width: 100%; "></div>
<script type="text/javascript">
    var skin = {};
    skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "260";
    skin['TITLE'] = "Followers";
    skin['BORDER_COLOR'] = "transparent";
    skin['ENDCAP_BG_COLOR'] = "transparent";
    skin['ENDCAP_TEXT_COLOR'] = "#666666";
    skin['ENDCAP_LINK_COLOR'] = "#256ead";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
   
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#256ead";
    skin['CONTENT_TEXT_COLOR'] = "#666666";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#256ead";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#666666";
    skin['CONTENT_HEADLINE_COLOR'] = "#000000";
    skin['FONT_FACE'] = "normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "div-65y5uikkmesc",
     height: 260,      site: "09038553348108515803",      locale: 'en' },
     skin);
  </script>
</div>

Perhatikan kode yang saya marking di atas, kode itu yang kita perlukan untuk memodifikasinya. 

Langkah Kedua

Copy kode di bawah ini ke gatget HTML/JavaScript baru.


<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-fhp4mq2cq3gj" style="width:285px;border:1px solid #fff;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = 'transparent';
skin['ENDCAP_BG_COLOR'] = 'transparent';
skin['ENDCAP_TEXT_COLOR'] = '#666666';
skin['ENDCAP_LINK_COLOR'] = '#1da7e7';
skin['ALTERNATE_BG_COLOR'] = 'transparent';
skin['CONTENT_BG_COLOR'] = 'transparent';
skin['CONTENT_LINK_COLOR'] = '#1da7e7';
skin['CONTENT_TEXT_COLOR'] = '#666666';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#1da7e7';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#999999';
skin['CONTENT_HEADLINE_COLOR'] = '#1da7e7';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-fhp4mq2cq3gj',
   site: '09725433856921720255' },
  skin);
</script>

Ganti kode yang berwarna merah dengan kode warna merah pada langkah pertama, begitu juga dengan kode yang berwarna orange. Dan kode yang diblok kuning itu untuk merubah tampilan warna dari widget tersebut, silahkan sesuaikan dengan warna thema blog Anda. Angka 4 yang berwarna merah itu untuk memberikan jumlah baris photo follower kita. Angka 285 untuk mengatur lebar widget, silahkan sesuaikan dengan lebar sidebar atau footer blog Anda. Kode #fff untuk warna border luarnya, silahkan sesuaikan dengan keinginan Anda.

Memodifikasi Followers Blog Widget Blogger

Demikian sharing cara Memodifikasi Followers Blog Widget Blogger kali ini mudah-mudahan bermanfaat. Selamat berkreasi...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

25 Comments Add Comment

Tutorialnya Kurang Memahamkan.... Coba diperbaiki lagi mas....

Balas

Tolol Nie blog,,
tutornya g jelas banget

Balas

Ma'af, saya hanya newbie yang mencoba untuk membagi apa yang sudah saya ketahui, dan saya rasa cukup jelas tutor di atas, tinggal Anda baca keseluruhan tutornya dengan teliti, jangan membaca sebagian sebagian. Apalagi Anda sebagai senior di blogger (On Blogger since December 2009) dan mempunyai cukup banyak blog. Alangkah bijaknya bila Anda berkomentar yang lebih sopan dan lebih membangun untuk blog newbie seperti saya ini...Namun demikian saya ucapkan terima kasih sudah sudi mampir di blog saya ini yang jauh dari sempurna.

Balas

Thanks infonya,, cukup membantu. Saya juga newbie dan rasanya buta dalam mengedit edit blog. Tapi informasi anda berguna. Thx again. :)

Balas

gk Usah kasarr bro...

Klu u master , u gk mgkn Search Artikel ini...

Kita semua masih Perlu byak belajar dan berbagi,,

MAin yaa guest ke http://mawan89.blogspot.com/

Balas

Makasih mbak atas apresiasinya...terima kasih udah mampir di sini.

Balas

Iya gan mari kita belajar dan berbagi dengan sesama...makasih sudah sudi mampir di blog sederhana ini.

Balas

terimakasih sob, salam farhanshare.blogspot.com,kunjungan baliknya ya sob, oke:)

Balas

Jangan Marah2 Om cayang. Saya aja mau praktikkan kok, karena terbantu dgn tutorial2 Om Ady. :D . Aku masih ubek2 kompiajaib mau tau kode Widget subscribe-nya, smiley komentar, dan modifikasi google follower. Tak tunggu Om :(

Balas

Ah...enggak marah kok...hanya bingung aja sama bang Admin TH...hehehe :D

Balas

gk paham saya
tutorialnya kurang sip

Balas

Biarpun tutorialnya sampe beberapa halaman juga , jika tidak mau mengerti dan tidak sambil diperaktekan ya percuma mas. Coba baca secara seksama sambil praktek. Yang penting mau mencobanya, nantinya kita paham sendiri heheheee... piis ah :D

Balas

berhasil mas, mungkin tutorial di atas kurang di view page source untuk mengambil kode blog masing masing..

cemungud terus mas ajaib :D

Balas

Hehehe ini akan mudah dipahami jika sambil dipraktekan mas hehehe...

Balas

Makasih Banyak Mas Kompi ... Cuma Ini Satu - Satunya Tutorial Yang Saya Nemu Di Google .... Blog Lain Gak Ada Yang Ngeposting Beginian :)

Awalnya Sih Memang Bingung Mas, Tapi Akhirnya Berhasil Juga :)
Saya Ada Sara Mas, Yang Buat Bingung Itu Pas Tiba Ngejelasin Warna - Warna Itu Mas ...

Seperti Ini " Ganti Warna Merah Dengan Warna Merah ". :)
Kan Itu Agak Bikin Bingung :)

Sekali Lagi Makasih Banyak Ya Mas ...

ohh Saya Kelupaan Mas ... SUdah Lama Banget Saya Mondar Mandir Di Blog Mas Kompi Tapi Masalah KeValid-an Template Saya Belum Kelar juga Mas ...

Saya Minta Bantuannya Mas ... Mohon Pencerahannya.
Saya Gak Tau Lagi Bagian Mana Yang Haris Saya Perbaiki Dari Temple Saya Ini.

Ini Blog Saya Mas : http://pusyakiz.blogspot.com/

Mohon Dibantu ya Mas Kompi.

Balas

Gagal.... Saya sudah ikuti step by step tapi hasilnya tidak seperti yang diinginkan. Hasilnya sama saja dengan tulisan agan di http://www.kompiajaib.com/2012/07/mengganti-followers-blog-widget-blogger-dengan-link.html

Balas

Berhasil mas, sip lah. Tutorialnya mudah dimengerti kok.
kunjungi juga yah http://regibrader-free.blogspot.com/.

Balas

Terimakasih Atas Tutorialnya Mas, Sangat Membantu. Di Tunggu Kunjungan Baliknya :D
Visit : http://sinemaloverz.blogspot.com/

Balas

awalnya memang agak bingung akhirnya bisa ngerti juga..maklum newbie bang..
terima kasih tutorialnya bang...

Balas

Gila Tu orang ... Ckckckck

Balas

salam ajaib kang admin. masalahnya saya tdk bisa oprek2 bagian dalamnya blog. hik hik

Balas

nitip link aja boleh, kalau tidak boleh yaa di hapus saja
http://elbaruqy.blogspot.com

Balas

Saya salut mas sama anda, sekarang terbukti sudah hinaan dari Admin th|tiar, mas adi sudah jdi master sekarang. selamat mas. sebenernya pengin banget kenal deket sama mas adie,,

Balas

Mas TH|TIAR tampaknya tutor dari mas adi ini sangat jelas sekali. ga ada yang ga jelas.

Balas

Betul banget mas,, apalagi jika dia mengalami hal yang serupa seperti saya yaitu tidak adanya widget bawaan blogger di opsi add gadget, pasti lebih bingung dan bisa bunuh diri mungkin. Alhamdullilah saya bisa menyelesaikan masalah saya dengan usaha sendiri dan menerapkannya atas artikel dari kang ismet. Coba baca artikel saya yang ini mas, dan komen yah mas biar saya makin merasa bangga, hehee

http://azhallea.blogspot.com/2014/05/widget-pengikut-blog-tidak-ada-ini.html

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×