Cara Memasang Konten 3D WebGL Di Blogspot Maupun Wordpress Dengan Iframe

Hai gaes, kali ini Dukuntekno akan mengulas mengenai tutorial cara memasang object 3D WebGL di halaman postingan Blogspot. Tutorial ini sebenernya cuman iseng-iseng aja sih, karena untuk apa nampilin konten 3D emangnya game??? wkwkwkwk ðŸ˜‚. Tapi emang bisa di pasangin game juga sih yang grafiknya udah 3D di dalam blog. Nah untuk contoh object WebGL seperti berikut ini, saya menggunakan iframe dan didalam atributnya saya masukkan url situs https://globe.chromeexperiments.com/


Tujuan tutorial ini sih untuk keren-kerenan aja kali ya, punya blog yang bisa nampilin konten 3D itu menurut Saya kayak orang yang udah pro dibidang koding wkwkwk ðŸ˜‚, walaupun sebenernya ini hanya memanfaatkan situs orang lain dan kita tampilin di blog kita menggunakan bantuan skript iframe.

Lihat gambar 3D WebGL diatas yang bisa digerakkan dengan mouse, konten 3D diatas menampilkan Bumi dalam bentuk 3D dan menunjukkan diagram Populasi manusia dari tahun 1990, 1995 dan 2000. Untuk memasangnya mudah banget, cukup mencari situs / url situs yang menampilkan konten 3D WebGL, Anda bisa mencarinya di Google dengan kata kunci "WebGL Example". Seperti yang saya sebutkan tadi, Saya menggunakan situs https://globe.chromeexperiments.com/ dan berikut cara memasangnya dengan skript iframe.

Tutorial Memasang Konten 3D WebGL Di Blogspot Dan Wordpress Dengan Iframe 
1. Buat postingan baru pada blogspot, lalu edit ke mode HTML.

2. Cari situs yang menampilkan konten 3D WebGL secara fullscreen, disini saya menggunakan situs https://globe.chromeexperiments.com/.

3. Copy code iframe berikut lalu pastekan ke dalam editor post HTML yang dibuat tadi.

<style type="text/css">.responsive-container{position:relative;overflow:hidden;padding-top:56.25%}.responsive-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
</style>

<div class="responsive-container" rel="nofollow">
<iframe class="responsive-iframe" height="800" src="https://globe.chromeexperiments.com/" width="450"></iframe></div>

4. Perhatikan tulisan warna merah pada kode diatas, Anda bisa mengantinya dengan link situs lain.

5. Selanjutnya tinggal simpan / Publish.

Nah sekarang situs kamu makin keren ya berkat postingan WebGL nya, wkwkwkwk ðŸ˜‚. Sebenarnya skript iframe sendiri bisa menampilkan halaman dari situs selain konten WebGL, beberapa diantaranya juga dipakai untuk membuat fitur Related Post pada blogspot, termasuk Dukuntekno sendiri karena menurut saya lebih ringan.