Di sini Saya memakai 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 alasannya ialah kita telah menahan Facebox untuk memuat sebelum keseluruhan halaman berhasil termuat:
Sebelum melanjutkan ke langkah pembuatannya (atau lebih tepatnya: langkah modifikasi), Anda harus sudah mempunyai widget Facebox pada blog Anda. Jika belum, buat widget Facebox Anda terlebih dahulu » Telusuri wacana cara menciptakan widget Facebox di blog
Preloader ini hanya berlaku untuk Facebox yang ditampilkan melalui iframe, jadi dikala Anda menentukan instruksi widget, ambi yang berada pada tab Iframe:
Untuk membuatnya, pertama-tama masuklah ke sajian Template kemudian klik Edit HTML dan klik Lanjutkan:
Temukan instruksi ini:
]]></b:skin>
Salin instruksi CSS di bawah ini kemudian letakkan di atasnya:
/* Iframe Preloader */ .framePreloader iframe { background-color:white; border:0 !important; display:block; margin:0 auto; }Setelah itu temukan instruksi ini:
</body>
Salin instruksi 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 kawasan 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 instruksi yang nantinya harus Anda masukkan ke dalam preloader. Berikut ini ialah sebuah rujukan dari iframe Facebox yang akan Anda dapatkan dikala Anda mengeklik tombol Get Code:
Kita akan mengambil nilai atribut src, ukuran lebar dan tinggi pada iframe tersebut saja, sementara sisanya sanggup kita buang.
Tambahkan sebuah elemen halaman HTML/JavaScript (atau cukup gunakan formulir widget Facebox usang Anda). Di dalam formulirnya, letakkan instruksi ini:
<div class="framePreloader" id="framePreloader1"></div>Kode di atas dipakai untuk memuat iframe Facebox Anda. Simpan perubahan widget Anda.
Kembali pada fungsi yang telah kita letakkan di atas </body>, ubah variabel-variabelnya menjadi ibarat ini:
createIframe("//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 sanggup memakai satu fungsi ini untuk menunda proses muat beberapa iframe sekaligus. Pada intinya, yang terpenting ialah buat elemen-elemen kontainer yang akan kita gunakan sebagai wadah iframe ibarat 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 sanggup meniru fungsinya ibarat 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");