Cara Menyimpan Google Friend Connect Di Halaman Statis

Cara Menyimpan Google Friend Connect Di Halaman Statis

Bola Hero Gawai

Cara Menyimpan Google Friend Connect Di Halaman Statis

Cara Menyimpan Google Friend Connect Di Halaman Statis
Google Friend Connect atau widget Follower untuk Blogspot adalah salah satu cara untuk mendapatkan pembaca langganan blog sesama Blogger. Mungkin ini adalah salah satu cara mudah untuk blogwalking karena setiap ada update terbaru dari blog yang kita follow, maka akan ada pemberitahuan post baru di dashboard blog kita.

Iseng-isng saya intip kode Google Friend Connect, ternyata sudah berbeda dari kode terdahulu. Namun bagi saya ini tetap saja memberatkan loading blog, apalagi menggunakan js Google+ yang tidak di-asynchronous.

Kemudian saya mencari cara untuk menyimpannya di halaman statis. Hanya tombol Follow Blog yang saya tampilkan dengan link mengarah ke halaman statis yang berisi Google Friend Connect.

Pertama saya meng-copy semua kode Google Friend Connect dari page source ke halaman statis dan ternyata Google Friend Connect bisa muncul juga. Namun ketika widget Google Friend Connect di sidebar dihapus, yang di simpan di halaman statis pun tidak muncul (error).

Akhirnya saya mencoba cara lain dan akhirnya berhasil hehehe...

Saya mengambil iframe dari Google Friend Connect dan menyimpannya di halaman statis. Meskipun widget Google Friend Connect di sidebar di hapus, iframe-nya masih tetap muncul di halaman statis.

Silahkan bisa Anda coba DI SINI.

Bagi yang ingin mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

1. Tambahkan Dulu Widget Followers Di Sidebar
Silahkan tambahkan dulu widget Followers di sidebar. Di Tata Letak tambahkan gadget baru kemudian klik More Gadget, lalu scroll ke bawah dan tambahkan widget Followers.

Kemudian sesuaikan warna-warna tulisan dan link agar sesuai dengan tema blog kita. Sebagai panduan bisa lihat gambar di bawah ini.

Cara Menyimpan Google Friend Connect Di Halaman Statis
2. Ambil Iframe Google Friend Connect
Setelah widget Followers muncul di sidebar, silahkan klik kanan pada widgetnya lalu inspect element. Lalu cari kode <div id="followers-iframe-container"> dengan CTRL + F di kotak inspect element. Setelah ketemu, silahkan klik kode tersebut kemudian CTRL + C (copy).

3. Buat Halaman Statis Untuk Widget Followes
Silahkan buat halaman statis untuk Followers kemudian paste atau CTRL + V kode yang tadi di-copy di langkah ke-2 di atas di halaman tersebut dalam mode HTML.

Selesai, kini Google Friend Connect sudah tampil di halaman statis. Selanjutnya tinggal hapus lagi widget Followers di sidebar.

Mudah bukan?

Agar pengunjung bisa menemukan halaman Followers tersebut, silahkan buat sebuah tombol Followers dengan link halaman Followers atau simpan link di menu blog.

Update:
Ternyata kini bulan Agustus 2016, kode widget Follower Blogger sudah berubah lagi, jadi silahkan gunakan kode di bawah ini untuk menampilkan Follower Blogger di halaman statis.


<script type='text/javascript'>
       //<![CDATA[
       document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://apis.google.com/js/plusone.js\"></scr" + "ipt>");
       //]]>
       </script>
<div id="followers-iframe-container"></div>
<script type="text/javascript">
    window.followersIframe = null;
    function followersIframeOpen(url) {
      gapi.load("gapi.iframes", function() {
        if (gapi.iframes && gapi.iframes.getContext) {
          window.followersIframe = gapi.iframes.getContext().openChild({
            url: url,
            where: document.getElementById("followers-iframe-container"),
            messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER,
            messageHandlers: {
              '_ready': function(obj) {
                window.followersIframe.getIframeEl().height = obj.height;
              },
              'reset': function() {
                window.followersIframe.close();
                followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d2583045784323695327\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaBjY2NjY2NiIGMjI4OGJiKgZmZmZmZmYyBjAwMDAwMDoGNjY2NjY2QgYyMjg4YmJKBjk5OTk5OVIGMjI4OGJiWgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d108\x26origin\x3dhttp://www.kompiajaib.com/");
              },
              'open': function(url) {
                window.followersIframe.close();
                followersIframeOpen(url);
              },
              'blogger-ping': function() {
              }
            }
          });
        }
      });
    }
    followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d2583045784323695327\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaBjY2NjY2NiIGMjI4OGJiKgZmZmZmZmYyBjAwMDAwMDoGNjY2NjY2QgYyMjg4YmJKBjk5OTk5OVIGMjI4OGJiWgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d108\x26origin\x3dhttp://www.kompiajaib.com/");
  </script>

Ganti kode 2583045784323695327 dengan ID blog Anda, 108 adalah mengatur jumlah follower yang ditampilkan, http://www.kompiajaib.com/ ganti dengan URL blog Anda.

Selamat mencoba.

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

4 Comments Add Comment

kang followers saya teh udah ngikutin tutor diatas, cuman....liat deh mang...ngegeserin nya supaya simetris teh susah pisan atuh ih

Balas

Cobi kode <div id="followers-iframe-container"></div> dirobih janten <div id="followers-iframe-container" style="margin-left:10px"></div>

Balas

punten nembe ngeblog dan maen lagi kesinih
cing uing cobian nyak kang....haturnuhun

Balas

mantep kang.....ih ci akang teh ksep pisan ih :D

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!

×
×
×