Thursday, December 3, 2015

Cara Membuat Halaman Statis Followers Blogger

Membuat Halaman Statis Followers Blogger

Assalamu'alaikum warohmatullahi wabarokatuh, dalam posting ini saya akan membahas tentang cara membuat halaman statis yang menampilkan followers blog. Jadi halaman followers ini fungsinya sama dengan widget - atau disebut gadget - Pengikut yang biasa dipasang di menu Tata Letak blogger. Widget itu akan menampilkan orang-orang yang telah mengikuti blog kita dan ada tombol untuk menjadi pengikut baru. Silahkan lihat demo.
Lalu untuk apa halaman statis ini dibuat kalau widget saja sudah cukup? Jadi begini, ketika kita memasang widget terlalu banyak di halaman blog, tentu loading blog akan semakin lambat akibat bertambahnya kode HTML yang perlu di baca oleh mesin. Jadi solusinya kita pindahkan widget itu menjadi halaman tertentu yang hanya akan di load HTMLnya ketika halaman tersebut dibuka.


Baiklah langsung saja ke cara pembuatannya, pertama-tama tambahkan widget pengikut tersebut ke blog sobat, caranya dengan buka Dashboard blogger, pilih Tata Letak kemudian Tambah Gadget, pada bagian Gadget Lainnya pilih Pengikut. Sobat tidak perlu mengatur dimana letak widget itu, terserah. Kemudian setelah itu buka blog sobat, tekan CTRL + U pada keyboard untuk menampilkan kode HTML blog sobat, setelah itu cari kode <div id='Followers1-wrapper'> lalu copy dari kode tersebut hingga akhir dari tag kode tersebut. Jika misalnya kode dari blog saya kira-kira tampilannya seperti :

<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>
<div><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></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\x3d463555102746290209\x26origin\x3dhttps://maringngerrang.blogspot.com/\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaBjAwMDAwMCIGMDAwMDAwKgZGRkZGRkYyBjAwMDAwMDoGMDAwMDAwQgYwMDAwMDBKBjAwMDAwMFIGRkZGRkZGWgt0cmFuc3BhcmVudA%3D%3D");
              },
              'open': function(url) {
                window.followersIframe.close();
                followersIframeOpen(url);
              }
            }
          });
        }
      });
    }
    followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d463555102746290209\x26origin\x3dhttps://maringngerrang.blogspot.com/\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaBjAwMDAwMCIGMDAwMDAwKgZGRkZGRkYyBjAwMDAwMDoGMDAwMDAwQgYwMDAwMDBKBjAwMDAwMFIGRkZGRkZGWgt0cmFuc3BhcmVudA%3D%3D");
  </script></div>
</div>
</div>

Nah, setelah meng-copy kode tersebut, buatlah sebuah halaman statis pada halaman blog sobat, misal dengan judul Followers, lalu ubah tampilan Compose menjadi HTML dan paste kode tadi di halaman tersebut. Publikasikan halaman itu dan coba lihat hasilnya. Jika berhasil maka hasilnya akan sama seperti pada halaman demo tadi, nah sekarang sobat bisa menghapus widget pengikut yang sebelumnya telah dibuat.

Mungkin cukup sekian dari saya, semoga bisa bermanfaat, kalau ada yang ingin sobat tanyakan atau klarifikasi, silakan sampaikan pada kotak komentar dibawah atau bisa juga melalui halaman contact blog.
Disqus Comment
Parse Tool