Membuat Facebox/Like Box Preloader

Tabel Konten
  1. Pengaturan 

Di sini Saya menggunakan metode Iframe Preloader yang pernah Saya tuliskan untuk menahan proses muat widget Facebox pada blog. Dengan cara ini maka proses muat halaman akan menjadi lebih cepat karena kita telah menahan Facebox untuk memuat sebelum keseluruhan halaman berhasil termuat:

Lihat Demo

Sebelum melanjutkan ke langkah pembuatannya (atau lebih tepatnya: langkah modifikasi), Anda harus sudah memiliki widget Facebox pada blog Anda. Jika belum, buat widget Facebox Anda terlebih dahulu » Telusuri tentang cara membuat widget Facebox di blog

Preloader ini hanya berlaku untuk Facebox yang ditampilkan melalui iframe, jadi saat Anda memilih kode widget, ambi yang berada pada tab Iframe:

Kode Iframe Facebox/Like Box

Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Edit HTML Blogger
Mengedit HTML

Temukan kode ini:

]]></b:skin>

Salin kode CSS di bawah ini lalu letakkan di atasnya:

/* Iframe Preloader */
.framePreloader iframe {
  background-color:white;
  border:0 !important;  
  display:block;
  margin:0 auto;
}

Setelah itu temukan kode ini:

</body>

Salin kode di bawah ini kemudian letakkan di atasnya:

<script>
//<![CDATA[
window.onload = function() {
    function createIframe(src, w, h, frID) {
        var i = document.createElement('iframe');
        i.src = src;
        i.scrolling = 'auto';
        i.frameborder = 0;
        i.style.width = w;
        i.style.height = h;
        document.getElementById(frID).appendChild(i);
    }

    // Definisikan dimensi, URL iframe dan tempat sasaran muat iframe di sini...
    createIframe("URL-Iframe", "Lebar Iframe", "Tinggi Iframe", "ID Kontainer");

}
//]]>
</script>

Klik Simpan Template. Sekarang kita masuk ke tahap pengaturan.

Pengaturan 

Dalam iframe Facebox, Anda akan menemukan beberapa kode yang nantinya harus Anda masukkan ke dalam preloader. Berikut ini adalah sebuah contoh dari iframe Facebox yang akan Anda dapatkan saat Anda mengeklik tombol Get Code:

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true" scrolling="no" style="border:none; overflow:hidden; width:292px; height:290px;" allowTransparency="true"></iframe>

Kita akan mengambil nilai atribut src, ukuran lebar dan tinggi pada iframe tersebut saja, sementara sisanya bisa kita buang.

Tambahkan sebuah elemen halaman HTML/JavaScript (atau cukup gunakan formulir widget Facebox lama Anda). Di dalam formulirnya, letakkan kode ini:

<div class="framePreloader" id="framePreloader1"></div>

Kode di atas digunakan untuk memuat iframe Facebox Anda. Simpan perubahan widget Anda.

Kembali pada fungsi yang telah kita letakkan di atas </body>, ubah variabel-variabelnya menjadi seperti ini:

createIframe("//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true", "292px", "290px", "framePreloader1");

Klik Simpan Template dan lihat hasilnya.

Catatan: Script ini tidak hanya berlaku untuk satu buah iframe saja. Anda bisa menggunakan satu fungsi ini untuk menunda proses muat beberapa iframe sekaligus. Pada intinya, yang terpenting adalah buat elemen-elemen kontainer yang akan kita gunakan sebagai wadah iframe seperti ini:

<div class="framePreloader" id="framePreloader1"></div>
<div class="framePreloader" id="framePreloader2"></div>
<div class="framePreloader" id="framePreloader3"></div>
<div class="framePreloader" id="framePreloader4"></div>

Setelah itu Anda bisa menggandakan fungsinya seperti ini:

createIframe("iframe1.html", "250px", "300px", "framePreloader1");
createIframe("iframe2.html", "250px", "300px", "framePreloader2");
createIframe("iframe3.html", "250px", "300px", "framePreloader3");
createIframe("iframe4.html", "250px", "300px", "framePreloader4");

22 Komentar

  • MUX SPARROW

    asli ga usah rikwes di sini mah.. langsung dibikinin tutorial sebelum diminta.. \o/

  • Taufik Nurrohman

    @MUXLIMO Cuma mencoba memecahkan masalah orang-orang mengenai blog. Dan juga untuk mengatasi kegalauan Saya yang rasanya pengen garuk-garuk Monumen Nasional tiap kali nyoba buka blog yang leletnya setengah wafat X@

  • MUX SPARROW

    @Taufik Nurrohman Jiakakaka.. jangan-jangan blog ane nih yang lodingnya setengah wafat ituh.. :p btw, udah diterapin ilmunya, Mas.. makasih.. moga gada yang pengen garuk2 monas lagi deh.. :D :D :D

  • coretan piggirdesa

    Sobat aku kenal blog kamu dari sahabat blowy Putu, saya benar2 pemula dan masih sangat mebutuhkan bimbingan anda dan mas Putu, maka melalui kolom komentar ini sudilah kiranya berkenan membimbing saya, oh ya saya latihan membuat blog diawali dari http://sdnsumogawe3.blogspot.com, trus tempat organisasi profesi di http://kkgpab.blogspot.com, kemudian saya tambah milik pribadi saya di http://lasino-stupa.blogspot.com,
    Katrok, wagu, tidak bagus itulah tampilan hasil karya saya di blog yang saya susun maka mohon bantuannya ya sobat

  • Taufik Nurrohman

    @Mas Lasino Saya rasa tidak juga. Tidak mungkin sebuah blog wagu sudah dilengkapi dengan fitur LazyLoad seperti ini:

    jQuery("img").lazyload({
    effect:"fadeIn",
    placeholder: "http://3.bp.blogspot.com/_LZtXSNcp76A/THkEtEOZfrI/AAAAAAAABRo/IARVMD_8TwA/s1600/grey.gif"
    });

    :-bd :-bd :-bd

  • Taufik Nurrohman

    @Mas Lasino Ya, Saya coba bantu. Atau selain ini Anda bisa juga mencoba menelusuri beberapa komentator di sini. Beberapa dari mereka juga pemilik blog tutorial blogspot :)

  • Unknown

    Adsnya kurang menarik bang kalau di simpan di bawah :D

  • Taufik Nurrohman

    @system of blog Bentar. Lagi bingung hehe... Itu juga tau-tau keluar sendiri tanpa diperintah :p

  • Unknown

    @Taufik Nurrohman ia thu setuju sama pernyataan atas mending simpan di samping iklan Taman Kanak-Kanak Raudhatul Athfal Miftahul Jannah KuntiliKecamatan Sumpiuh Kabupaten Banyumas Provinsi Jawa Tengah. itu kalau kalau disimpan di bawah bang. jangan di simpan di samping malah ndak kelihatan sama pengunjung, cuma saran aja kerena saya di tolak mulu ADS nya.. :'( :'(

  • Taufik Nurrohman

    @Suwardi Unggit Aduh mas... masalahnya ini AD keluar sendiri tanpa diperintah. Saya juga masih belum mendapat email konfirmasi soal ini. Sepertinya Saya masih dalam tahap tes :s Jadi Saya rasa lebih baik menunggu saja dulu.

    NB: Jujur saja, Saya memiliki sedikit perbedaan mengenai cara pandang tentang meletakkan iklan PPC di blog. Ini cuma pendapat pribadi, dan Saya sama sekali tidak berbakat dalam bidang ini, jadi silakan saja tertawa kalau memang ini lucu atau salah kaprah. Saya hanya mencoba mengambil sudut pandang dari segi psikologi, melihat sesuatu peristiwa yang terjadi pada orang lain sebagai sesuatu yang terjadi pada diri sendiri (empati):

    Kalaupun iklan diletakkan di sebelah atas, Saya sama sekali tidak bisa menjamin bahwa iklan tersebut akan diklik, karena seorang pembaca tidak akan mengunjungi sebuah blog untuk melihat iklan di atas, mereka akan segera melewatinya dan berpindah menuju ke bagian artikel karena tujuan mereka datang ke blog Anda adalah untuk membaca artikel, bukan untuk melihat iklan.
    Saya pikir, dengan meletakkan sebagian iklan (tidak semua) di bagian bawah setelah bagian artikel, kita telah memberikan cukup banyak kesempatan kepada para pembaca untuk membaca artikel sampai puas terlebih dahulu, sehingga setelah mereka puas, rasa keingintahuan mereka tentang "sesuatu" yang beberapa menit yang lalu mereka cari akan terselesaikan (yang jelas mereka bukan mencari iklan).
    Dan pada saat mereka telah merasa puas, maka mereka bisa mulai melihat-lihat bagian lain, tidak terkecuali iklan, tanpa harus dipaksa dan atau seolah-olah dipaksa <3

  • Unknown

    @Taufik Nurrohman maksud saya juga begitu bang, kerena iklan ADS itu kadang menarik maknya saya nyaranin disamping iklan Taman Kanak-Kanak, nah itukan letaknya udah pas sama keinginan abang, pengunjung yang baik itu suatu saat akan mengklik lho bang, toh menurut saya mengklik iklan juga tidak ada ruginya. asal jangan di buat jendela pop up aja malah buat pengunjung jengkel bang. maaf ini cuma saran bang semuanya kembali sama abang sebagai pengelola.

  • Taufik Nurrohman

    @Suwardi Unggit Hehe... sebenarnya sih pengennya Saya naruh di atas iklan taman kanak-kanak, tapi masalahnya iklan ini muncul dari elemen <data:adCode/> sedangkan di atasnya cuma ada elemen posting yang sudah dipaketkan menjadi elemen <b:include data='post' name='post'/> jadinya ya sudah nggak bisa diapa-apain :p Kecuali kalau Saya sudah tahu cara mindah ADS ke dalam elemen posting yang masih berupa <b:includable> bukan yang sudah menjadi <b:include>
    Sekarang Saya benar-benar masih awam sewawam-wawamnya.

  • Unknown

    q dah jadi ko malah ga ada orang yang sudah melike di boxnya ya mas taufik...
    gimana ya ??? :'(

  • Taufik Nurrohman

    @trii waluyo URL Like Boxnya pakai URL Like Box punya sendiri kan?

  • Anonim

    Mas saya tidak bisa terapin nie? :'( rencananya saya pingin buat iframe ke url

    http://godalmighty.googlecode.com/svn/trunk/Komentar.html
    http://godalmighty.googlecode.com/svn/trunk/RecentPost.html

    Di bawah artikel terkait, tapi efeknya tidak muncul muncul mas? ~x( Padahal semua langkah langkahnya sudah benar loh? Saya juga sudah masukkan

    <div id='Lastest'></div>
    <div id='Recent'></div/>

    dibawah script recent post? Mohon bantuannya ya mas?

  • Taufik Nurrohman

    @The7Bloggers Taruh scriptnya di atas </body>

  • Anonim

    @Taufik Nurrohman Mas sudah berhasil nie... Tapi aku pingin membuat tombol reloader iframe tersebut.... Ini ya kodenya:

    function framePreloader(frame, url, h) {
    $(frame).html('<iframe src="' + url + '" height="' + h + '" frameborder="0" width="100%"></iframe>');
    }
    function frameReloader(triggerParent, title, target, url, h, text) {
    $(triggerParent).append(' - <a href="#">' + title + '</a>');
    $('a', triggerParent).on("click", function() {
    $(target).html('<iframe width="100%" src="' + url + '" height="' + h + '"></iframe>');
    $('#loadingtext').html('<span>' + text + '</span>');
    $('iframe').load(function() {
    $('#loadingtext span').remove();
    });
    return false;
    });
    }
    frameReloader('#last-discussion', 'Muat Ulang', '#discussionFrame', 'http://hompimpa.googlecode.com/svn/trunk/personal/comm-frame.html', '770', 'Memuat...');
    
  • Taufik Nurrohman

    @The7Bloggers :-bd :-bd :-bd :-bd :-bd

  • Anonim

    @Taufik Nurrohman Mas udah berhasil semua nie....? :) heheheheheheh I like it....

    Oya maf banget ya mas, kebanyakan elemen-elemen jQuery dan CSS di blog aku itu ngambil dari source code blog kamu..... Maaf banget ya mas..... Saya telah banyak mengambil code-code blog kamu......

  • dhanyn10

    maaf mas taufik mungkin saya menyimpang dari topik yg dbhas dsini, saya tanya bagaimana cara membuat blockquote dengan fungsi scroll seperti punya mas?
    kalo berkenan tolong kunjungi juga ke http://dhanynurdiansyah.blogspot.com

  • Unknown

    Apakah cara di atas bisa diterapkan di wordpress.org mas?

Komentar telah ditutup.