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:
Preloader ini hanya berlaku untuk Facebox yang dibangun menggunakan Iframe, jadi saat Anda memilih kode widget, ambillah yang berada pada tab
Iframe:
Untuk membuatnya, pertama-tama masuklah ke menu
Template kemudian klik
Edit HTML dan klik
Lanjutkan:
Temukan kode ini:
]]></b:skin>
Salin kode CSS di bawah ini lalu letakkan di atasnya:
.framePreloader iframe {
background-color:white;
border:none !important;
display:block;
margin:0px auto;
}
Setelah itu temukan kode ini:
</body>
Salin kode di bawah ini kemudian letakkan di atasnya:
<script type='text/javascript'>
window.onload = function() {
function createIframe(src, w, h, frID) {
var i = document.createElement("iframe");
i.src = src;
i.scrolling = "auto";
i.frameborder = "0";
i.width = w;
i.height = h;
document.getElementById(frID).appendChild(i);
}
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&width=292&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true" scrolling="no" frameborder="0" 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("http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&height=290&colorscheme=light&show_faces=true&border_color&stream=false&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");