Facebook Twitter Pasang Iklan Anda Disini!
Gratis berlangganan artikel ALDI-XP via E-mail, Join sekarang!!

Wednesday, September 7, 2011

18
CARA MEMBUAT SHADOWBOX DI BLOGGER

Do you want to share?

Do you like this story?

Wah! kebetulan sekali saya punya script bagus buat sobat dan gk membuat blog kalian berat
Ini salah satu script cara agar gambar yg kita lihat lebih menarik


1. Masuk ke Account Blog anda
2. Pilih tata letak
3. Pilih Edit HTML
4. Beri centang pada "Expand Widget Template"
5. Setelah itu cari kode ]]></b:skin> pada template
6. Paste kode script dibawah ini sebelum kode ]]></b:skin>
Script :

#TB_window{font:12px Arial, Helvetica, sans-serif;position:fixed;background:#fff;z-index:102;color:#000;display:none;border:4px solid #525252;text-align:left;top:50%;left:50%}
#TB_secondLine{font:10px Arial, Helvetica, sans-serif;color:#666}
#TB_window a:hover{color:#000}
#TB_overlay{position:fixed;z-index:100;top:0;left:0;height:100%;width:100%}
.TB_overlayMacFFBGHack{background:url(http://lh3.ggpht.com/_BiYlG6sktcY/TFLpqKg0e4I/AAAAAAAABHc/KvYJ9dWmTZg/macFFBgHack.png) repeat}
.TB_overlayBG{background-color:#000;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75}
#TB_window img#TB_Image{display:block;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-top:1px solid #666;border-left:1px solid #666;margin:15px 0 0 15px}
#TB_caption{height:25px;float:left;padding:7px 30px 10px 25px}
#TB_closeWindow{height:25px;float:right;padding:11px 25px 10px 0}
#TB_closeAjaxWindow{margin-bottom:1px;text-align:right;float:right;padding:7px 10px 5px 0}
#TB_ajaxWindowTitle{float:left;margin-bottom:1px;padding:7px 0 5px 10px}
#TB_title{background-color:#e8e8e8;height:27px}
#TB_ajaxContent{clear:both;overflow:auto;text-align:left;line-height:1.4em;padding:2px 15px 15px}
#TB_ajaxContent.TB_modal{padding:15px}
#TB_ajaxContent p{padding:5px 0}
#TB_load{position:fixed;display:none;height:13px;width:208px;z-index:103;top:50%;left:50%;margin:-6px 0 0 -104px}
#TB_HideSelect{z-index:99;position:fixed;top:0;left:0;background-color:#fff;border:none;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;height:100%;width:100%}
#TB_iframeContent{clear:both;border:none;margin-bottom:-1px;margin-top:1px;_margin-bottom:1px}
#TB_window a:link,#TB_window a:visited,#TB_window a:active,#TB_window a:focus{color:#3B5998}
* html #TB_overlay,* html #TB_HideSelect{position:absolute;height:expression(document.body.scrollHeight>document.body.offsetHeight?document.body.scrollHeight:document.body.offsetHeight+'px')}
* html #TB_window,* html #TB_load{position:absolute;margin-top:expression(0-parseInt(this.offsetHeight/2) 0 (TBWindowMargin=document.documentElement&&document.documentElement.scrollTop||document.body.scrollTop) 0 px)}


7. Cari kode </body> dan paste kode dibawah ini diatas kode </body>
Script :

<!-- jQuery --><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><!-- box --><script type='text/javascript'>//<![CDATA[/** Thickbox 3 - One Box To Rule Them All.* By Cody Lindley (http://www.codylindley.com)* Copyright (c) 2007 cody lindley* Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php*/var tb_pathToImage = "http://i714.photobucket.com/albums/ww141/Ardhiansyam/loadinglagi.gif";eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(o).2S(9(){1u(\'a.18, 3n.18, 3i.18\');1w=1p 1t();1w.L=2H});9 1u(b){$(b).s(9(){6 t=X.Q||X.1v||M;6 a=X.u||X.23;6 g=X.1N||P;19(t,a,g);X.2E();H P})}9 19(d,f,g){3m{3(2t o.v.J.2i==="2g"){$("v","11").r({A:"28%",z:"28%"});$("11").r("22","2Z");3(o.1Y("1F")===M){$("v").q("<U 5=\'1F\'></U><4 5=\'B\'></4><4 5=\'8\'></4>");$("#B").s(G)}}n{3(o.1Y("B")===M){$("v").q("<4 5=\'B\'></4><4 5=\'8\'></4>");$("#B").s(G)}}3(1K()){$("#B").1J("2B")}n{$("#B").1J("2z")}3(d===M){d=""}$("v").q("<4 5=\'K\'><1I L=\'"+1w.L+"\' /></4>");$(\'#K\').2y();6 h;3(f.O("?")!==-1){h=f.3l(0,f.O("?"))}n{h=f}6 i=/\\.2s$|\\.2q$|\\.2m$|\\.2l$|\\.2k$/;6 j=h.1C().2h(i);3(j==\'.2s\'||j==\'.2q\'||j==\'.2m\'||j==\'.2l\'||j==\'.2k\'){1D="";1G="";14="";1z="";1x="";R="";1n="";1r=P;3(g){E=$("a[@1N="+g+"]").36();25(D=0;((D<E.1c)&&(R===""));D++){6 k=E[D].u.1C().2h(i);3(!(E[D].u==f)){3(1r){1z=E[D].Q;1x=E[D].u;R="<1e 5=\'1X\'>&1d;&1d;<a u=\'#\'>2T &2R;</a></1e>"}n{1D=E[D].Q;1G=E[D].u;14="<1e 5=\'1U\'>&1d;&1d;<a u=\'#\'>&2O; 2N</a></1e>"}}n{1r=1b;1n="1t "+(D+1)+" 2L "+(E.1c)}}}S=1p 1t();S.1g=9(){S.1g=M;6 a=2x();6 x=a[0]-1M;6 y=a[1]-1M;6 b=S.z;6 c=S.A;3(b>x){c=c*(x/b);b=x;3(c>y){b=b*(y/c);c=y}}n 3(c>y){b=b*(y/c);c=y;3(b>x){c=c*(x/b);b=x}}13=b+30;1a=c+2G;$("#8").q("<a u=\'\' 5=\'1L\' Q=\'1o\'><1I 5=\'2F\' L=\'"+f+"\' z=\'"+b+"\' A=\'"+c+"\' 23=\'"+d+"\'/></a>"+"<4 5=\'2D\'>"+d+"<4 5=\'2C\'>"+1n+14+R+"</4></4><4 5=\'2A\'><a u=\'#\' 5=\'Z\' Q=\'1o\'>1l</a> 1k 1j 1s</4>");$("#Z").s(G);3(!(14==="")){9 12(){3($(o).N("s",12)){$(o).N("s",12)}$("#8").C();$("v").q("<4 5=\'8\'></4>");19(1D,1G,g);H P}$("#1U").s(12)}3(!(R==="")){9 1i(){$("#8").C();$("v").q("<4 5=\'8\'></4>");19(1z,1x,g);H P}$("#1X").s(1i)}o.1h=9(e){3(e==M){I=2w.2v}n{I=e.2u}3(I==27){G()}n 3(I==3k){3(!(R=="")){o.1h="";1i()}}n 3(I==3j){3(!(14=="")){o.1h="";12()}}};16();$("#K").C();$("#1L").s(G);$("#8").r({Y:"T"})};S.L=f}n{6 l=f.2r(/^[^\\?]+\\??/,\'\');6 m=2p(l);13=(m[\'z\']*1)+30||3h;1a=(m[\'A\']*1)+3g||3f;W=13-30;V=1a-3e;3(f.O(\'2j\')!=-1){1E=f.1B(\'3d\');$("#15").C();3(m[\'1A\']!="1b"){$("#8").q("<4 5=\'2f\'><4 5=\'1H\'>"+d+"</4><4 5=\'2e\'><a u=\'#\' 5=\'Z\' Q=\'1o\'>1l</a> 1k 1j 1s</4></4><U 1W=\'0\' 2d=\'0\' L=\'"+1E[0]+"\' 5=\'15\' 1v=\'15"+1f.2c(1f.1y()*2b)+"\' 1g=\'1m()\' J=\'z:"+(W+29)+"p;A:"+(V+17)+"p;\' > </U>")}n{$("#B").N();$("#8").q("<U 1W=\'0\' 2d=\'0\' L=\'"+1E[0]+"\' 5=\'15\' 1v=\'15"+1f.2c(1f.1y()*2b)+"\' 1g=\'1m()\' J=\'z:"+(W+29)+"p;A:"+(V+17)+"p;\'> </U>")}}n{3($("#8").r("Y")!="T"){3(m[\'1A\']!="1b"){$("#8").q("<4 5=\'2f\'><4 5=\'1H\'>"+d+"</4><4 5=\'2e\'><a u=\'#\' 5=\'Z\'>1l</a> 1k 1j 1s</4></4><4 5=\'F\' J=\'z:"+W+"p;A:"+V+"p\'></4>")}n{$("#B").N();$("#8").q("<4 5=\'F\' 3c=\'3b\' J=\'z:"+W+"p;A:"+V+"p;\'></4>")}}n{$("#F")[0].J.z=W+"p";$("#F")[0].J.A=V+"p";$("#F")[0].3a=0;$("#1H").11(d)}}$("#Z").s(G);3(f.O(\'37\')!=-1){$("#F").q($(\'#\'+m[\'26\']).1T());$("#8").24(9(){$(\'#\'+m[\'26\']).q($("#F").1T())});16();$("#K").C();$("#8").r({Y:"T"})}n 3(f.O(\'2j\')!=-1){16();3($.1q.35){$("#K").C();$("#8").r({Y:"T"})}}n{$("#F").34(f+="&1y="+(1p 33().32()),9(){16();$("#K").C();1u("#F a.18");$("#8").r({Y:"T"})})}}3(!m[\'1A\']){o.21=9(e){3(e==M){I=2w.2v}n{I=e.2u}3(I==27){G()}}}}31(e){}}9 1m(){$("#K").C();$("#8").r({Y:"T"})}9 G(){$("#2Y").N("s");$("#Z").N("s");$("#8").2X("2W",9(){$(\'#8,#B,#1F\').2V("24").N().C()});$("#K").C();3(2t o.v.J.2i=="2g"){$("v","11").r({A:"1Z",z:"1Z"});$("11").r("22","")}o.1h="";o.21="";H P}9 16(){$("#8").r({2U:\'-\'+20((13/2),10)+\'p\',z:13+\'p\'});3(!(1V.1q.2Q&&1V.1q.2P<7)){$("#8").r({38:\'-\'+20((1a/2),10)+\'p\'})}}9 2p(a){6 b={};3(!a){H b}6 c=a.1B(/[;&]/);25(6 i=0;i<c.1c;i++){6 d=c[i].1B(\'=\');3(!d||d.1c!=2){39}6 e=2a(d[0]);6 f=2a(d[1]);f=f.2r(/\\+/g,\' \');b[e]=f}H b}9 2x(){6 a=o.2M;6 w=1S.2o||1R.2o||(a&&a.1Q)||o.v.1Q;6 h=1S.1P||1R.1P||(a&&a.2n)||o.v.2n;1O=[w,h];H 1O}9 1K(){6 a=2K.2J.1C();3(a.O(\'2I\')!=-1&&a.O(\'3o\')!=-1){H 1b}}',62,211,'|||if|div|id|var||TB_window|function||||||||||||||else|document|px|append|css|click||href|body||||width|height|TB_overlay|remove|TB_Counter|TB_TempArray|TB_ajaxContent|tb_remove|return|keycode|style|TB_load|src|null|unbind|indexOf|false|title|TB_NextHTML|imgPreloader|block|iframe|ajaxContentH|ajaxContentW|this|display|TB_closeWindowButton||html|goPrev|TB_WIDTH|TB_PrevHTML|TB_iframeContent|tb_position||thickbox|tb_show|TB_HEIGHT|true|length|nbsp|span|Math|onload|onkeydown|goNext|Tekan|atau|Tutup|tb_showIframe|TB_imageCount|Close|new|browser|TB_FoundURL|Esc|Image|tb_init|name|imgLoader|TB_NextURL|random|TB_NextCaption|modal|split|toLowerCase|TB_PrevCaption|urlNoQuery|TB_HideSelect|TB_PrevURL|TB_ajaxWindowTitle|img|addClass|tb_detectMacXFF|TB_ImageOff|150|rel|arrayPageSize|innerHeight|clientWidth|self|window|children|TB_prev|jQuery|frameborder|TB_next|getElementById|auto|parseInt|onkeyup|overflow|alt|unload|for|inlineId||100||unescape|1000|round|hspace|TB_closeAjaxWindow|TB_title|undefined|match|maxHeight|TB_iframe|bmp|gif|png|clientHeight|innerWidth|tb_parseQuery|jpeg|replace|jpg|typeof|which|keyCode|event|tb_getPageSize|show|TB_overlayBG|TB_closeWindow|TB_overlayMacFFBGHack|TB_secondLine|TB_caption|blur|TB_Image|60|tb_pathToImage|mac|userAgent|navigator|of|documentElement|Prev|lt|version|msie|gt|ready|Next|marginLeft|trigger|fast|fadeOut|TB_imageOff|hidden||catch|getTime|Date|load|safari|get|TB_inline|marginTop|continue|scrollTop|TB_modal|class|TB_|45|440|40|630|input|188|190|substr|try|area|firefox'.split('|'),0,{}))//]]></script><!-- end box -->


8. Ini adalah cara penulisan
Contoh :

<a class="thickbox" href="LINK-IMAGES-ANDA"><img src="LINK-IMAGES-ANDA"></a>


Demo :


(Klik kiri pada gambar untuk melihat DEMO)
INFO : Jika artikel CARA MEMBUAT SHADOWBOX DI BLOGGER ini bermanfaat, silahkan sobat share (copy/paste) artikel ini. Bila berkenan mohon mencantumkan link sumbernya, http://aldi-xpblog.blogspot.com/2011/09/cara-membuat-shadowbox-di-blogger.html. Terima Kasih,,
Related Post :
Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Official Blog Of ALDI-XP di inbox anda:

feedburner

18 komentar: — Skip to Comment

Ghoeszt-X said...

berkunjung gan..
tetap semangat n happy blogging

Cek Info said...

bole jg ni sob :D
kreatif :a:

ALDI-XP said...

@Ghoeszt-X Ok sepp gan :j:

@Cek Info Silakan dicoba :h:

ZONA DOWNLOAD GRATIS said...

bagus juga ne blognya,

Shinobi Blog said...

keren juga nih...
coba aah ... :)

ALDI-XP said...

@ZONA DOWNLOAD GRATIS Terima kasih sob :a:

@Shinobi Blog Silakan dicoba sob :j:

Blog SEO DAW-XP said...

shadowbox itu apa sih? gak ngerti sama sekali saya, ada demonya gak? Kayaknya berat yah? soalnya banyak .js dan scriptnya

RizaL Vm said...

KJereN Brad ,... Maknyooz

ALDI-XP said...

@Blog SEO DAW-XP Shadowbox itu sama halnya dengan Lightbox, Fancybox dan tikbox yang membedakan hanya tampilan saja sob :b: Kalau pengen lihat demonya klik gambar yang ditutornya sob :e:

@RizaL Vm Terima kasih sob :l:

Cek Info said...

sob like balik y fanpage sy :D
uda sy like fanpage ente :a:

Sekedar News said...

sip artikelnya dan Kunjungi balik sob. Jangan lupa kasih komentar pd posting terbaru buat blog saya :|:

ALDI-XP said...

@Cek Info Ok sob, ane like dulu ya :e:

@Sekedar News Sepp sob!! :l:

uchank said...

:a: wah panjang gan :D

gpp tuh kodenya di copy langsung?ada yang pendekan gak gan

ALDI-XP said...

@uchank Hehehehe... :e:
Gpp gan, klo dibuat posting harus kasih sumber link hidup ya :d:. Sorry gak ada gan :g:

A TechnoLedge Blog said...

gan gimana cara membuat spoiler kayak gitu .?

ALDI-XP said...

@A TechnoLedge Blog Spoiler yg mana gan?? :j:

Share Our Knowledge said...

nice share sob, tapi ada demonya gk?

ALDI-XP said...

@Share Our Knowledge Thanks sob :j:, Demo sudah ada di posting tp jangan gunakan klik kanan kalau membuka gambarnya :k:

Agar Komentar Anda Lebih Hidup Gunakan Emoticon Dibawah Ini

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l:

Post a Comment — Or Back to Content

Ayo berikan sedikit komentar sobat buat blog ini
Sedikit komentar dari sobat sangat berarti untuk blog ini

Cara Berkomentar yang benar :
1. Jangan menggunakan "Anonymous" dalam berkomentar, Admin tidak akan membalas komentar anda
2. Jangan mengirimkan pesan berbentuk Spam
3. Komentar anda akan muncul setelah di konfirmasi oleh admin

 

SITE INFO


BE A SPONSOR

smadav antivirus indonesia