Home / Widget Blog / Membuat Facebox/Like Box Preloader

Cara Download Membuat Facebox/Like Box Preloader Update Terbaru

Sedikit Info Seputar Membuat Facebox/Like Box Preloader Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Membuat Facebox/Like Box Preloader, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel Widget Blog, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Membuat Facebox/Like Box Preloader Terbaru
link: Membuat Facebox/Like Box Preloader

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Membuat Facebox/Like Box Preloader Terbaru dan Terlengkap 2017

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 dibangun menggunakan Iframe, jadi saat Anda memilih kode widget, ambillah 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: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'>
//<![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.width       = w;
        i.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" 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&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");

Itulah sedikit Artikel Membuat Facebox/Like Box Preloader terbaru dari kami

Semoga artikel Membuat Facebox/Like Box Preloader yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Membuat Facebox/Like Box Preloader

Share this