Menampilkan Google Maps, mp3, swf, Vimeo di halaman posting Blogdetik

17 Dec 2011

Posting ini adalah demo media/iframe preview bagian ke-2. Anda bisa melihat demo yang lain dengan klik link di bawah ini:

Dengan jQuery plugin media/iframe preview yang sangat sederhana, anda dapat menampilkan peta lokasi yang datanya diambil dari “kode embed” di Google maps”. Petakan detail wilayah yang akan ditampilkan di halaman blog dengan cara memperbesar dan/atau memperkecil skala serta menggeser posisi secara tepat, kemudian ambil “kode embed-nya” seperti yang terlihat pada link di bawah. Jangan lupa untuk menggunakan embed kode yang memuat data wilayah secara detail melalui pop-up windows google-maps!

Iframe content » Google Maps

Media/Iframe Preview : Google Maps

Kode HTML :

<h3>Iframe content » Google Maps</h3> <a class="GRprev_iframe {width:630, height:400, type:'iframe'}" href="http://maps.google.co.id/maps?f=q&source=s_q&hl=id&geocode=&q=Aldevco+Octagon+Building+-+Lantai+2&aq=&sll=-6.191755,106.815262&sspn=0.351559,0.441513&vpsrc=6&ie=UTF8&hq=Aldevco+Octagon+Building+-+Lantai+2&hnear=&t=h&ll=-0.263671,112.324219&spn=19.677817,35.068359&z=4&output=embed">Media/Iframe Preview : Google Maps</a>

Peta dari google maps ini menggunakan ukuran width=630px dan height=400px. Anda bisa menampilkan dalam berbagai ukuran dengan merubah nilai width:630, height:400, type:’iframe’ dengan ukuran yang dikehendaki dan sesuai dengan lebar halaman posting.

Iframe content » Vimeo (video)

vimeo.com » Pilihan selain Youtube

Sumber video berbagai peristiwa menarik dapat anda dapatkan juga melalui vimeo.com. Ukuran preview secara umum bernilai width:400 dan height:300. Nilai tersebut berdasar rasio perbandingan format 4:3. Anda dapat merubahnya dengan format 16:9 sehingga nilainya berubah menjadi width:400, height:225.

Kode HTML :

<h3>Iframe content » Vimeo (video)</h3> <a class="GRprev_iframe (width:480, height:360, type:'iframe'}" href="http://player.vimeo.com/video/12067849?title=0&byline=0&portrait=0">vimeo.com » Pilihan selain Youtube</a>

Iframe content » flash file (.swf)

Image preview

Ukuran file flash sangat fleksibel pengaturannya. Silahkan atur ukuran sesuai keinginan anda!

Kode HTML :

<h3>Iframe content » flash file (.swf)</h3> <a class="GRprev_iframe {width:630, height:500, type:'swf'}" href="http://demojqueryprojects.comule.com/flash/bola-bola-gila.swf">Image preview</a>

Iframe Content » audio file (.mp3)

Bisa anda gunakan sebagai background music!

Anda cukup menggunakan height:20 karena file .mp3 hanya memerlukan controller saja.

Kode HTML :

<h3>Iframe Content » audio file (.mp3)</h3> <a class="GRprev_audio {width:330, height:20}" href="http://demojqueryprojects.comule.com/Audio/gubhugreyot_media-audio.mp3">Bisa anda gunakan sebagai background music!</a>

Tunggu tutorialnya di gubhugreyot.blogdetik.com


TAGS Media & Iframe preview jQuery


-

Author

Follow Me