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, https://aldi-xpblog.blogspot.com/2011/09/cara-membuat-shadowbox-di-blogger.html. Terima Kasih,,

Related Post :

BLOG

• CARA MEMBUAT KATA TERIMA KASIH PADA KOMENTAR
• CARA MERUBAH UKURAN JUDUL POST
• CARA MENGHAPUS LINK/TULISAN 'LIHAT PROFIL LENGKAPKU'
• CARA MEMBUAT TOMBOL SHARE FLOATING
• CARA MEMBUAT KOTAK COPAS
• CARA MEMBUAT DAFTAR ISI/SITE MAP DI POSTING BLOGGER
• TIPSY : CARA MEMBUAT TOOLTIPS SEPERTI FACEBOOK
• CARA MEMBUAT KOTAK KOMENTAR
• CARA PASANG/MEMBUAT TOMBOL REPLY KOMENTAR
• CARA PASANG SCREENSAVER DI BLOG
• CARA MEMBUAT RECENT POST DENGAN THUMBNAIL
• CARA PASANG EMOTICON SOLDIER DI KOTAK KOMENTAR
• CARA MENAIKKAN PAGERANK DAN BACKLINK DI BLOG

TIPS AND TRICK

• Xilisoft Video Converter Ultimate 7.7.2 Full Version
• CARA MEMBUAT KATA TERIMA KASIH PADA KOMENTAR
• CARA MENGATASI THE PROXY SERVER IS REFUSING CONNECTIONS
• CARA MERUBAH UKURAN JUDUL POST
• CARA MENGHAPUS LINK/TULISAN 'LIHAT PROFIL LENGKAPKU'
• CARA MEMBUAT TOMBOL SHARE FLOATING
• CARA MELEWATI TIMER DI 4SHARED.COM
• CARA MEMBUAT KOTAK COPAS
• CARA MEMBUAT DAFTAR ISI/SITE MAP DI POSTING BLOGGER
• TIPSY : CARA MEMBUAT TOOLTIPS SEPERTI FACEBOOK
• CARA MEMBUAT KOTAK KOMENTAR
• CARA PASANG/MEMBUAT TOMBOL REPLY KOMENTAR
• CARA MERESET PRINTER
• CARA PASANG SCREENSAVER DI BLOG
• CARA MEMBUAT RECENT POST DENGAN THUMBNAIL
• CARA PASANG EMOTICON SOLDIER DI KOTAK KOMENTAR
• CARA MEMBUAT WIFI SENDIRI DI LAPTOP/NETBOOK
• TIPS DOWNLOAD VIDEO DI YOUTUBE
• CARA MENAIKKAN PAGERANK DAN BACKLINK DI BLOG
• SMS GRATIS V.4

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Official Blog Of ALDI-XP di inbox anda: