Loading...

Membuat Menu Print DI Blogger


Sekalian trik / tips yang mungkin sedikit tapi semoga saja berguna para pembaca saya psoting juga hari ini. Di search engine hanya seidkit orang yang nge-posting nambahin menu print di blog. Jadi aku mencoba sedikit berbagi ilmu juga nih...

Biasanya ada gambar seperti ini :

Print this page Halam ini di print aja !

Nah asal mulanya element diatas , scriptnya sebagai berikut :

<a href="javascript:print(document)"><img src="http://underbone50.googlepages.com/print.gif" alt="Print this page" border="0"/> Halaman ini diprint aja ! </a>

Keterangan :
Warna merah : URL gambar yang kamu sediakan
Warna Biru : Tulisan yang akan muncul

Cara masangnya ? Ya ampun.... seperti biasa. nambah elemen hlaman di layout setting >> HTML / jaascript . Tinggal copy paste kan ?

Selanjutnya bisa kamu edit sesuka kamu !

Modifikasi Homepage Sesuai keinginan

Modifikasi Homepage Sesuai keinginan

Pada kesempatan kali ini saya akan memberikan tips bagaimana membuat tampilan homepage atau halaman utama sesuai keinginan kita, seperti yang kita ketahui ada banyak cara agar membuat tampilan homepage menjadi simpel seperti mengurangi widget yang muncul pada homepage atau halaman utama dan memunculkanya hanya pada halaman posting ataupun menambahkan fitur image slider pada halaman utama saja, tapi jarang yang menghilangkan halaman posting ataupun sidebar pada homepage.
Seperti pada blog saya ini, saya menghilangkan halaman posting dan menggantinya dengan widget daftar isi navigasi dari DT:] dengan tujuan agar halaman utama saya bisa lolos dari w3c validator, karena kalau kita tetap menampilkan halaman posting pada homepage  dan ada beberapa artikel yang tampil itu sering dianggap error oleh w3c validator, makanya saya lebih suka menggantinya dengan widget recent post ataupun yang lainya.

Berikut beberapa cara merubah tampilan homepage/halaman utama pada blog.
1. Login Akun blogger anda
2. Pada dashboard pilih Template > Edit HTML
3. Untuk menghilangkan halaman posting ada 2 cara yang saya pakai yaitu dengan menggunakan tag conditional dan css {display:none}
#### Cara pertama Dengan menggunakan tag conditional berikut caranya:
Lihat kode berikut ini:

            <b:section id='main-wrapper' maxwidgets='1'>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

</b:section> 
Lihat code main-wrapper itu merupakan kode yang membungkus halaman posting dan untuk kode yang berwarna biru itu adalah kode/widget halaman posting.
Agar halaman posting tidak tampil pada homepage kita akan menggunkan tag conditional untuk menghilangkanya, dan kodenya menjadi sepeerti berikut ini

<b:if cond='data:blog.url != data:blog.homepageUrl'> 

            <b:section id='main-wrapper' maxwidgets='1'>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

</b:section> 

</b:if>
kode yang berwarna hijau merupakan tag conditional dan yang bawah merupakan kode penutup dari tag conditional tersebut


#### Cara kedua dengan menggunakan css {display:none;} pada ID halaman posting yaitu Blog1
Untuk cara kedua ini kita menggunakan tag conditional dan css untuk menghilangkannya, menggunakan cara kedua ini kita bisa lebih leluasa untuk mengatur lebar dari tampilan homepage
contoh code seperti ini

<b:if cond='data:blog.url==data:blog.homepageUrl'>

<style>

body {background-color:#fefefe}

#outer-wrapper {width:500px} /* yang membungkus halaman posting dan sidebar */ 

#Blog1 {display:none}

#main-wrapper {width:100%} /* halaman posting */

#sidebar-wrapper {width:100%} /* sidebar */

</style>

</b:if>
Silahkan anda sesuaikan sendiri, dengan kode diatas saya menghilangkan halaman posting dan hanya menampilkan sidebar saja. jika ingin menampilkan halaman posting saja rubah saja kodenya menjadi seperti ini  
#main-wrapper {width:100%;}
#sidebar-wrapper {display:none;}
Anda juga bisa merubah warna background ataupun yang lainya.
Kode tersebut di khususkan untuk homepage saja. jika anda ingin menerapkanya copy saja kode tersebut dan letakkan diatas kode </head>
Tapi perhatikan, karena pada setiap template ID elment tidak selalu sama.
Semoga bisa di mengerti dan semoga bermanfaat.
"Anda bisa berkreasi sendiri, tidak ada salahanya mencoba jangan takut melakukan kesalahan, karena dari kesalahan kita bisa menemukan sesuatu yang sangat menarik."

Cara Mengganti LightBox dengan PiroBox

 kali ini saya akan membahas cara Mengganti LightBox dengan PiroBox (http://www.pirolab.it), ini sedikit berbeda dan lebih keren tentunya, karena PiroBox ini sudah dimodifikasi dan dilengkapi dengan fitur share facebook dan twitter seperti gambar diatas. Script PiroBox ini saya dapatkan dari Template JKT Blogger Template by MKR, 

Langsung saja berikut cara menerapkan PiroBox:

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

2. Pastikan Template anda 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 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 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( http://4.bp.blogspot.com/-MrozSlXAcv8/UIJfG5G3qrI/AAAAAAAAGAs/Uv05j38u9yU/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(http://2.bp.blogspot.com/-H3QW6DpcUjE/UIJfLg0k00I/AAAAAAAAGBU/-GKQRL8LWbI/s1600/new_skin.png) top left no-repeat}

.piro_html .h_t_r{width:25px;height:25px;background:url(http://2.bp.blogspot.com/-H3QW6DpcUjE/UIJfLg0k00I/AAAAAAAAGBU/-GKQRL8LWbI/s1600/new_skin.png) top right no-repeat}

.piro_html .h_t_c{height:25px;background:url(http://3.bp.blogspot.com/-xhhKVD6GuFg/UIJfNHbH74I/AAAAAAAAGBk/3DawlJdCFpg/s1600/new_skin_top.png) top repeat-x}

.piro_html .h_c_l{width:25px;background:url(http://1.bp.blogspot.com/-7biny-30bMI/UIJfMeDZ5MI/AAAAAAAAGBc/9BuZQXTuTEg/s1600/new_skin_left.png) left repeat-y}

.piro_html .h_c_c{background:url(http://1.bp.blogspot.com/-QnLp_PeoK9M/UIJfEzfymzI/AAAAAAAAGAc/Zv-vvRonUw4/s1600/bg_mdl.png);margin:0;padding:0;/*overflow:hidden;*/

position:relative}

.piro_html .h_c_c .div_reg{/*background:url(http://1.bp.blogspot.com/-QnLp_PeoK9M/UIJfEzfymzI/AAAAAAAAGAc/Zv-vvRonUw4/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(http://1.bp.blogspot.com/-7biny-30bMI/UIJfMeDZ5MI/AAAAAAAAGBc/9BuZQXTuTEg/s1600/new_skin_left.png) right repeat-y}

.piro_html .h_mb_c{height:0;background:url(http://1.bp.blogspot.com/-QnLp_PeoK9M/UIJfEzfymzI/AAAAAAAAGAc/Zv-vvRonUw4/s1600/bg_mdl.png);position:relative}

.piro_html .h_mb_l{width:25px;height:0;background:url(http://1.bp.blogspot.com/-7biny-30bMI/UIJfMeDZ5MI/AAAAAAAAGBc/9BuZQXTuTEg/s1600/new_skin_left.png) left repeat-y}

.piro_html .h_mb_r{width:25px;height:0;background:url(http://1.bp.blogspot.com/-7biny-30bMI/UIJfMeDZ5MI/AAAAAAAAGBc/9BuZQXTuTEg/s1600/new_skin_left.png) right repeat-y;position:relative}

.piro_html .h_b_c{height:25px;background:url(http://3.bp.blogspot.com/-xhhKVD6GuFg/UIJfNHbH74I/AAAAAAAAGBk/3DawlJdCFpg/s1600/new_skin_top.png) bottom repeat-x}

.piro_html .h_b_l{width:25px;height:25px;background:url(http://2.bp.blogspot.com/-H3QW6DpcUjE/UIJfLg0k00I/AAAAAAAAGBU/-GKQRL8LWbI/s1600/new_skin.png) bottom left no-repeat}

.piro_html .h_b_r{width:25px;height:25px;background:url(http://2.bp.blogspot.com/-H3QW6DpcUjE/UIJfLg0k00I/AAAAAAAAGBU/-GKQRL8LWbI/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(http://3.bp.blogspot.com/-10tHoVmFVbQ/UIJfKqyfbpI/AAAAAAAAGBM/GZKtGcNcgCE/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(http://4.bp.blogspot.com/-dVKonfqAeqc/UIJfKCCiNeI/AAAAAAAAGBE/s8d_06exIAI/s1600/loader.gif) center center no-repeat}

.nav_container{position:relative;float:left;margin:5px 0 0 0;height:0;width:100%;background:url(http://4.bp.blogspot.com/-MrozSlXAcv8/UIJfG5G3qrI/AAAAAAAAGAs/Uv05j38u9yU/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(http://4.bp.blogspot.com/-MrozSlXAcv8/UIJfG5G3qrI/AAAAAAAAGAs/Uv05j38u9yU/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(http://3.bp.blogspot.com/-B0CJAGfz81U/UIJfFyQeX0I/AAAAAAAAGAk/W2KXZ8wS0-Y/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(http://2.bp.blogspot.com/-0O3B7MUInH0/UIJfIExm8qI/AAAAAAAAGA0/57E7KPU7_io/s1600/caption_w.png)}

.nav_big a.piro_close{position:absolute;height:30px!important;width:30px;background:url(http://1.bp.blogspot.com/-5Yn6mv919Sw/UIJfJHFSt8I/AAAAAAAAGA8/I7TquOsa2-w/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 == &quot;static_page&quot;'>

<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 == &quot;item&quot;'>

<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>
Terakhir Simpan template, kemudian lihat hasilnya.
Selamat mencoba..