Backup: 2013

Selasa, 31 Desember 2013

Cara Membuat Avatar Comments Bulat

Cara Membuat Avatar Comments Bulat,mungkin sudah banyak blogger yang share tutorial ini.tapi tidak ada salahnya jika saya juga ikut berbagi dengan sobat blogger semua,kebetulan saya juga baru membuat comments avatar menjadi bulat pada blog ini.
Comments Avatar atau photo komentar yang ada pada blog kita pada umumnya adalah berbentuk persegi atau kotak.
Untuk mempercantik tampilan pada blog kita salah satunya dengan membuat comments avatar menjadi bulat.

* DEMO *

1. Login blog Kamu
2. Klik Design > Edit HTML > centang pada Expand widget template
3. Cari kode ]]></b:skin>
Gunakan CTRL+F agar lebih mudah dalam mencari kodenya
4. Copy kode dibawah ini dan letakan diatas kode ]]></b:skin>

     .comments .avatar-image-container{
            max-height:50px;
            max-width:50px;
            height:50px;
            width:50px;
            border-radius:29px;
            padding:2px;
            border:2px solid #39E939;
            box-shadow:-1px -1px 1px #444,2px 2px 4px #444;
            background:#1B3CFA;
            margin:2px 4px 2px 2px;
    }
    .comments .avatar-image-container img{
            width:50px;
            max-width:50px;
            height:50px;
            max-height:50px;
            border-radius:25px;
            border:0 solid #FE081C !important;
    }
    .comments .comment-block{
            margin-left:75px;
    }

5. Klik Pratinjau,jika tidak kesalahan silahkan Simpan dan lihat hasilnya pada kolom komentar

Keterangan : Untuk warna Merah background dan warna border sesuaikan dengan keinginan kamu.

* Terima Kasih Atas Kunjungan Anda *

Cara Membuat Effect Blur Pada Semua Gambar Di Blog

Cara kerja efek gambar transparant di bawah ini tidak begitu sulit, yang kita perlukan hanya memanfaatkan properti CSS Image Opacity. Namun sebelumnya perlu juga diketahui property CSS opacity sebenarnya tidak termasuk dalam standar CSS, dimana property ini hanya bekerja dengan baik pada beberapa web browser modern saja.

1. Contoh mouseover effect dari redup ke lebih terang ( diset langsung dalam gambar )

2. Contoh mouseover effect dari terang ke redup ( diset langsung dalam gambar )

Mungkin agak ribet juga ya jika setiap image harus diset satu-persatu nilainya propertinya, nah agar setiap postingan rekan langsung memilik efek ini secara otomatis, bisa langsung menambahkan kode CSS ini:

Berikut langkah - langkah Membuat Effect Blur :
-----------------------------------------------
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode ]]></b:skin>
5. Lalu Masukkan Salah satu Kode CSS dibawah ini, tepat diatas kode ]]></b:skin>

1. Code mouseover effect dari redup ke lebih terang

.post img{opacity:0.5; filter:alpha(opacity=40); this.style.opacity=6}
.post img:hover{opacity:100; filter:alpha(opacity=40); this.style.opacity=1}

2. Code mouseover effect dari terang ke redup

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

6. Save, lihat hasilnya,..

NB: Setahu saya Firefox biasanya menggunakan property opacity:x untuk melakukan tranparancy, berbeda dengan IE yang menggunakan filter:alpha(opacity=x). Pada Firefox opacity:x nilai pada x dapat diisi dengan value antar 0.0 -1.0 sedangkan pada IE filter:alpha(opacity=x) nilai x antara 0-100.

* Terima Kasih Atas Kunjungan Anda *

Cara Membuat Anti Click Kanan By XPS-PRO

" Cara Membuat Anti Click Kanan By XPS-PRO " kalian pasti penasaran bukan?? kalau begitu silahkan disimak

* DEMO *

1. Buka Template
2. Buka Edit HTML
3. Lalu cari kode </body>
4. Paste script dibawah ini tepat diatas kode </body>

<style> .overlay{ background-color:rgba(0,0, 0, .9); position:fixed; top:0px; bottom:0px; left:0px; right:0px; z-index:100; } .box{ position:fixed; height:258px; width:375px; left:-80%; top:22%; background-color:rgba(0,0, 0, .4); background-image:url(http://i1114.photobucket.com/albums/k525/hackn3/stop_zpsae89599b.png); color:#777; font:20px arial,sans serif; padding:20px; border:1px solid #222; -moz-box-shadow: 0 1px 5px #000; -webkit-box-shadow: 0 1px 5px #000; z-index:9999; } .close{ float:right; width:36px; height:36px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDoYGJfN8vRD7X0U0ksoKhJm0HnQq-eShDzITm3a0VYzHviPYPx8GuhVaXDo0RyIQOu-b31bvzKHGTS0cJYTeyhWCDqeFwa1tHXW0KiAikjIHer4qR3KaOiAYomdHLd5qA4gbgWZ-CdVFm/s1600/close_icon.png) repeat top left; margin-top:-45px; margin-right:-40px; cursor:pointer; } .box h1{ font:60px arial black,sans serif;line-height:0.8em; color:red; } </style><script src='https://sites.google.com/site/xpshackblogspotcom/file-js/Disable%20Klik%20Kanan%20XPS-Viewer.js' type='text/javascript'></script><div class='overlay' id='overlay' style='display:none;'></div><div class='box' id='box'><a class='close' id='close'></a></div>

6. Ganti Url Gambar Warna Merah Dengan Url gambar Kamu .. Save Dan lihat hasilnya.

* Terima Kasih Atas Kunjungan Anda *

Cara Membuat Entri Populer Bergerak Keatas

Memodifikasi Populer Post/Entri Populer dengan marque/berjalan ke atas,seperti populer post pada blog XPS-PRO

* DEMO *

OK buat yang tertarik, silahkan ikuti langkah-langkah berikut :

1. Masuk akun Blogger - Tata Letak - Tambahkan Gadget dan pilih Entri Populer seperti gambar dibawah ini,jika dalam blog kalian sudah terpasang widget Entri Populer tidak perlu menambahkan widget ini.

2. Kemudian masuk ke bagian Edit HTML
3. Cari kode <div class='widget-content popular-posts'> dan simpan kode marquee dibawah ini pada bagian bawah kode tersebut.

<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>

5. Selanjutnya cari kode </b:loop> dan tambahkan kode </marquee> dibawah kode </b:loop>

Sehingga secara keseluruhan kodenya menjadi seperti dibawah ini :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content popular-posts'>
    <marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
    <b:loop values='data:posts' var='post'>
    <li>
    <b:if cond='data:showThumbnails == "false"'>
    <b:if cond='data:showSnippets == "false"'>
    
    <a expr:href='data:post.href'><data:post.title/></a>
    <b:else/>
    
    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    <div class='item-snippet'><data:post.snippet/></div>
    </b:if>
    <b:else/>
    <b:if cond='data:showSnippets == "false"'>
    
    <div class='item-thumbnail-only'>
    <b:if cond='data:post.thumbnail'>
    <div class='item-thumbnail'>
    <a expr:href='data:post.href' target='_blank'>
    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
    </a>
    </div>
    </b:if>
    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    </div>
    <div style='clear: both;'/>
    <b:else/>
    
    <div class='item-content'>
    <b:if cond='data:post.thumbnail'>
    <div class='item-thumbnail'>
    <a expr:href='data:post.href' target='_blank'>
    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
    </a>
    </div>
    </b:if>
    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    <div class='item-snippet'><data:post.snippet/></div>
    </div>
    <div style='clear: both;'/>
    </b:if>
    </b:if>
    </li>
    </b:loop>
    </marquee> </ul>
    <b:include name='quickedit'/></div>
    </div>
    </b:includable>
    </b:widget>

6. Save template, dan buka blog kalian untuk melihat hasilnya.

*kode Merah Diatas Adalah Kode yang ditambahkan dalam edit html*

* Terima Kasih Atas Kunjungan Anda *

Cara Membuat Efek Ketikan Pada Judul Blog

Effect ketikan pada judul Blog, mungkin Kalian sudah tahukan,kalau belum mengerti silahkan check DEMO dan perhatikan pada judul blog

* DEMO *

OK buat yang tertarik, silahkan ikuti langkah-langkah berikut :
1. Seperti biasa Login ke Blog Kalian
2. Trus pilih Tata Letak
3. Klik Edit HTML
4. Cari Code </body>
5. Paste Code di bawah ini tepat diatas Code yang tadi.

    <script>
    var tit = document.title;
    var c = 0;
    function writetitle() {
    document.title = tit.substring(0,c);
    if(c==tit.length)
    {
    c = 0;
    setTimeout("writetitle()", 2000)
    }
    else {
    c++;
    setTimeout("writetitle()", 275)
    }
    }
    writetitle()
    </script>

6. Kemudian Simpan Dan liat Hasilnya

* Terima Kasih Atas Kunjungan Anda *

Cara Membuat Banner / Link Otomatis Terbuka Saat Disorot Mouse

cara membuat link terbuka otomatis tanpa di klik,apabila kita sorot mouse ke banner/link tersebut tanpa kita klik secara otomatis akan masuk ke link tersebut,:)

Sebagai contoh coba kamu sorot gambar dan teks berikut...

>>> XPS-PRO <<<

1. Untuk teks :

<a href="http://link-kamu.com" onMouseover="window.location=this.href"><b>Ganti Tulisan disini</b></a>

CONTOH

<a href="http://xps-pro.blogspot.com.com" onMouseover="window.location=this.href"><b>XPS-PRO</b></a>

Tulisan Berwarna Merah : Link Kamu
Tulisan Berwarna Biru : Tulisan Kamu

2. Untuk Banner :

<a href="http://link-kamu.com"onmouseover="window.location=this.href" title="Ganti Tulisan disini"><img src="Link gambar Kamu disini" /></a>

CONTOH

<a href="http://xps-pro.blogspot.com" onmouseover="window.location=this.href" title="XPS-PRO"><img src="http://ares.cooltext.com/images/990/990694dc73186e27be6441b43271fa0d80ad9c57.png" /></a>

Tulisan Berwarna Merah : Link Kamu
Tulisan Berwarna Biru : Tulisan Kamu
Tulisan Berwarna Ungu : Link Gambar Kamu

Cara Membuat Efek Profile berputar Saat Di Sentuh Mouse

Membuat profil/about me pada blogger berputar saat mengarahkan mouse
ke photo profil blogger.

* DEMO *

1.Login ke Blog
2.Rancangan --> Edit HTML
3.Cari Kode ]]></B:skin> Lalu masukkan Kode Dibawah Ini diatas kode ]]></B:skin>

    /************************************************
    * Profile berputar by XPS-PRO * Start
    ************************************************/
    .profile-img{border: 8px solid #aaa; border-radius: 6px; box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
    -moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
    -webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
    -o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
    -moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in; -webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in; background:transparent; float:left; margin:0 10px 5px 0; padding:0}
    .profile-img:hover { opacity: 1.0; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -moz-box-shadow: 1px 1px 1px #33F, -1px -1px 1px #33F, 0 0 16px #33F; margin: 40px 0px 20px 10px; -o-transform: rotate(1460deg) scale(1.8) translate(35px, 10px); -moz-transform: rotate(1460deg) scale(1.8) translate(35px, 10px); -webkit-transform: rotate(1460deg) scale(1.8) translate(35px, 10px); -o-transition: margin-left 1.5s ease-in 0.1s, margin-top 1.0s, -o-transform 2.5s ease-out 1.4s, opacity 1s ease-in 1s; -moz-transition: margin 1.5s ease-in 0.1s, -moz-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s; -webkit-transition: margin 1.5s ease-in 0.1s, -webkit-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s;}
    .profile-data{color:red; margin:0; padding:0; letter-spacing:.1em; font-weight:bold}
    .profile-datablock{margin:0}
    .profile-textblock{margin:5px 0}
    .profile-link{color:red; font-size:12px; letter-spacing:.1em}/************************************************
    * Profile berputar by XPS-PRO * End
    ************************************************/

* Terima Kasih Atas Kunjungan Anda *

Cara Mengganti LightBox Dengan FancyBox

Mungkin ada yang belum tahu apasih LightBox dan FancyBox itu?? kalo menurut saya LightBox itu tampilan pada saat melihat gambar yang mengandung link pada postingan dengan mengklik gambar tersebut. Sedangkan FancyBox sebagai pengganti LightBox yang menampilkan gambar dengan style/gaya. Untuk contoh silahkan lihat

* DEMO *

Langsung saja berikut cara menerapkan PiroBox :
1. Kamu harus menonaktifkan LightBox bawaan blogger terlebih dahulu.
caranya: Masuk pada Stelan » Pos dan Komentar » Tampilkan gambar dengan Lightbox ? pilih Tidak.

2. letakkan kode dibawah ini diatas kode </head>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    /*! fancyBox v2.0.6 fancyapps.com | fancyapps.com/fancybox/#license */
    (function(s,l,d,t){var m=d(s),q=d(l),a=d.fancybox=function(){a.open.apply(this,arguments)},u=!1,k=l.createTouch!==t,o=function(a){return"string"===d.type(a)},n=function(b,c){c&&o(b)&&0<b.indexOf("%")&&(b=a.getViewport()[c]/100*parseInt(b,10));return Math.round(b)+"px"};d.extend(a,{version:"2.0.5",defaults:{padding:15,margin:20,width:800,height:600,minWidth:100,minHeight:100,maxWidth:9999,maxHeight:9999,autoSize:!0,autoResize:!k,autoCenter:!k,fitToView:!0,aspectRatio:!1,topRatio:0.5,fixed:!1,scrolling:"auto",
    wrapCSS:"",arrows:!0,closeBtn:!0,closeClick:!1,nextClick:!1,mouseWheel:!0,autoPlay:!1,playSpeed:3E3,preload:3,modal:!1,loop:!0,ajax:{dataType:"html",headers:{"X-fancyBox":!0}},keys:{next:[13,32,34,39,40],prev:[8,33,37,38],close:[27]},tpl:{wrap:'<div class="fancybox-wrap"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',image:'<img class="fancybox-image" src="{href}" alt="" />',iframe:'<iframe class="fancybox-iframe" name="fancybox-frame{rnd}" frameborder="0" hspace="0"'+
    (d.browser.msie?' allowtransparency="true"':"")+"></iframe>",swf:'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"><param name="wmode" value="transparent" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{href}" /><embed src="{href}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="100%" height="100%" wmode="transparent"></embed></object>',error:'<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
    closeBtn:'<div title="Close" class="fancybox-item fancybox-close"></div>',next:'<a title="Next" class="fancybox-nav fancybox-next"><span></span></a>',prev:'<a title="Previous" class="fancybox-nav fancybox-prev"><span></span></a>'},openEffect:"fade",openSpeed:300,openEasing:"swing",openOpacity:!0,openMethod:"zoomIn",closeEffect:"fade",closeSpeed:300,closeEasing:"swing",closeOpacity:!0,closeMethod:"zoomOut",nextEffect:"elastic",nextSpeed:300,nextEasing:"swing",nextMethod:"changeIn",prevEffect:"elastic",
    prevSpeed:300,prevEasing:"swing",prevMethod:"changeOut",helpers:{overlay:{speedIn:0,speedOut:300,opacity:0.8,css:{cursor:"pointer"},closeClick:!0},title:{type:"float"}}},group:{},opts:{},coming:null,current:null,isOpen:!1,isOpened:!1,player:{timer:null,isActive:!1},ajaxLoad:null,imgPreload:null,transitions:{},helpers:{},open:function(b,c){a.close(!0);b&&!d.isArray(b)&&(b=b instanceof d?d(b).get():[b]);a.isActive=!0;a.opts=d.extend(!0,{},a.defaults,c);d.isPlainObject(c)&&c.keys!==t&&(a.opts.keys=c.keys?
    d.extend({},a.defaults.keys,c.keys):!1);a.group=b;a._start(a.opts.index||0)},cancel:function(){a.coming&&!1===a.trigger("onCancel")||(a.coming=null,a.hideLoading(),a.ajaxLoad&&a.ajaxLoad.abort(),a.ajaxLoad=null,a.imgPreload&&(a.imgPreload.onload=a.imgPreload.onabort=a.imgPreload.onerror=null))},close:function(b){a.cancel();a.current&&!1!==a.trigger("beforeClose")&&(a.unbindEvents(),!a.isOpen||b&&!0===b[0]?(d(".fancybox-wrap").stop().trigger("onReset").remove(),a._afterZoomOut()):(a.isOpen=a.isOpened=
    !1,d(".fancybox-item, .fancybox-nav").remove(),a.wrap.stop(!0).removeClass("fancybox-opened"),a.inner.css("overflow","hidden"),a.transitions[a.current.closeMethod]()))},play:function(b){var c=function(){clearTimeout(a.player.timer)},e=function(){c();a.current&&a.player.isActive&&(a.player.timer=setTimeout(a.next,a.current.playSpeed))},f=function(){c();d("body").unbind(".player");a.player.isActive=!1;a.trigger("onPlayEnd")};if(a.player.isActive||b&&!1===b[0])f();else if(a.current&&(a.current.loop||
    a.current.index<a.group.length-1))a.player.isActive=!0,d("body").bind({"afterShow.player onUpdate.player":e,"onCancel.player beforeClose.player":f,"beforeLoad.player":c}),e(),a.trigger("onPlayStart")},next:function(){a.current&&a.jumpto(a.current.index+1)},prev:function(){a.current&&a.jumpto(a.current.index-1)},jumpto:function(b){a.current&&(b=parseInt(b,10),1<a.group.length&&a.current.loop&&(b>=a.group.length?b=0:0>b&&(b=a.group.length-1)),a.group[b]!==t&&(a.cancel(),a._start(b)))},reposition:function(b,
    c){var e;a.isOpen&&(e=a._getPosition(c),b&&"scroll"===b.type?(delete e.position,a.wrap.stop(!0,!0).animate(e,200)):a.wrap.css(e))},update:function(b){a.isOpen&&(u||setTimeout(function(){var c=a.current,e=!b||b&&"orientationchange"===b.type;if(u&&(u=!1,c)){if(!b||"scroll"!==b.type||e)c.autoSize&&"iframe"!==c.type&&(a.inner.height("auto"),c.height=a.inner.height()),(c.autoResize||e)&&a._setDimension(),c.canGrow&&"iframe"!==c.type&&a.inner.height("auto");(c.autoCenter||e)&&a.reposition(b);a.trigger("onUpdate")}},
    200),u=!0)},toggle:function(){a.isOpen&&(a.current.fitToView=!a.current.fitToView,a.update())},hideLoading:function(){q.unbind("keypress.fb");d("#fancybox-loading").remove()},showLoading:function(){a.hideLoading();q.bind("keypress.fb",function(b){27===b.keyCode&&(b.preventDefault(),a.cancel())});d('<div id="fancybox-loading"><div></div></div>').click(a.cancel).appendTo("body")},getViewport:function(){return{x:m.scrollLeft(),y:m.scrollTop(),w:k&&s.innerWidth?s.innerWidth:m.width(),h:k&&s.innerHeight?
    s.innerHeight:m.height()}},unbindEvents:function(){a.wrap&&a.wrap.unbind(".fb");q.unbind(".fb");m.unbind(".fb")},bindEvents:function(){var b=a.current,c=b.keys;b&&(m.bind("resize.fb orientationchange.fb"+(b.autoCenter&&!b.fixed?" scroll.fb":""),a.update),c&&q.bind("keydown.fb",function(b){var f;f=b.target||b.srcElement;if(!b.ctrlKey&&!b.altKey&&!b.shiftKey&&!b.metaKey&&(!f||!f.type&&!d(f).is("[contenteditable]")))f=b.keyCode,-1<d.inArray(f,c.close)?(a.close(),b.preventDefault()):-1<d.inArray(f,c.next)?
    (a.next(),b.preventDefault()):-1<d.inArray(f,c.prev)&&(a.prev(),b.preventDefault())}),d.fn.mousewheel&&b.mouseWheel&&1<a.group.length&&a.wrap.bind("mousewheel.fb",function(b,c){var d=b.target||null;if(0!==c&&(!d||0===d.clientHeight||d.scrollHeight===d.clientHeight&&d.scrollWidth===d.clientWidth))b.preventDefault(),a[0<c?"prev":"next"]()}))},trigger:function(b,c){var e,f=c||a[-1<d.inArray(b,["onCancel","beforeLoad","afterLoad"])?"coming":"current"];if(f){d.isFunction(f[b])&&(e=f[b].apply(f,Array.prototype.slice.call(arguments,
    1)));if(!1===e)return!1;f.helpers&&d.each(f.helpers,function(c,e){if(e&&d.isPlainObject(a.helpers[c])&&d.isFunction(a.helpers[c][b]))a.helpers[c][b](e,f)});d.event.trigger(b+".fb")}},isImage:function(a){return o(a)&&a.match(/\.(jpe?g|gif|png|bmp)((\?|#).*)?$/i)},isSWF:function(a){return o(a)&&a.match(/\.(swf)((\?|#).*)?$/i)},_start:function(b){var c={},e=a.group[b]||null,f,g,i;if(e&&(e.nodeType||e instanceof d))f=!0,d.metadata&&(c=d(e).metadata());c=d.extend(!0,{},a.opts,{index:b,element:e},d.isPlainObject(e)?
    e:c);d.each(["href","title","content","type"],function(b,g){c[g]=a.opts[g]||f&&d(e).attr(g)||c[g]||null});"number"===typeof c.margin&&(c.margin=[c.margin,c.margin,c.margin,c.margin]);c.modal&&d.extend(!0,c,{closeBtn:!1,closeClick:!1,nextClick:!1,arrows:!1,mouseWheel:!1,keys:null,helpers:{overlay:{css:{cursor:"auto"},closeClick:!1}}});a.coming=c;if(!1===a.trigger("beforeLoad"))a.coming=null;else{g=c.type;b=c.href||e;g||(f&&(g=d(e).data("fancybox-type"),g||(g=(g=e.className.match(/fancybox\.(\w+)/))?
    g[1]:null)),!g&&o(b)&&(a.isImage(b)?g="image":a.isSWF(b)?g="swf":b.match(/^#/)&&(g="inline")),g||(g=f?"inline":"html"),c.type=g);if("inline"===g||"html"===g){if(c.content||(c.content="inline"===g?d(o(b)?b.replace(/.*(?=#[^\s]+$)/,""):b):e),!c.content||!c.content.length)g=null}else b||(g=null);"ajax"===g&&o(b)&&(i=b.split(/\s+/,2),b=i.shift(),c.selector=i.shift());c.href=b;c.group=a.group;c.isDom=f;switch(g){case "image":a._loadImage();break;case "ajax":a._loadAjax();break;case "inline":case "iframe":case "swf":case "html":a._afterLoad();
    break;default:a._error("type")}}},_error:function(b){a.hideLoading();d.extend(a.coming,{type:"html",autoSize:!0,minWidth:0,minHeight:0,padding:15,hasError:b,content:a.coming.tpl.error});a._afterLoad()},_loadImage:function(){var b=a.imgPreload=new Image;b.onload=function(){this.onload=this.onerror=null;a.coming.width=this.width;a.coming.height=this.height;a._afterLoad()};b.onerror=function(){this.onload=this.onerror=null;a._error("image")};b.src=a.coming.href;(b.complete===t||!b.complete)&&a.showLoading()},
    _loadAjax:function(){a.showLoading();a.ajaxLoad=d.ajax(d.extend({},a.coming.ajax,{url:a.coming.href,error:function(b,c){a.coming&&"abort"!==c?a._error("ajax",b):a.hideLoading()},success:function(b,c){"success"===c&&(a.coming.content=b,a._afterLoad())}}))},_preloadImages:function(){var b=a.group,c=a.current,e=b.length,f,g,i,h=Math.min(c.preload,e-1);if(c.preload&&!(2>b.length))for(i=1;i<=h;i+=1)if(f=b[(c.index+i)%e],g=f.href||d(f).attr("href")||f,"image"===f.type||a.isImage(g))(new Image).src=g},_afterLoad:function(){a.hideLoading();
    !a.coming||!1===a.trigger("afterLoad",a.current)?a.coming=!1:(a.isOpened?(d(".fancybox-item, .fancybox-nav").remove(),a.wrap.stop(!0).removeClass("fancybox-opened"),a.inner.css("overflow","hidden"),a.transitions[a.current.prevMethod]()):(d(".fancybox-wrap").stop().trigger("onReset").remove(),a.trigger("afterClose")),a.unbindEvents(),a.isOpen=!1,a.current=a.coming,a.wrap=d(a.current.tpl.wrap).addClass("fancybox-"+(k?"mobile":"desktop")+" fancybox-type-"+a.current.type+" fancybox-tmp "+a.current.wrapCSS).appendTo("body"),
    a.skin=d(".fancybox-skin",a.wrap).css("padding",n(a.current.padding)),a.outer=d(".fancybox-outer",a.wrap),a.inner=d(".fancybox-inner",a.wrap),a._setContent())},_setContent:function(){var b=a.current,c=b.content,e=b.type,f=b.minWidth,g=b.minHeight,i=b.maxWidth,h=b.maxHeight;switch(e){case "inline":case "ajax":case "html":b.selector?c=d("<div>").html(c).find(b.selector):c instanceof d&&(c.parent().hasClass("fancybox-inner")&&c.parents(".fancybox-wrap").unbind("onReset"),c=c.show().detach(),d(a.wrap).bind("onReset",
    function(){c.appendTo("body").hide()}));b.autoSize&&(f=d('<div class="fancybox-wrap '+a.current.wrapCSS+' fancybox-tmp"></div>').appendTo("body").css({minWidth:n(f,"w"),minHeight:n(g,"h"),maxWidth:n(i,"w"),maxHeight:n(h,"h")}).append(c),b.width=f.width(),b.height=f.height(),f.width(a.current.width),f.height()>b.height&&(f.width(b.width+1),b.width=f.width(),b.height=f.height()),c=f.contents().detach(),f.remove());break;case "image":c=b.tpl.image.replace("{href}",b.href);b.aspectRatio=!0;break;case "swf":c=
    b.tpl.swf.replace(/\{width\}/g,b.width).replace(/\{height\}/g,b.height).replace(/\{href\}/g,b.href);break;case "iframe":c=d(b.tpl.iframe.replace("{rnd}",(new Date).getTime())).attr("scrolling",b.scrolling).attr("src",b.href),b.scrolling=k?"scroll":"auto"}if("image"===e||"swf"===e)b.autoSize=!1,b.scrolling="visible";"iframe"===e&&b.autoSize?(a.showLoading(),a._setDimension(),a.inner.css("overflow",b.scrolling),c.bind({onCancel:function(){d(this).unbind();a._afterZoomOut()},load:function(){a.hideLoading();
    try{this.contentWindow.document.location&&(a.current.height=d(this).contents().find("body").height())}catch(b){a.current.autoSize=!1}a[a.isOpen?"_afterZoomIn":"_beforeShow"]()}}).appendTo(a.inner)):(a.inner.append(c),a._beforeShow())},_beforeShow:function(){a.coming=null;a.trigger("beforeShow");a._setDimension();a.wrap.hide().removeClass("fancybox-tmp");a.bindEvents();a._preloadImages();a.transitions[a.isOpened?a.current.nextMethod:a.current.openMethod]()},_setDimension:function(){var b=a.wrap,c=
    a.inner,e=a.current,f=a.getViewport(),g=e.margin,i=2*e.padding,h=e.width,j=e.height,r=e.maxWidth+i,k=e.maxHeight+i,l=e.minWidth+i,m=e.minHeight+i,p;f.w-=g[1]+g[3];f.h-=g[0]+g[2];o(h)&&0<h.indexOf("%")&&(h=(f.w-i)*parseFloat(h)/100);o(j)&&0<j.indexOf("%")&&(j=(f.h-i)*parseFloat(j)/100);g=h/j;h+=i;j+=i;e.fitToView&&(r=Math.min(f.w,r),k=Math.min(f.h,k));if(e.aspectRatio){if(h>r&&(h=r,j=(h-i)/g+i),j>k&&(j=k,h=(j-i)*g+i),h<l&&(h=l,j=(h-i)/g+i),j<m)j=m,h=(j-i)*g+i}else h=Math.max(l,Math.min(h,r)),j=Math.max(m,
    Math.min(j,k));h=Math.round(h);j=Math.round(j);d(b.add(c)).width("auto").height("auto");c.width(h-i).height(j-i);b.width(h);p=b.height();if(h>r||p>k)for(;(h>r||p>k)&&h>l&&p>m;)j-=10,e.aspectRatio?(h=Math.round((j-i)*g+i),h<l&&(h=l,j=(h-i)/g+i)):h-=10,c.width(h-i).height(j-i),b.width(h),p=b.height();e.dim={width:n(h),height:n(p)};e.canGrow=e.autoSize&&j>m&&j<k;e.canShrink=!1;e.canExpand=!1;if(h-i<e.width||j-i<e.height)e.canExpand=!0;else if((h>f.w||p>f.h)&&h>l&&j>m)e.canShrink=!0;a.innerSpace=p-i-
    c.height()},_getPosition:function(b){var c=a.current,e=a.getViewport(),f=c.margin,d=a.wrap.width()+f[1]+f[3],i=a.wrap.height()+f[0]+f[2],h={position:"absolute",top:f[0]+e.y,left:f[3]+e.x};c.autoCenter&&c.fixed&&!b&&i<=e.h&&d<=e.w&&(h={position:"fixed",top:f[0],left:f[3]});h.top=n(Math.max(h.top,h.top+(e.h-i)*c.topRatio));h.left=n(Math.max(h.left,h.left+0.5*(e.w-d)));return h},_afterZoomIn:function(){var b=a.current,c=b?b.scrolling:"no";if(b&&(a.isOpen=a.isOpened=!0,a.wrap.addClass("fancybox-opened"),
    a.inner.css("overflow","yes"===c?"scroll":"no"===c?"hidden":c),a.trigger("afterShow"),a.update(),(b.closeClick||b.nextClick)&&a.inner.css("cursor","pointer").bind("click.fb",function(c){if(!d(c.target).is("a")&&!d(c.target).parent().is("a"))a[b.closeClick?"close":"next"]()}),b.closeBtn&&d(b.tpl.closeBtn).appendTo(a.skin).bind("click.fb",a.close),b.arrows&&1<a.group.length&&((b.loop||0<b.index)&&d(b.tpl.prev).appendTo(a.outer).bind("click.fb",a.prev),(b.loop||b.index<a.group.length-1)&&d(b.tpl.next).appendTo(a.outer).bind("click.fb",
    a.next)),a.opts.autoPlay&&!a.player.isActive))a.opts.autoPlay=!1,a.play()},_afterZoomOut:function(){var b=a.current;a.wrap.trigger("onReset").remove();d.extend(a,{group:{},opts:{},current:null,isActive:!1,isOpened:!1,isOpen:!1,wrap:null,skin:null,outer:null,inner:null});a.trigger("afterClose",b)}});a.transitions={getOrigPosition:function(){var b=a.current,c=b.element,e=b.padding,f=d(b.orig),g={},i=50,h=50;!f.length&&b.isDom&&d(c).is(":visible")&&(f=d(c).find("img:first"),f.length||(f=d(c)));f.length?
    (g=f.offset(),f.is("img")&&(i=f.outerWidth(),h=f.outerHeight())):(b=a.getViewport(),g.top=b.y+0.5*(b.h-h),g.left=b.x+0.5*(b.w-i));return g={top:n(g.top-e),left:n(g.left-e),width:n(i+2*e),height:n(h+2*e)}},step:function(b,c){var e=c.prop,d,g;if("width"===e||"height"===e)d=Math.ceil(b-2*a.current.padding),"height"===e&&(g=(b-c.start)/(c.end-c.start),c.start>c.end&&(g=1-g),d-=a.innerSpace*g),a.inner[e](d)},zoomIn:function(){var b=a.wrap,c=a.current,e=c.openEffect,f="elastic"===e,g=d.extend({},c.dim,
    a._getPosition(f)),i=d.extend({opacity:1},g);delete i.position;f?(g=this.getOrigPosition(),c.openOpacity&&(g.opacity=0),a.outer.add(a.inner).width("auto").height("auto")):"fade"===e&&(g.opacity=0);b.css(g).show().animate(i,{duration:"none"===e?0:c.openSpeed,easing:c.openEasing,step:f?this.step:null,complete:a._afterZoomIn})},zoomOut:function(){var b=a.wrap,c=a.current,d=c.openEffect,f="elastic"===d,g={opacity:0};f&&("fixed"===b.css("position")&&b.css(a._getPosition(!0)),g=this.getOrigPosition(),c.closeOpacity&&
    (g.opacity=0));b.animate(g,{duration:"none"===d?0:c.closeSpeed,easing:c.closeEasing,step:f?this.step:null,complete:a._afterZoomOut})},changeIn:function(){var b=a.wrap,c=a.current,d=c.nextEffect,f="elastic"===d,g=a._getPosition(f),i={opacity:1};g.opacity=0;f&&(g.top=n(parseInt(g.top,10)-200),i.top="+=200px");b.css(g).show().animate(i,{duration:"none"===d?0:c.nextSpeed,easing:c.nextEasing,complete:a._afterZoomIn})},changeOut:function(){var b=a.wrap,c=a.current,e=c.prevEffect,f={opacity:0};b.removeClass("fancybox-opened");
    "elastic"===e&&(f.top="+=200px");b.animate(f,{duration:"none"===e?0:c.prevSpeed,easing:c.prevEasing,complete:function(){d(this).trigger("onReset").remove()}})}};a.helpers.overlay={overlay:null,update:function(){var a,c;this.overlay.width("100%").height("100%");d.browser.msie||k?(a=Math.max(l.documentElement.scrollWidth,l.body.scrollWidth),c=Math.max(l.documentElement.offsetWidth,l.body.offsetWidth),a=a<c?m.width():a):a=q.width();this.overlay.width(a).height(q.height())},beforeShow:function(b){this.overlay||
    (b=d.extend(!0,{},a.defaults.helpers.overlay,b),this.overlay=d('<div id="fancybox-overlay"></div>').css(b.css).appendTo("body"),b.closeClick&&this.overlay.bind("click.fb",a.close),a.current.fixed&&!k?this.overlay.addClass("overlay-fixed"):(this.update(),this.onUpdate=function(){this.update()}),this.overlay.fadeTo(b.speedIn,b.opacity))},afterClose:function(a){this.overlay&&this.overlay.fadeOut(a.speedOut||0,function(){d(this).remove()});this.overlay=null}};a.helpers.title={beforeShow:function(b){var c;
    if(c=a.current.title)c=d('<div class="fancybox-title fancybox-title-'+b.type+'-wrap">'+c+"</div>").appendTo("body"),"float"===b.type&&(c.width(c.width()),c.wrapInner('<span class="child"></span>'),a.current.margin[2]+=Math.abs(parseInt(c.css("margin-bottom"),10))),c.appendTo("over"===b.type?a.inner:"outside"===b.type?a.wrap:a.skin)}};d.fn.fancybox=function(b){var c=d(this),e=this.selector||"",f,g=function(g){var h=this,j=f,k;!g.ctrlKey&&!g.altKey&&!g.shiftKey&&!g.metaKey&&!d(h).is(".fancybox-wrap")&&
    (g.preventDefault(),g=b.groupAttr||"data-fancybox-group",k=d(h).attr(g),k||(g="rel",k=h[g]),k&&""!==k&&"nofollow"!==k&&(h=e.length?d(e):c,h=h.filter("["+g+'="'+k+'"]'),j=h.index(this)),b.index=j,a.open(h,b))},b=b||{};f=b.index||0;e?q.undelegate(e,"click.fb-start").delegate(e,"click.fb-start",g):c.unbind("click.fb-start").bind("click.fb-start",g);return this};d(l).ready(function(){a.defaults.fixed=d.support.fixedPosition||!(d.browser.msie&&6>=d.browser.version)&&!k})})(window,document,jQuery);
    //]]>
    </script>

Perhatikan kode yang berwarna merah, itu merupakan kode jQuery, jika di template anda sudah terdapat kode jQuery tersebut maka tidak usah di pasang lagi atau anda juga bisa mengganti kode yang lama dengan kode yang versi terbarunya.
(tidak boleh terdapat kode jQuery.min lebih dari satu walaupun versinya berbeda-beda) ada.

3. Masuk ke Template » Edit HTML
Letakkan kode berikut ini dibawah kode ]]></b:skin>

    <style type='text/css'>

    .fancybox-tmp iframe,.fancybox-tmp object{vertical-align:top;padding:0;margin:0}

    .fancybox-wrap{position:absolute;top:0;left:0;z-index:8020}

    .fancybox-skin{position:relative;padding:0;margin:0;background:#000;color:#444;text-shadow:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}

    .fancybox-opened{z-index:8030}

    .fancybox-opened .fancybox-skin{-webkit-box-shadow:0 10px 25px rgba(0,0,0,0.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,0.5);box-shadow:0 10px 25px rgba(0,0,0,0.5)}

    .fancybox-outer,.fancybox-inner{padding:0;margin:0;position:relative;outline:none}

    .fancybox-inner{overflow:hidden}

    .fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch}

    .fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:10px}

    .fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%;border:0;padding:0;margin:0;vertical-align:top}

    .fancybox-image{max-width:100%;max-height:100%}

    #fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-22px;margin-left:-22px;background-position:0 -108px;opacity:0.8;cursor:pointer;z-index:8020}

    #fancybox-loading div{width:44px;height:44px}

    .fancybox-close{position:absolute;top:4px;right:-30px;width:30px;height:30px;cursor:pointer;z-index:8040;background-color:#131313;border-radius:0 5px 5px 0;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0}

    .fancybox-nav{position:absolute;top:0;width:40%;height:100%;cursor:pointer;background:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0);z-index:8040}

    .fancybox-prev{left:0}

    .fancybox-next{right:0}

    .fancybox-nav span{position:absolute;top:50%;width:36px;height:34px;margin-top:-18px;cursor:pointer;z-index:8040;visibility:hidden}

    .fancybox-prev span{left:0;background-color:black;border-radius:0 20px 20px 0}

    .fancybox-next span{right:0;background-color:black;border-radius:20px 0 0 20px}

    .fancybox-next span::after{content:"";position:absolute;right:-2px;width:0;height:0;border-width:7px 12px;border-style:solid;border-color:transparent transparent transparent #D6D6D6;top:9px}

    .fancybox-prev span::after{content:"";left:-2px;position:absolute;width:0;height:0;border-width:7px 12px;border-style:solid;border-color:transparent #D6D6D6 transparent transparent;top:9px}

    .fancybox-nav:hover span{visibility:visible}

    .fancybox-tmp{position:absolute;top:-9999px;left:-9999px;padding:0;overflow:visible;visibility:hidden}

    #fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index:8010;background:#000}

    #fancybox-overlay.overlay-fixed{position:fixed;bottom:0;right:0}

    .fancybox-title{visibility:hidden;font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:8050}

    .fancybox-opened .fancybox-title{visibility:visible}

    .fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index:8030;text-align:center}

    .fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;padding:2px 20px;background:transparent;background:rgba(0,0,0,0.8);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;text-shadow:0 1px 2px #222;color:white;font-weight:bold;line-height:24px;white-space:nowrap}

    .fancybox-close::after{content:"x";font-size:21px;color:white;position:absolute;font-family:Arial;font-weight:bold;top:2px;right:10px}

    .fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}

    .fancybox-title-inside-wrap{margin-top:10px}

    .fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;padding:10px;background:#000;background:rgba(0,0,0,.8)}

    @media screen and (max-width:981px) {

    .incontentx {width: 100%;}

    .post {width: 100%;margin-left: auto;

    margin-right: auto;}

    }

    </style>

4. Letakan kode berikut ini diatas kode </body>

    <b:if cond='data:blog.pageType == "item"'>

    <script type='text/javascript'>

    //<![CDATA[

    $(document).ready(function() {

    $('.post-body a[href$=".jpg"], .post-body a[href$=".png"], .post-body a[href$=".gif"], .post-body a[href$=".bmp"]').attr('class','fancy');

     $('.separator a').attr({'class':'fancy','data-fancybox-group':'gallery'});

    $('.fancy')

    .fancybox({padding: 5, openEffect : 'elastic', openSpeed : 400, closeEffect : 'elastic', closeSpeed : 400, closeClick : true, helpers : {overlay : null}});

    });

    //]]>

    </script>

    </b:if>

    <b:if cond='data:blog.pageType == "static_page"'>

    <script type='text/javascript'>

    //<![CDATA[

    $(document).ready(function() {

    $('.post-body a[href$=".jpg"], .post-body a[href$=".png"], .post-body a[href$=".gif"], .post-body a[href$=".bmp"]').attr('class','fancy');

     $('.separator a').attr({'class':'fancy','data-fancybox-group':'gallery'});

    $('.fancy')

    .fancybox({padding: 5, openEffect : 'elastic', openSpeed : 400, closeEffect : 'elastic', closeSpeed : 400, closeClick : true, helpers : {overlay : null}});

    });

    //]]>

    </script>

    </b:if>

5. Terakhir Simpan template,kemudian lihat hasilnya.

* Terima Kasih Atas Kunjungan Anda *

Cara Mengganti LightBox Dengan PiroBox Keren

cara Mengganti LightBox dengan PiroBox,ini sedikit berbeda dan lebih keren tentunya, karena PiroBox ini sudah dimodifikasi dan dilengkapi dengan fitur share facebook dan twitter seperti gambar diatas

* DEMO *

Langsung saja berikut cara menerapkan PiroBox :

1. Kamu harus menonaktifkan LightBox bawaan blogger terlebih dahulu.
caranya: Masuk pada Stelan » Pos dan Komentar » Tampilkan gambar dengan Lightbox ? pilih Tidak.

2. Pastikan Template Kamu sudah terdapat kode jQuery.kalau belum ada letakkan kode dibawah ini diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'/>

Itu merupakan kode jQuery.min dan jQuery-ui.min, jika di template kamu sudah terdapat kode jQuery tersebut maka tidak usah di pasang lagi atau kamu juga bisa mengganti kode yang lama dengan kode yang versi terbarunya.
(tidak boleh terdapat kode jQuery.min dan jQuery-ui-min lebih dari satu walaupun versinya berbeda-beda)

3. Masuk ke Template > Edit HTML > Letakkan kode berikut ini dibawah kode ]]></b:skin>

    <style type='text/css'>

    .piro_overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:150000;background:#000;display:none;cursor:pointer}

    .piro_html{position:absolute;top:0;left:0;padding:0;width:620px;height:620px;margin:0;display:none;padding:0;z-index:150001}

    .piro_thumbs{position:absolute;bottom:0;left:0;z-index:120000000;width:100%}

    .piro_thumbnails a{float:left;width:auto;height:auto;background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcemSBHNjMI5Q2NjCdWa4sI_dB4OXGVntk7X-_OvU7T3smk1rTlGh58XKr81uKoJhm20uC12-u6REjEU2SEZ5RvqjbUc-z7sYf-XMdAIGVjRW55Hb9v_nq0xfJ4Ud8Ep_fZMoid6L6I8/s1600/caption.png);padding:5px;margin:0 0 0 4px}

    .piro_thumbnails a img{float:left;width:80px;height:auto}

    .piro_html table,.piro_html tbody,.piro_html tr,.piro_html th,.piro_html td{margin:0;padding:0;border:none;vertical-align:top!important}

    .piro_html img{margin:0;padding:0;border:none}

    .piro_html .h_t_l{width:25px;height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJbr0OiT8HjOwHedbpaTWI24TvDLEPtcYRPptpxmaDNr6sItvF2S5RSbNsX3SuB8SRunUc0yf5p1ulkBWUKCsFuBulF5rc9sW88hDir1vYf5v6FrNEFKWoXUTSM2KAQtkrR58baZQ0p8/s1600/new_skin.png) top left no-repeat}

    .piro_html .h_t_r{width:25px;height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJbr0OiT8HjOwHedbpaTWI24TvDLEPtcYRPptpxmaDNr6sItvF2S5RSbNsX3SuB8SRunUc0yf5p1ulkBWUKCsFuBulF5rc9sW88hDir1vYf5v6FrNEFKWoXUTSM2KAQtkrR58baZQ0p8/s1600/new_skin.png) top right no-repeat}

    .piro_html .h_t_c{height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6RbaEGx0DpbZV5293fBfvTYV7amQfO98SqydXmXb8RNofVKWR_7x0FTwpBOywKf1Mol88zu3WeWyIkzNQsl1hDWZ9G4Rc7livpBYsO7Lh91__GVzs5I0HlWzrck52SoFDhTfjLhAoBLY/s1600/new_skin_top.png) top repeat-x}

    .piro_html .h_c_l{width:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTuD5mDIEExzRvgifqEWyETTkTSnwtOSkc9gurejViOoL_O9g-QRPJ5F442mqBLGh8UmxDtVi24DMh6VPWoVvrHvYazkd__W8HN5g0Slcpr5IFnfMBew79AtBtv3K6agRv66PI4hYt-LU/s1600/new_skin_left.png) left repeat-y}

    .piro_html .h_c_c{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi88Cep8cQTFNQ-1oiNsIplt7BDjLt2Zw1zBm4rjfcQdQqEp2Kdh3Bu8QuImHOgt9wYrJhMsGFbIh4E3_u-pHUfGIib5l7jIzozz1gNjhBGveg2kmra9t4EfLqO7zJ6BWnoDKyVnBPs6Ws/s1600/bg_mdl.png);margin:0;padding:0;/*overflow:hidden;*/

    position:relative}

    .piro_html .h_c_c .div_reg{/*background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi88Cep8cQTFNQ-1oiNsIplt7BDjLt2Zw1zBm4rjfcQdQqEp2Kdh3Bu8QuImHOgt9wYrJhMsGFbIh4E3_u-pHUfGIib5l7jIzozz1gNjhBGveg2kmra9t4EfLqO7zJ6BWnoDKyVnBPs6Ws/s1600/bg_mdl.png);*/

    width:560px;/*overflow:hidden;*/

    height:560px;margin:0;padding:0;position:relative;z-index:1500190}

    .piro_html .h_c_c .resize{/*overflow:hidden;*/

    margin:0;padding:0;position:relative;z-index:1500190}

    .piro_html .h_c_c .div_reg img{}

    .piro_html .h_c_r{width:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTuD5mDIEExzRvgifqEWyETTkTSnwtOSkc9gurejViOoL_O9g-QRPJ5F442mqBLGh8UmxDtVi24DMh6VPWoVvrHvYazkd__W8HN5g0Slcpr5IFnfMBew79AtBtv3K6agRv66PI4hYt-LU/s1600/new_skin_left.png) right repeat-y}

    .piro_html .h_mb_c{height:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi88Cep8cQTFNQ-1oiNsIplt7BDjLt2Zw1zBm4rjfcQdQqEp2Kdh3Bu8QuImHOgt9wYrJhMsGFbIh4E3_u-pHUfGIib5l7jIzozz1gNjhBGveg2kmra9t4EfLqO7zJ6BWnoDKyVnBPs6Ws/s1600/bg_mdl.png);position:relative}

    .piro_html .h_mb_l{width:25px;height:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTuD5mDIEExzRvgifqEWyETTkTSnwtOSkc9gurejViOoL_O9g-QRPJ5F442mqBLGh8UmxDtVi24DMh6VPWoVvrHvYazkd__W8HN5g0Slcpr5IFnfMBew79AtBtv3K6agRv66PI4hYt-LU/s1600/new_skin_left.png) left repeat-y}

    .piro_html .h_mb_r{width:25px;height:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTuD5mDIEExzRvgifqEWyETTkTSnwtOSkc9gurejViOoL_O9g-QRPJ5F442mqBLGh8UmxDtVi24DMh6VPWoVvrHvYazkd__W8HN5g0Slcpr5IFnfMBew79AtBtv3K6agRv66PI4hYt-LU/s1600/new_skin_left.png) right repeat-y;position:relative}

    .piro_html .h_b_c{height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6RbaEGx0DpbZV5293fBfvTYV7amQfO98SqydXmXb8RNofVKWR_7x0FTwpBOywKf1Mol88zu3WeWyIkzNQsl1hDWZ9G4Rc7livpBYsO7Lh91__GVzs5I0HlWzrck52SoFDhTfjLhAoBLY/s1600/new_skin_top.png) bottom repeat-x}

    .piro_html .h_b_l{width:25px;height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJbr0OiT8HjOwHedbpaTWI24TvDLEPtcYRPptpxmaDNr6sItvF2S5RSbNsX3SuB8SRunUc0yf5p1ulkBWUKCsFuBulF5rc9sW88hDir1vYf5v6FrNEFKWoXUTSM2KAQtkrR58baZQ0p8/s1600/new_skin.png) bottom left no-repeat}

    .piro_html .h_b_r{width:25px;height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJbr0OiT8HjOwHedbpaTWI24TvDLEPtcYRPptpxmaDNr6sItvF2S5RSbNsX3SuB8SRunUc0yf5p1ulkBWUKCsFuBulF5rc9sW88hDir1vYf5v6FrNEFKWoXUTSM2KAQtkrR58baZQ0p8/s1600/new_skin.png) bottom right no-repeat}

    .piro_loader{position:absolute;top:47%;left:50%;margin:-20px 0 0 -20px;width:40px;height:40px;display:block;z-index:1500197;cursor:pointer;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxGuZCzH4NfGjglJJBlVbOwo3vQzGqdnwi8i1hyphenhyphen_MyfPRLRiPCzhf6fYn10KhVkbQCwDfl6N6cvA_1369N0W07LBh0YNJRqiLZf8O4ot5Ghm3LUv9U1whyphenhyphenQpfbkETZgnMEsuBqZUPnqwU/s1600/loader_nav.png) no-repeat}

    .piro_loader span{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px;width:40px;height:40px;padding:0;display:block;z-index:1500198;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-WhL4XEqf2WCG9ICtsMJx3pL9COM8CtHEPJwUQfIYamDASZExcFgvyHALG2pUGHr1zq76j9qKqAi004qNGvT1t5xTg-L4ohdXOCLD5FuVUGwW2ouH8O4NsYNFtZOdFuQsRYYQUW9al0A/s1600/loader.gif) center center no-repeat}

    .nav_container{position:relative;float:left;margin:5px 0 0 0;height:0;width:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcemSBHNjMI5Q2NjCdWa4sI_dB4OXGVntk7X-_OvU7T3smk1rTlGh58XKr81uKoJhm20uC12-u6REjEU2SEZ5RvqjbUc-z7sYf-XMdAIGVjRW55Hb9v_nq0xfJ4Ud8Ep_fZMoid6L6I8/s1600/caption.png) repeat;z-index:1500202;/*border-left:1px solid #101010;border-right:1px solid #101010;*/}

    .piro_caption{position:absolute;bottom:4px;left:3px;margin:0;display:block;padding:2px 8px;cursor:text;z-index:1500197;width:auto;height:28px;overflow:hidden;/*background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcemSBHNjMI5Q2NjCdWa4sI_dB4OXGVntk7X-_OvU7T3smk1rTlGh58XKr81uKoJhm20uC12-u6REjEU2SEZ5RvqjbUc-z7sYf-XMdAIGVjRW55Hb9v_nq0xfJ4Ud8Ep_fZMoid6L6I8/s1600/caption.png);border:1px solid #111;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-moz-box-shadow:0 0 2px #000;-webkit-box-shadow:0 0 2px #000;box-shadow:0 0 2px #000;*/}

    .piro_caption_up_down{width:25px;height:29px;background:url();position:absolute;top:-29px;right:10px}

    .piro_caption p{font-family:verdana;line-height:15px;display:block;margin:0;padding:0;min-height:28px;text-align:left;font-weight:400;font-size:12px;z-index:150019;color:white}

    .piro_close,a.piro_next,a.piro_prev,.piro_prev_fake,.piro_next_fake,.piro_twitter,.piro_facebook{width:26px;height:26px}

    .piro_close,a.piro_next,a.piro_prev,.piro_prev_fake,.piro_next_fake,.piro_zoomIn,.piro_zoomOut,.piro_twitter,.piro_facebook{position:absolute;right:0;bottom:7px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSDglxF3Bb-g45A5fuPdlIwe4eN95nWad6hKLc-a-ifl4ST808HRnKGWmd7cE6ClqgOtVEDblDxFFOB_a9svpf8EZnb6OAnmo3akZkR8oV5hS44joY7dPS3r8koCEw2eeeyvTMfmHyoY/s1600/buttons.png) no-repeat}

    .nav_big{position:absolute;width:100%;height:100%;top:0;left:0;background:url();z-index:1500201}

    .nav_big a.piro_next{position:absolute;height:0;width:50%;background:transparent;top:0;right:0;text-indent:-999em;outline:none;display:none;margin:0;border:none;cursor:pointer;z-index:1500220}

    .nav_big a.piro_prev{position:absolute;height:0;width:50%;background:transparent;top:0;left:0;text-indent:-999em;outline:none;display:none;margin:0;border:none;cursor:pointer;z-index:1500221}

    .nav_big a:hover.piro_prev,.nav_big a:hover.piro_next{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkGrtV_nv2_DCp-RDV2i6KYbdlM_MhFbrrrMI13wuNDuHJVPkW9oBzL5TuT0CalsAHhnkCSCnmCyZzfBD80a45Esj2LPsYvpj2OW6rY_yJYW8xkuHMX7oJUJZfG3lrCQt-disdazdG3q0/s1600/caption_w.png)}

    .nav_big a.piro_close{position:absolute;height:30px!important;width:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZjcdvJxHO-ee9kCSHcfIq9gCoaKo6FKYHRIAdNq2mKpGjgO_ND2OSDXCGPon-myquzOjmcwYIvwYjchDjO3L13QMqK8wI1zqj9-bOmPcAKs1xlhaX6PtLKHYlxxAC5whJ1-xrCFgQJMk/s1600/close_p.png) no-repeat;background-position:0 0;top:-22px;right:-22px;text-indent:-999em;outline:none;display:none;margin:0;border:none;cursor:pointer;z-index:1500222}

    .nav_big a:hover.piro_close{opacity:.8}

    .piro_next_fake{outline:none;text-indent:-999em;display:none;margin:0;background-position:-52px -26px;border:none;cursor:auto;z-index:150020}

    .nav_container a.piro_next{right:10px;text-indent:-999em;outline:none;display:block;margin:0;background-position:-52px 0;border:none;cursor:pointer;z-index:150023}

    .nav_container a:hover.piro_next{background-position:-52px -26px}

    .piro_prev_fake{outline:none;text-indent:-999em;display:none;margin:0;background-position:0 -26px;border:none;cursor:auto;z-index:150020}

    .nav_container a.piro_prev{text-indent:-999em;outline:none;display:block;margin:0;background-position:0 0;border:none;cursor:pointer;z-index:150024}

    .nav_container a:hover.piro_prev{background-position:0 -26px}

    .nav_container .piro_close{background-position:-26px 0;cursor:pointer;margin:0;z-index:150022;display:none}

    .nav_container .piro_close:hover{background-position:-26px -26px}

    .piro_zoomIn{height:26px;width:36px;text-indent:-999em;background-position:-130px 0;z-index:1500198;visibility:hidden}

    .piro_zoomIn:hover{background-position:-130px -26px}

    .piro_zoomOut{height:26px;width:36px;text-indent:-999em;background-position:-130px -26px;z-index:1500199;visibility:hidden}

    .piro_zoomOut:hover{background-position:-130px 0}

    .piro_facebook{text-indent:-999em;background-position:-78px 0;z-index:1500198}

    .piro_facebook:hover{background-position:-78px -26px}

    .piro_twitter{text-indent:-999em;background-position:-104px 0;z-index:1500199}

    .piro_twitter:hover{background-position:-104px -26px}

    .piro_html .h_c_c .div_reg .clone{background:white;margin:0;padding:10px;float:left;position:relative;}

    </style>

4. Letakan kode berikut ini diatas kode </body>

    <script type='text/javascript'>

    //<![CDATA[

    /**

    * Name: PiroBox Extended v.1.3

    * Date: August 2012

    * Autor: Diego Valobra (http://www.pirolab.it)

    * Version: 1.3

    * Licence: CC-BY-SA http://creativecommons.org/licenses/by-sa/3/it/

    **/



    (function($){var flag_scroll=null;$.pirobox_ext=function(opt){opt=jQuery.extend({piro_speed:700,zoom_mode:true,move_mode:"mousemove",zoom_animation:true,bg_alpha:0.5,piro_scroll:true,share:true,padding:null,attribute:"data-pirobox",resize:false},opt);flag_scroll=opt.piro_scroll;if(opt.piro_speed<400){opt.piro_speed=400}var piro_capt_cont='<div class="piro_caption"></div>';$(".piro_html,.piro_overlay").remove();var struct=('<div class="piro_overlay"></div><table class="piro_html" cellpadding="0" cellspacing="0"><tr><td class="h_t_l"></td><td class="h_t_c"></td><td class="h_t_r"></td></tr><tr><td class="h_c_l"></td><td class="h_c_c"><div class="resize"><div class="piro_loader" title="close"><span></span></div><div class="nav_big"><a href="#close" class="piro_close" title="close"></a><a href="#next" class="piro_next" title="next"></a><a href="#prev" class="piro_prev" title="previous"></a></div><div class="div_reg"></div></div></td><td class="h_c_r"></td></tr><tr><td class="h_mb_l"></td><td class="h_mb_c"><div class="nav_container"><div class="nav_container_hide"><a href="#next" class="piro_next" title="next"></a><div class="piro_next_fake"></div><div class="piro_close" title="close"></div><a href="#prev" class="piro_prev" title="previous"></a><div class="piro_prev_fake"></div><a href="" target="_blank" class="piro_twitter" title="share on twitter"></a><a href="" target="_blank" class="piro_facebook" title="share on facebook"></a><a href="#ZoomIn" class="piro_zoomIn" title="ZoomIn"></a><a href="#ZoomOut" class="piro_zoomOut" title="ZoomOut"></a></div></div></td><td class="h_mb_r"></td></tr><tr><td class="h_b_l"></td><td class="h_b_c"></td><td class="h_b_r"></td></tr></table>');$("body").append(struct);$("body").append('<div class="piro_thumbs"></div>');var wrapper=$(".piro_html"),zoomIn=$(".piro_zoomIn"),zoomOut=$(".piro_zoomOut"),twitter=$(".piro_twitter"),facebook=$(".piro_facebook"),piro_next=$(".piro_next"),piro_prev=$(".piro_prev"),piro_next_big=$(".nav_big .piro_next"),piro_prev_big=$(".nav_big .piro_prev"),piro_next_fake=$(".piro_next_fake"),piro_prev_fake=$(".piro_prev_fake"),piro_close=$(".piro_close"),piro_bg=$(".piro_overlay"),piro_nav=$(".nav_container"),piro_nav_in=$(".nav_container_hide"),div_reg=$(".div_reg"),piro_loader=$(".piro_loader"),resize=$(".resize"),y=$(window).height(),x=$(window).width(),rz_img=0.9,position=-50;var my_gall_obj=$('*[class*="pirobox"]');var map=new Object();for(var i=0;i<my_gall_obj.length;i++){var it=$(my_gall_obj[i]);map["."+it.attr("class").match(/^pirobox\w*/)]=0}var gall_settings=new Array();for(var key in map){gall_settings.push(key)}for(var i=0;i<gall_settings.length;i++){if(gall_settings[i]==".pirobox"||gall_settings[i]==1){$(gall_settings[i]).addClass("single_fix")}else{if(gall_settings.length>1){$(gall_settings[i]+":first").attr("my_id","first");$(gall_settings[i]+":last").attr("my_id","last");$('*[class*="pirobox_gall"]').each(function(rev){this.rev=rev+0})}}}$.fn.piroFadeIn=function(speed,callback){$(this).fadeIn(speed,function(){if(jQuery.browser.msie){$(this).get(0).style.removeAttribute("filter")}if(callback!=undefined){callback()}})};$.fn.piroFadeOut=function(speed,callback){$(this).fadeOut(speed,function(){if(jQuery.browser.msie){$(this).get(0).style.removeAttribute("filter")}if(callback!=undefined){callback()}})};if(opt.zoom_animation==true){$("head").append('<script type="text/javascript" src="js/easing.js"><\/script>')}var piro_gallery=$(my_gall_obj);opt.padding=$(".piro_html .h_t_l").width();$(".piro_html .h_mb_c,.nav_container").animate({height:0},0);wrapper.css({left:(x/2)-(wrapper.width()/2),top:parseInt($(document).scrollTop())+(y-wrapper.height())/2});$(window).scroll(function(){wrapper.css({left:(x/2)-(wrapper.width()/2),top:parseInt($(document).scrollTop())+(y-wrapper.height())/2})});$(wrapper).add(piro_bg).hide();$(".nav_big").hide();piro_bg.css({opacity:opt.bg_alpha});$(piro_prev).add(piro_next).bind("click",function(c){$(".piro_html .h_mb_c, .nav_container").animate({height:0},0);$(".nav_big").hide();$(".div_reg").children().fadeOut(200);zoomOut.css("visibility","hidden");$(".piro_caption").remove();c.preventDefault();var obj_count=parseInt($('*[class*="pirobox_gall"]').filter(".item").attr("rev"));var start=$(this).is(".piro_prev")?$('*[class*="pirobox_gall"]').eq(obj_count-1):$('*[class*="pirobox_gall"]').eq(obj_count+1);start.click()});$("html").bind("keyup",function(c){if(c.keyCode==27){c.preventDefault();if($(piro_close).is(":visible")){close_all()}}});$("html").bind("keyup",function(e){if($(".item").attr("my_id")=="first"){}else{if($(".item").attr(opt.attribute)=="single"){piro_nav.show()}else{if(e.keyCode==37){e.preventDefault();if($(piro_close).is(":visible")){piro_prev_big.click()}}}}});$("html").bind("keyup",function(z){if($(".item").attr("my_id")=="last"){}else{if($(".item").attr(opt.attribute)=="single"){piro_nav.show()}else{if(z.keyCode==39){z.preventDefault();if($(piro_close).is(":visible")){piro_next_big.click()}}}}});function get_position(){var new_y=$(window).height(),new_x=$(window).width(),new_h=wrapper.outerHeight(true),new_w=wrapper.outerWidth(true);if(flag_scroll==false){wrapper.css({left:((new_x/2)-(new_w/2))+"px"})}else{if(flag_scroll==true){wrapper.css({left:((new_x/2)-((new_w)/2)),top:parseInt($(document).scrollTop())+(new_y-new_h)/2})}}}$(piro_gallery).each(function(){function nav_position(){piro_nav_in.each(function(){var nav_children=$(this).children(":visible").not(".piro_caption");var nav_children_not=$(this).children().not(".piro_caption").not(":visible");var increase=0;$(nav_children).each(function(){increase+=$(this).width()+6;$(this).css({visibility:"visible"});$(this).css({right:increase,"margin-right":"-20px"});zoomIn.css("margin-right","-30px");var zoom_pos=zoomIn.position();zoomOut.css({right:increase,visibility:"hidden","margin-right":"-30px"});$(nav_children_not).css("visibility","hidden")})})}var descr=$(this).attr("title"),params=$(this).attr(opt.attribute).split("-"),p_link=$(this).attr("href");$(this).unbind();$(this).bind("click",function(e){piro_bg.css({opacity:opt.bg_alpha});e.preventDefault();piro_next.add(piro_prev).hide();piro_next_fake.add(piro_prev_fake).hide();$(piro_gallery).filter(".item").removeClass("item");$(this).addClass("item");open_all();if(opt.share==true){twitter.add(facebook).show()}else{twitter.add(facebook).remove()}if($(this).attr("my_id")=="first"){piro_prev.add(piro_next_fake).hide();piro_next.add(piro_prev_fake).show()}else{piro_next.add(piro_prev).show();piro_next_fake.add(piro_prev_fake).hide()}if($(this).attr("my_id")=="last"){piro_prev.add(piro_next_fake).show();piro_next.add(piro_prev_fake).hide()}if($(this).is(".pirobox")||$(this).is(".single_fix")){piro_next.add(piro_prev).hide();$(".nav_big,.nav_big .piro_next,.nav_big .piro_prev").css("height",0).hide();piro_next_fake.add(piro_prev_fake).hide()}if($(this).attr("my_id")=="last"&&$(this).attr("my_id")=="first"){piro_next.add(piro_prev).hide();piro_next_fake.add(piro_prev_fake).hide();$(".nav_big .piro_next,.nav_big .piro_prev").css("height",0).hide()}});function open_all(){$.fn.hasAttr=function(name){return this.attr(name)!==undefined};wrapper.add(piro_bg).add(div_reg).add(piro_loader).show();function animate_html(){piro_nav_in.add(".piro_caption").hide();$(".nav_big").hide();$(".piro_zoomOut,.piro_zoomIn").css("visibility","hidden").hide();$(".nav_big").css("height",0);if(descr==""||descr===undefined||descr===false){$(".piro_caption").hide()}else{$(piro_capt_cont).appendTo(piro_nav_in)}if(params[1]=="full"){params[2]=$(window).height()-opt.padding*4;params[1]=$(window).width()-opt.padding*3}if(params[1]<=1&&params[2]<=1){params[2]=Math.ceil($(window).height()*(params[2]));params[1]=Math.ceil($(window).width()*(params[1]))}var y=$(window).height();var x=$(window).width();if(parseFloat(params[2])+70>y){var top=0;flag_scroll=false}else{if(params[1]=="full"){flag_scroll=opt.piro_scroll;var top=(parseInt($(document).scrollTop())+(y-params[2])/2+position)}else{var top=(parseInt($(document).scrollTop())+(y-params[2])/2+position);flag_scroll=opt.piro_scroll}}piro_close.hide();resize.add(div_reg).animate({height:+(params[2]),width:+(params[1])},opt.piro_speed);wrapper.animate({height:+(params[2])+(opt.padding*2),top:top,width:+(params[1])+(opt.padding*2),left:((x/2)-((params[1])/2+opt.padding))},opt.piro_speed,function(){$(".nav_big").hide();$(".piro_caption").html("<p>"+descr+"</p>").hide();$(".piro_html .h_mb_c,.nav_container").animate({height:41},300);piro_nav_in.show();piro_loader.hide();piro_close.show();div_reg.fadeIn(400);$(window).resize(function(){get_position()});$(window).scroll(function(){get_position()});$(".piro_caption").fadeIn(100,function(){if($(".piro_caption p").height()>28){$(".piro_caption p").css({background:"url(css_pirobox/style_12/caption_up_down.png) top right no-repeat","padding-right":"18px"});var piro_nav_length=piro_nav_in.children(":visible").not(".piro_caption").length;$(".piro_caption").css("width",params[1]-(45*piro_nav_length));$(".piro_caption").live("mouseenter",function(){$(this).stop().animate({height:$(this).children("p").outerHeight(true)},400)});$(".piro_caption").live("mouseleave",function(){$(this).animate({height:28},200)})}else{$(".piro_caption p,.piro_caption").removeAttr("style")}});nav_position()})}function animate_image(){flag_scroll=opt.piro_scroll;piro_nav_in.hide();$(".nav_big").hide();$(".nav_container, .h_mb_c").css("height",0);if(descr==""||descr===undefined||descr===false){$(".piro_caption").hide()}else{$(piro_capt_cont).appendTo(piro_nav_in)}var img=new Image();$(".div_reg img").remove();img.onerror=function(){$(".piro_caption").remove();twitter.add(facebook).hide();img.src="js/error.jpg";img.width="368";img.height="129"};img.onload=function(){var this_h=img.height,this_w=img.width,y=$(window).height(),x=$(window).width(),imgH=img.height,imgW=img.width;if(imgH+100>y||imgW+100>x){var _x=(imgW+opt.padding*2)/x,_y=(imgH+opt.padding*2)/y;if(_y>_x){imgW=Math.round(img.width*(rz_img/_y));imgH=Math.round(img.height*(rz_img/_y))}else{imgW=Math.round(img.width*(rz_img/_x));imgH=Math.round(img.height*(rz_img/_x))}if(opt.zoom_mode==true){$(".piro_zoomIn").css("visibility","visible").show();$(".piro_zoomOut").css("visibility","hidden").hide()}else{$(".piro_zoomOut,.piro_zoomIn").remove()}}else{imgH=img.height;imgW=img.width;$(".piro_zoomOut,.piro_zoomIn").css("visibility","hidden").hide()}var top=parseInt($(document).scrollTop())+(y-imgH)/2+position;if(this_h+100>y&&opt.resize==false){$(".piro_zoomOut,.piro_zoomIn").css("visibility","hidden").hide();imgH=this_h;imgW=this_w;top=30;flag_scroll=false}if(this_w+100>x&&opt.resize==false){$(".piro_zoomOut,.piro_zoomIn").css("visibility","hidden").hide();var ratio=this_h/this_w;imgH=x*ratio-100;imgW=x-100;top=30;flag_scroll=false}var y=$(window).height(),x=$(window).width();$(img).height(imgH).width(imgW);$(img).addClass("immagine");resize.add(div_reg).animate({height:imgH,width:imgW},opt.piro_speed);wrapper.animate({height:imgH+(opt.padding*2),width:imgW+(opt.padding*2),top:top,left:((x/2)-((imgW/2)+opt.padding))},opt.piro_speed,function(){facebook.attr("href","http://www.facebook.com/sharer.php?u="+img.src);twitter.attr("href","http://twitter.com/share?url="+img.src);piro_loader.hide();var cap_w=resize.width();$(".nav_big,.nav_container").show();$(".piro_caption").html("<p>"+descr+"</p>").hide();$(".nav_big,.nav_big .piro_next,.nav_big .piro_prev").css({height:imgH});$(".nav_big .piro_close").css({height:26});$(".nav_big").css({width:imgW});div_reg.append(img);$(img).fadeIn(700,function(){$(".nav_container, .h_mb_c").animate({height:41},200);piro_nav_in.show();$(window).scroll(function(){get_position();if($(".piro_zoomOut").is(":visible")){div_reg.unbind("mousemove");$(img).css({width:imgW,height:imgH,top:0,left:0},0,function(){$(".immagine").css("cursor","auto");$(img).draggable({disabled:true});zoomOut.css("visibility","hidden");zoomIn.css("visibility","visible")})}});if(opt.move_mode=="drag"){$(".immagine").attr("title","Double click to resize").add(zoomOut).bind("dblclick",function(h){h.preventDefault();$(".nav_big").show();div_reg.unbind("mousemove");$(img).draggable({disabled:true});zoomOut.css("visibility","hidden");$(".immagine").css({cursor:"auto",visibility:"visible"});zoomIn.css({visibility:"visible"});$(img).animate({width:imgW,height:imgH,top:0,left:0},600)})}else{if(opt.move_mode=="mousemove"){$(".immagine").attr("title","Click to resize").add(zoomOut).bind("click",function(h){h.preventDefault();$(".nav_big").show();div_reg.unbind("mousemove");$(img).draggable({disabled:true});zoomOut.css("visibility","hidden");$(".immagine").css({cursor:"auto",visibility:"visible"});zoomIn.css({visibility:"visible"});$(img).animate({width:imgW,height:imgH,top:0,left:0},600)})}}zoomIn.bind("click",function(w){w.preventDefault();$(this).css("visibility","hidden");zoomOut.css({visibility:"visible"}).show();$(img).draggable({disabled:false});$(img).animate({width:this_w,height:this_h,top:-(this_h-imgH)/2,left:-(this_w-imgW)/2},600,function(){if(opt.move_mode=="drag"){$(".immagine").css("cursor","move");$(".nav_big").hide();var imgPos=div_reg.offset(),x1=(imgPos.left+imgW)-this_w,y1=(imgPos.top+imgH)-this_h,x2=imgPos.left,y2=imgPos.top;if(opt.zoom_animation==true){$(img).draggable({containment:[x1,y1,x2,y2],helper:function(){return $("<div></div>").css("opacity",0)},drag:function(event,ui){var p=ui.helper.position();$(this).stop().animate({top:p.top,left:p.left},1000,"easeOutCirc")}})}else{$(img).draggable({containment:[x1,y1,x2,y2]})}}else{if(opt.move_mode=="mousemove"){$(img).draggable({disabled:true});$(".immagine").css("cursor","crosshair");$(".nav_big").hide();var div_reg_w=div_reg.width(),div_reg_h=div_reg.height(),perc_x=(this_w-div_reg_w)/div_reg_w,perc_y=(this_h-div_reg_h)/div_reg_h,last_x=0,last_y=0;div_reg.bind("mousemove",function(e){var pos_x=e.pageX-div_reg.offset().left;var pos_y=e.pageY-div_reg.offset().top;if(Math.abs(last_x-pos_x)<=1&&Math.abs(last_y-pos_y)<=1){return}last_x=pos_x;last_y=pos_y;if(opt.zoom_animation==true){$(img).stop().animate({left:-(perc_x*pos_x),top:-(perc_y*pos_y)},500,"easeOutCirc")}else{$(img).css({left:-(perc_x*pos_x),top:-(perc_y*pos_y)})}})}}})});piro_close.show();$(".piro_caption").show(0,function(){var piro_nav_length=piro_nav_in.children(":visible").not(".piro_caption").length;if($(".piro_caption p").height()>28||$(".piro_caption p").width()>imgW-(43*piro_nav_length)){$(".piro_caption p").css({background:"url(css_pirobox/style_10/caption_up_down.png) top right no-repeat","padding-right":"18px"});$(".piro_caption").css("width",imgW-(43*piro_nav_length));$(".piro_caption").live("mouseenter",function(){$(this).stop().animate({height:$(this).children("p").outerHeight(true)},400)});$(".piro_caption").live("mouseleave",function(){$(this).animate({height:28},200)})}else{$(".piro_caption p,.piro_caption").removeAttr("style")}$(this).fadeTo(200,1)});nav_position()})})};img.src=p_link;var new_h=img.height,new_w=img.width;$(window).resize(function(){get_position()})}switch(params[0]){case"iframe":div_reg.html("").css("overflow","hidden");animate_html();div_reg.piroFadeIn(300,function(){div_reg.append('<iframe id="my_frame" class="my_frame" src="'+p_link+'" frameborder="0" allowtransparency="true" scrolling="auto" align="top"></iframe>');$(".my_frame").css({height:+(params[2])+"px",width:+(params[1])+"px"});twitter.add(facebook).hide().css("visibility","hidden")});break;case"content":div_reg.html("").css("overflow","auto");$(".my_frame").remove();animate_html();div_reg.piroFadeIn(300,function(){div_reg.load(p_link);twitter.add(facebook).hide().css("visibility","hidden")});break;case"inline":div_reg.html("").css("overflow","auto");$(".my_frame").remove();animate_html();div_reg.piroFadeIn(300,function(){$(p_link).clone(true).appendTo(div_reg).addClass("clone");$(".clone").css("margin-top","0").piroFadeIn(300);twitter.add(facebook).hide().css("visibility","hidden")});break;case"flash":$(".my_frame").remove();div_reg.html("").css("overflow","hidden");animate_html();var flash_cont=('<object width="'+params[1]+'" height="'+params[2]+'"><param name="movie" value="'+p_link+'" /><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><embed src="'+p_link+'" type="application/x-shockwave-flash" allowscriptaccess="always" menu="false" wmode="transparent" allowfullscreen="true" width="'+params[1]+'" height="'+params[2]+'"></embed></object>');div_reg.piroFadeIn(300,function(){$(flash_cont).appendTo(div_reg);twitter.add(facebook).hide().css("visibility","hidden")});break;case"gallery":div_reg.css("overflow","hidden");$(".my_frame").remove();animate_image();break;case"single":$(".my_frame").remove();div_reg.html("").css("overflow","hidden");animate_image();break}}});function close_all(){$(".my_frame").add(".piro_caption").remove();$(".piro_thumbs").html("");wrapper.add(div_reg).add(resize).stop();var ie_sucks=wrapper;if($.browser.msie){ie_sucks=div_reg.add(piro_bg);$(".div_reg img").remove()}else{ie_sucks=wrapper.add(piro_bg)}ie_sucks.piroFadeOut(200,function(){div_reg.html("");piro_loader.hide();piro_nav_in.hide();$(".piro_html .h_mb_c,.nav_container").animate({height:0},0);piro_bg.add(wrapper).hide().css("visibility","visible")})}piro_close.add(piro_loader).add(piro_bg).bind("click",function(y){y.preventDefault();close_all()})}})(jQuery);

    //]]>

    </script>

    <b:if cond='data:blog.pageType == "static_page"'>

    <script type='text/javascript'>

    //<![CDATA[

    $(window).bind("load", function() {

    $('.separator a').attr({'class':'pirobox','data-pirobox':'gallery'});

    $.pirobox_ext({

            attribute: 'data-pirobox',

            piro_speed : 800,

            bg_alpha : .3,

            resize : true,

            zoom_mode : true,

            move_mode : 'drag',

            piro_scroll : true,

            share: true

        });

    });

    //]]>

    </script>

    </b:if>

    <b:if cond='data:blog.pageType == "item"'>

    <script type='text/javascript'>

    //<![CDATA[

    $(window).bind("load", function() {

    $('.separator a').attr({'class':'pirobox','data-pirobox':'gallery'});

    $.pirobox_ext({

            attribute: 'data-pirobox',

            piro_speed : 800,

            bg_alpha : .3,

            resize : true,

            zoom_mode : true,

            move_mode : 'drag',

            piro_scroll : true,

            share: true

        });

    });

    //]]>

    </script>

    </b:if>

5. Terakhir Simpan template,kemudian lihat hasilnya.

* Terima Kasih Atas Kunjungan Anda *