Jika aboi suka ngakses Wisbenbae dari desktop, aboi pasti tahu ada widget Flipboard magazine yg embedded di semua halaman artikel – aboi bisa lihat salah satunya di sini. Majalah ini menawarkan beberapa pilihan, lebih kaya akan pengalaman visual pengunjung sehingga lebih banyak lagi halaman blog yang kan di lihat.
Apapun jenis Flipboard magazine bisa dengan mudah di embedded dengan menggunakan standar tag IFRAME di sebuah web page tapi aboi perlu pertimbangkan beberapa hal ini :
Widget majalah ini hanya ditampilan di PC karena layout majalah belum dioptimalkan untuk tampilan perangkat genggam.
Widget ini berat makanya harus ditambah secara asynchronous ke sebuah web page sehingga tidak nge block elemen lain di halaman itu buat tampil di browser.
Begini caranya meng-embed Flipboard magazine yang akan menjaga dua syarat di atas terpenuhi.
Langkah 1 – Masukkan <div> di manapun di template web aboi dimana aboi pengen Flipboard magazine tampil.<div id="flipboard"></div>
Langkah 2 – Masukkan JavaScript snippet ini dket tag </body> penutup website aboi. Ini akan nge loading secara asynchronous dan maka itu nanti bisa diganti di bagian terbawah halaman.
<script>
(function () {
var width = 0,
flipboard = document.getElementById('flipboard');
width = flipboard.getBoundingClientRect().width ? flipboard.getBoundingClientRect().width : flipboard.offsetWidth;
if (width > 800) {
flipboard.innerHTML = '<iframe width="100%" frameborder="0" height="600px" marginheight="0" marginwidth="0" scrolling="no" src="https://flipboard.com/section/tech-tips-bnjaT5"></iframe>'
}
})();
</script>
*Ingat, gantilah Flipboard magazine URL dengan punya aboi sendiri.
Secara Internal, JavaScript akan menghitung lebar dari browser pengunjung, jika ukurannya lebih besar dari 800px, maka IFRAME akan ditambahkan ke DIV. Gampang kan ?
Post a Comment Blogger Facebook