Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Membuat Facebox/Like Box Preloader

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");

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 22 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!