Cara Posting Iframe di Blogdetik dg jQuery Iframe Preview

25 Dec 2011

Ini adalah sebuah solusi bagi sobat2 blogger, terutama d’blogger yang selama ini mungkin mengalami kesulitan untuk menampilkan sebuah iframe di halaman posting blogdetik. Iframe yang dsimaksud seperti misalny video dari Youtube, Vimeo, DailyMotion serta beberapa yang lain, termasuk diantaranya misalnya ingin menyertakan peta lokasi yang diambilkan merlalui embed kode google maps atau mungkin saja ingin menampilkan sebuah preview blog anda yang lain sebagai bagian dari posting di Blogdetik. Dengan menggunakan jQuery iframe preview maka dengan gampang semua dapat dengan mudah menjadi bagian dari posting sampeyan. Javascript yang digunakan sangatlah sederhana karena sudah ditopang dengan digunakannya jQuery. Sampeyan juga tak perlu repot-repot mencari javascript hosting untyuk menyimpan scriptnya. Semua cukup disimpan melalui widgetize any HTML yang tersedia dan dapat diakses di halaman dasbor.

Agar semuanya menjadi lebih jelas, sebaiknya langsung saja sampeyan lihat demonya terlebih dahulu melalui link di bawah ini:

Cara Menggunakan jQuery Iframe Preview
  1. Login di Blogdetik.
  2. Dasbor : Setelah halaman dasbor terbuka, arahkan cursor di atas link menu “Appearance“.
  3. Pilih dan klik Widget.
  4. Copy dan pastekan seluruh kode CSS dan Javascript pada box “Widgetize Any HTML“.
  5. KlikSave Changes“.
  6. Buat posting dan gunakan kode seperti yang anda lihat dalam demo kemudian lihat hasilnya.

Kode CSS dan Javascript

<style type="text/css">
div.GR_iframe{
	position:relative;
    background:url(https://867487890086731341-a-1802744773732722657-s-sites.googlegroups.com/site/jqueryprojects/images/bg-vert/bg_vert-1x1000-grad-transp-blue.png) bottom left repeat-x;
	padding:6px;
	border:2px solid #036;
	box-shadow:0 0 8px #000;
	border-radius:8px;
	float:left;
	margin:6px 15px 6px 0;
}
p.GR_iframe-title{
	text-align:left;
	font-size:18px !important;
	color:#aaa !important;
	font-weight:normal;
	text-transform:uppercase;
	padding:4px 8px;
	margin:20px 0 0;
	clear:both;
	display:block;
	text-shadow:1px 1px 1px #000;
}
div.GR_iframe iframe#content_iframe{
	transition:1.0s;
	-o-transition:1.0s;
	-moz-transition:1.0s;
	-webkit-transition:1.0s;
	opacity:0.5 !important;
	filter:alpha(opacity=50);
	box-shadow:0 0 8px #eee;
	padding:3px;
	border-radius:5px;
	background:rgba(0,0,0,0.2) url(https://867487890086731341-a-1802744773732722657-s-sites.googlegroups.com/site/jqueryprojects/images/animation/gubhygreyot-blue-white-flash-loading.gif) center center no-repeat !important;
	margin:0 auto !important;
	background:rgba(0,0,0,0.4);
}
div.GR_iframe:hover iframe#content_iframe{
	opacity:1.0 !important;
	filter:alpha(opacity=100);
}
span.GR_caption{
	display:inline-block;
	margin:5px 10px 2px;
	font-size:14px;
	font-family:Georgia,"Times New Roman",Times,serif;
	color:#eee;
	text-shadow:1px 1px 1px #000;
}
</style>


<script src=""https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>


<script type="text/javascript">
/* gubhugreyot.blogspot.com - gubhugreyot.blogdetik.com  http://www.lucidcrew.com */
jQuery.fn.iframe=function(a){return this.each(function(){var g=jQuery(this);var c=this.className;var f=jQuery.extend({frameborder:((c.match(/fb:(\d+)/)||[])[1])||0,marginwidth:((c.match(/wm:(\d+)/)||[])[1])||0,marginheight:((c.match(/hm:(\d+)/)||[])[1])||0,width:((c.match(/w:(\d+)/)||[])[1])||640,height:((c.match(/h:(\d+)/)||[])[1])||480,scrolling:((c.match(/sc:(\w+)/)||[])[1])||"auto",version:"1,0,0,0",cls:c,src:g.attr("href")||g.attr("src"),id:g.attr("id"),caption:g.attr("text"),attrs:{},elementType:"div",xhtml:true},a||{});var e=f.xhtml?"/>":">";var b=['<iframe src="'+f.src+'"'];if(f.id){b.push(' id="'+f.id+'"')}else{b.push(' id="content_iframe"')}b.push(' frameborder="'+f.frameborder+'"');b.push(' marginwidth="'+f.marginwidth+'"');b.push(' marginheight="'+f.marginheight+'"');b.push(' width="'+f.width+'"');b.push(' height="'+f.height+'"');b.push(' scrolling="'+f.scrolling+'"');b.push(' autoplay="false" ');b.push(e);var d=jQuery("<"+f.elementType+' class="'+f.cls+'"></'+f.elementType+">");g.after(d).remove();d.html(b.join(""));if(f.caption){d.append('<br /><span class="GR_caption">'+f.caption+"</span>")}})};$(function(){$("a.GR_iframe").iframe()});
</script>
Catatan/Keterangan:
  1. Dua buah background-image yang digunakan di kode CSS harus anda ganti dengan cara mengupload diblogdetik agar dapat ditampilkan dengan cepat dan sempurna.

    • https://867487890086731341-a-1802744773732722657-s-sites.googlegroups.com/site/jqueryprojects/images/bg-vert/bg_vert-1×1000-grad-transp-blue.png
    • https://867487890086731341-a-1802744773732722657-s-sites.googlegroups.com/site/jqueryprojects/images/animation/gubhygreyot-blue-white-flash-loading.gif
  2. Untuk posting gunakan kode seperti yang terlihat pada demo.
  3. Bagi yang menginginkan panduan cara untuk menambahkan Widgetize Any HTML hingga cara menyimpan kode CSS, javascript dan xHTML, silahkan KLIK link di bawah ini:

    Panduan Cara Menyimpan Kode HTML, CSS dan Javascript.

  4. jQuery Iframe Preview dapat juga digunakan di blogger.

Berbagai tutorial dan panduan blogger dan blogDETIK dapat sampeyan buka dengan :

Happy Blogging


TAGS Tutorial Blogger Tutorial BlogDETIK Panduan BlogDETIK


-

Author

Follow Me