Menambahkan Google+ Followers Widget Blogger Dan Memodifikasinya

Menambahkan Google+ Followers Widget Blogger Dan Memodifikasinya

Bola Hero Gawai

Menambahkan Google+ Followers Widget Blogger Dan Memodifikasinya

Baru-baru ini Blogger merilis tool baru untuk penggunanya yaitu Google+ Followers Widget. Secara kini Google+ menjadi media sosial yang kian digemari seperti halnya Facebook. Kian hari pengguna Google+ semakin bertambah. Dan kita sebagai pengguna web atau blog tentunya ini menjadi lahan yang bagus untuk menjaring sebanyak-banyaknya pembaca web/blog.

Cara Menambahkan Google+ Followers Widget Blogger Dan Memodifikasinya sangat mudah, karena memang telah disediakan oleh Blogger itu sendiri. Dan kita bisa memodifikasinya sesuai dengan tampilan yang kita harapkan.

Namun syaratnya kita harus sudah menghubungkan blog kita dengan Google+ kita, dengan cara klik tombol Google+ pada Dashboar blog kita dan ikuti perintah yang ada untuk mengkoneksikan blog kita dengan Google+.


Untuk Menambahkan Google+ Followers Widget Blogger Dan Memodifikasinya, Anda harus login dulu ke blog Anda >> Dashboard >> Klik Tata Letak/Layout >> Add a Gadget >> Pilih Google+ Followers.


Dan tampilannya sama dengan Facebook Like Box yang telah ada selama ini dan penampakannya akan seperti di bawah ini.


Secara default, Google+ Followers Widget ini otomatis menyesuikan lebar sidebar blog, dan untuk tinggi widgetnya 300px (menampilkan 4 baris muka/wajah). Sehingga akan menampilkan beberapa wajah follower kita. Namun apabila Anda merasa tampilannya terlalu ramai atau mungkin kurang ramai, kita bisa memodifnya pada HTML blog kita.

Silahkan Anda masuk ke Template >> Edit HTML >> Centang kotak kecil Expand Widget Template. Cari kode PlusFollowers1 (gunakan CTRL + F untuk memudahkan pencarian). Biasanya kode HTML-nya akan seperti di bawah ini.

<b:widget id='PlusFollowers1' locked='false' title='Google+ Followers' type='PlusFollowers'>
<b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <b:if cond='data:profileUrl != &quot;&quot;'>
    <div class='g-plus' data-action='followers' data-height='300' data-source='blogger:blog:followers' expr:data-href='data:profileUrl' expr:data-width='data:width'/>
    <script type='text/javascript'>
      (function() {
        window.___gcfg = {&#39;lang&#39;: &#39;<data:language/>&#39;};
        var po = document.createElement(&#39;script&#39;);
        po.type = &#39;text/javascript&#39;;
        po.async = true;
        po.src = &#39;<data:plusOneApiUrl/>&#39;;
        var s = document.getElementsByTagName(&#39;script&#39;)[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
  </b:if>
</b:includable>
</b:widget>

Perhatikan angka 300 yang berwarna merah. Itu untuk tinggi Widgetnya, silahkan rubah sesuai dengan keinginan Anda. Dan tulisan data:width yang berwarna merah, itu untuk lebar widget. Dengan kode tersebut berarti widget menyesuaikan dengan lebar sidebar yang ada. Untuk merubah lebar yang kita inginkan, silahkan ganti tulisan data:width dengan angka, misalnya 200

Untuk background Google+ Followers Widget ini telah dibuat transparant, sehingga dapat menyesuaikan dengan warna background apa pun.

Seperti pada blog Kompi Ajaib ini, saya merubahnya dengan lebar 303 dan tinggi 130. Sehingga penampakannya seperti gambar di bawah ini.


Terakhir silahkan save tamplate Anda dan lihat hasilnya...

Demikian saja sharing tentang Menambahkan Google+ Followers Widget Blogger Dan Memodifikasinya semoga dapat dimewngerti dan bermanfaat....

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

2 Comments Add Comment

trims ata ilmunya bang..

Balas

Sama-sama mas Supar... :D Semoga bermanfaat

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!

×
×
×