How To Create Your Own Widgets

[MexicansStareAtMe]

How do you create a widget? Including html, css, photoshop etc.

I'm clueless!

[annalaurabrown]

Well from what I understand the process is more complicated than it may seem. I recommend googling for info if you really want to do it but honestly there are so many great ones out there why not just use what is already there.

[Nathan]

Well, do you have any coding experience at all?

If not then it is going to be a long hard process. Expect to spend months studying programming before you will be ready to begin.

Basically depending on what type of widget that you want to program it could be a few simple lines of code (in the case of a clock widget) or it could end up being a jewel of code like this one, which creates a book cover slideshow for my old book review blog:

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}('9 J=1L;9 1l=v;9 i=U 19();9 V=U 1m;V.D=\'1a://1M.1N.1b/1O/1P/1Q/p-1R/1S.1T\';9 W=4.5("1U");9 E=W.1V.1n;W.7.X=E;W.7.1c=J+"t";9 g="<w u=\'Y\' 7=\'z-K: 3; L: M; I: N;\'><O u=\'V\' /></w>";g+="<w u=\'1W\' 7=\'z-K: 2; F: x; I: N; L: M;\'><a u=\'1X\'><O u=\'1Y\' /></a></w>";g+="<w u=\'1Z\' 7=\'z-K: 2; F: x; I: N; L: M;\'><a u=\'20\'><O u=\'21\' /></a></w>";g+="<w u=\'22\' 7=\'z-K: 2; F: x; L: M;\'><a u=\'23\'><O u=\'24\' /></a></w>";g+="<w u=\'P\' 1o=\'o(15,A)\' 1p=\'o(15,Q)\' 1q=\'1d();\' 7=\'z-K: 3; X: 1r; 1s: 1t; L: M; I: N;\'><O D=\'1a://1u.1v.1b/1w/1x/1y-1z/25.1A\'/></w>";g+="<w u=\'R\' 1o=\'o(15,A)\' 1p=\'o(15,Q)\' 1q=\'1e();\' 7=\'z-K: 3; X: 1r; 1s: 1t; L: M; I: N;\'><O D=\'1a://1u.1v.1b/1w/1x/1y-1z/26.1A\'/></w>";W.27=g;o(4.5("P"),Q);o(4.5("R"),Q);4.5("P").7.1f=(J/2-1B)+"t";4.5("R").7.1f=(J/2-1B)+"t";4.5("R").7.q="28";4.5("P").7.q=(E-29)+"t";4.5("Y").7.q=(E/2-16)+"t";4.5("Y").7.1f=(J/2-16)+"t";4.5("V").D=V.D;B 1C(a){Z(1D.2a(1D.2b()*2c)%a)}9 s=1C(r.G/3);9 2d=U 19();9 11=y;9 S=y;B o(a,b){a.7.1E=b/A;a.7.2e=\'2f(1E = \'+(b)+\')\'}B 1g(a,b,d,e){9 c=4.5(a).1h;9 f=4.5(a).1i;c+=(b-c)/8;f+=(e-f)/8;6(c+1>b&c-1<b){c=b;4.5(a).7.q=c+"t";o(4.5(a),e);6(e==0){4.5(a).7.F="x"}11-=1}l{o(4.5(a),f);4.5(a).7.q=c+"t";4.5(a).1h=c;4.5(a).1i=f;12("1g(\'"+a+"\',"+b+","+d+","+e+");",10)}}B 17(a,b,c,d){4.5(a).1h=4.5(a).2g;4.5(a).1i=c;12("1g(\'"+a+"\',"+b+","+c+","+d+");",10);11+=1}B 18(a){9 b;9 c;6(a-3<0){b=0}l{b=a-3}6(c+3>r.G/3){c=r.G/3}l{c=a+3}2h(9 d=b;d<c;d++){i[d]=U 1m();i[d].2i=v;i[d].D=r[d*3]}}B p(a,n,b,c,d,e,f){9 g=4.5(\'2j\'+a);9 h;9 j;6(n==T){h=g.1n;j=g.2k}l 6(!(n<0|n>r.G/3-1)){6(i[n]==T||i[n].2l==y){6(a==2){4.5(\'Y\').7.I=\'N\';S=v}4.5(\'C\'+a).7.F=\'x\';18(n);12("p("+a+","+n+",\'"+b+"\',\'"+c+"\',"+d+","+e+","+f+");",1j);Z}l{18(n);6(a==2){4.5(\'Y\').7.I=\'2m\';S=y}g.D=i[n].D;4.5(\'2n\'+a).2o=r[(n*3)+1];h=i[n].X;j=i[n].1c;1k=J/j;j=j*1k;h=h*1k;g.7.X=h+"t";g.7.1c=j+"t"}}l 6(n<=-1){p(a,(r.G/3)-1,b,c,d,e,f);Z}l 6(n>=(r.G/3)){p(a,0,b,c,d,e,f);Z}6(b=="13"){6(f==v){17(\'C\'+a,((E/2)-(h/2)),d,e)}l{4.5(\'C\'+a).7.q=((E/2)-(h/2))+"t"}4.5(\'C\'+a).7.F=c}l 6(b=="q"){6(f==v){17(\'C\'+a,0-h,d,e)}l{4.5(\'C\'+a).7.q=(0-h)+"t"}4.5(\'C\'+a).7.F=c}l 6(b=="H"){6(f==v){17(\'C\'+a,(E),d,e)}l{4.5(\'C\'+a).7.q=(E)+"t"}4.5(\'C\'+a).7.F=c}}9 k=U 19(1,2,3);B m(a){9 b;6(a=="1F"){p(1,s-1,"q","x",0,0,y);p(2,s,"13","14",A,A,y);p(3,s+1,"H","x",0,0,y)}6(a=="2p"){p(1,s-1,"q","x",0,0,y);p(2,s,"13","x",0,0,y);p(3,s+1,"H","x",0,0,y)}l 6(a=="H"){p(k[1],T,"H","14",A,0,v);p(k[0],T,"13","14",0,A,v);p(k[2],s-1,"q","x",0,0,y);b=k[2];k[2]=k[1];k[1]=k[0];k[0]=b}l 6(a=="q"){p(k[1],T,"q","14",A,0,v);p(k[2],T,"13","14",0,A,v);p(k[0],s+1,"H","x",0,0,y);b=k[0];k[0]=k[1];k[1]=k[2];k[2]=b}}B 1d(){6(!11&&!S){s+=1;6(s>(r.G/3)-1){s=0;m("q")}l{m("q")}}}B 1e(){6(!11&&!S){s-=1;6(s<0){s=(r.G/3)-1;m("H")}l{m("H")}}}S=v;18(s);m(\'1F\');B 1G(e){9 a;6(4.1H){e=2q.2r}6(4.2s||e.1I){a=e.1I}6(4.1H){a=e.2t}6(a==2u){o(4.5("R"),A);12(\'o(4.5("R"),Q);\',1j);1e();e.1J();e.1K()}l 6(a==2v){o(4.5("P"),A);12(\'o(4.5("P"),Q);\',1j);1d();e.1J();e.1K()}Z v}6(1l){4.2w=1G}',62,157,'||||document|getElementById|if|style||var|||||||||||c_order|else|||||left||c_book_position|px|id|true|div|hidden|false||100|function|book_slot_|src|available_width|visibility|length|right|display|widget_height|index|position|absolute|block|img|next_button|30|prev_button|loading|undefined|new|load_icon_img|our_root_node|width|load_icon|return||moving|setTimeout|center|visible|this||move_to|image_request|Array|http|com|height|inkweaver_review_next|inkweaver_review_prev|top|mover|specialOffsetLeft|specialOpacity|200|ratio|key_support|Image|clientWidth|onmouseover|onmouseout|onclick|79px|cursor|pointer|sites|google|site|inkweaverblog|file|cabinet|png|35|random_number|Math|opacity|initial|book_slideshow_handler|all|which|preventDefault|stopPropagation|400|lh3|ggpht|_bazwyKf2FDM|Sg9AqBGjVWI|AAAAAAAABsk|CkU7kRbXU|bigrotation2|gif|inkweaver_review_slideshow|parentNode|book_slot_1|book_link_slot_1|book_img_slot_1|book_slot_2|book_link_slot_2|book_img_slot_2|book_slot_3|book_link_slot_3|book_img_slot_3|RightArrow|LeftArrow|innerHTML|0px|79|round|random|200000|c_intervals|filter|alpha|offsetLeft|for|request_flag|book_img_slot_|clientHeight|complete|none|book_link_slot_|href|refresh|window|event|layers|keyCode|37|39|onkeydown'.split('|'),0,{}))

That code is packed in a packer function to keep it small but here it is in plain text, with all the resource URL's included:

//For compression purposes.
var d = 'http://inkweaver-review.blogspot.com/2009/';  
var e = 'http://inkweaver-review.blogspot.com/2008/';
var b4 = "http://4.bp.blogspot.com/_bazwyKf2FDM/";
var b3 = "http://3.bp.blogspot.com/_bazwyKf2FDM/";
var b2 = "http://2.bp.blogspot.com/_bazwyKf2FDM/";
var b1 = "http://1.bp.blogspot.com/_bazwyKf2FDM/";
var a = "AAAAAAAA";
var resources = new Array(
b4+"Sckw1841r1I/"+a+"Bis/qggSv_2_lM0/s400/jellicoe%2Broad%2Bby%2Bmelina%2Bmarchetta",
d+"04/jellicoe-road-by-melina-marchetta.html",
b2+"Sed8TlQWEGI/"+a+"BkY/jyGK4EPmcPg/s400/toby-alone-timothee-de-fombelle.jpg",
d+"05/toby-alone-by-timothee-de-fombelle.html",
b4+"SeDyxtLfslI/"+a+"BkQ/vajDLqU9kyQ/s400/lacemaker-princess-kimberly-brubaker-bradley.jpeg",
d+"05/lacemaker-and-princess-by-kimberly.html",
b4+"Sc536ywwmvI/"+a+"Bjw/MYhCbvetKg4/s400/ignatius%2Bmacfarland%2Bfrequenaut",
d+"05/ignatius-macfarland-frequenaut-by-paul.html",
b4+"Sc5xhfpiW0I/"+a+"Bjo/3rCVhzGe_Po/s400/the%2Briver%2Bbetween%2Bus%2Brichard%2Bpeck.jpeg",
d+"05/river-between-us-by-richard-peck.html",
b4+"Sck9WsHuhPI/"+a+"Bi0/-LrSGRjGQzM/s400/hattie%2Bbig%2Bsky%2Bby%2Bkirby%2Blarson.jpg",
d+"05/hattie-big-sky-by-kirby-larson.html",
b4+"Sbkj9PAsyyI/"+a+"BgI/UOU3Pb4Pirc/s400/fever%2B1793.jpg",
d+"04/fever-1793-by-laurie-halse-anderson.html",
b1+"SPOoPNhnc-I/"+a+"A3Q/b79WOotra98/s400/12069043.jpg",
d+"2008/10/letters-from-slave-boy-story-of-joseph.html",
b3+"Sg4U6iwoofI/"+a+"Bsc/5JLhR1AMjb8/s400/weedflower-by-cynthia.jpg",
d+"2008/10/weedflower-by-cynthia-kadohata.html",
b4+"SfyK6XcEwVI/"+a+"Bqk/5EBnxHEtP-Q/s400/manoltio-four-eyes-elivra-lindo.jpg",
d+"05/manolito-four-eyes-by-elvira-lindo.html",
b1+"SfcZYWiqtOI/"+a+"Bpk/W5zXohHIo_g/s400/gullivers-travels-jonathan-swift.jpeg",
d+"05/gullivers-travels-by-jonathan-swift.html",
b2+"SfpmnZcoVKI/"+a+"Bqc/uOolvpccN9Y/s400/case-peculiar-pink-fan-nancy-springer.jpeg",
d+"05/case-of-peculiar-pink-fan-by-nancy.html",
b4+"Sez2WzDam3I/"+a+"Bns/H-EhAEmtyFA/s400/other-side-mountain-allegra-goodman.jpg",
d+"04/other-side-of-island-by-allegra-goodman.html",
b3+"ScRD3qtmwMI/"+a+"Bik/FJxIkvc2SDw/s400/found-margaret-peterson-haddix",
d+"04/found-by-margaret-peterson-haddix.html",
b1+"SYiEIcdlLzI/"+a+"BcM/yyqatooPTR8/s400/n141088.jpg",
d+"03/code-orange-by-caroline-b-cooney.html",
b3+"SXYEp5QPG9I/"+a+"Ba4/KK7abzpogDk/s400/tilting+planet.jpg",
d+"03/swiftly-tilting-planet-by-madeline.html",
b1+"SeosTTTD-qI/"+a+"BnE/syhg0nnxEYs/s400/Emmy-Home-Troubled-Girls-Lynne-Jonell.jpeg",
d+"04/emmy-and-home-for-troubled-girls-by.html",
b3+"SbkyDAGrZkI/"+a+"BiQ/ZaLI2U6lSZw/s400/tale+of+the+swamp+rat.jpg",
d+"04/tale-of-swamp-rat-by-carter-crocker.html",
b1+"SeyIkJzm53I/"+a+"Bnk/-AyOipVcKYQ/s400/virus-hunter-c-j-peters.jpg",
d+"04/virus-hunter-by-c-j-peters.html",
b3+"SZ2S9ralHRI/"+a+"BeQ/wXRRyeTHhoQ/s400/dead+and+gone.jpg",
d+"03/dead-gone-by-susan-beth-pfeffer.html",
b4+"SZ2SCT_rIkI/"+a+"BeA/_xR85ziLXfQ/s400/jenna_fox.jpeg",
d+"03/adoration-of-jenna-fox-by-mary-e.html",
b4+"SYiEosVDYHI/"+a+"BcU/SUoxyffxvlA/s400/atherton1.jpg",
d+"03/atherton-house-of-power-by-patrick.html",
b3+"SfDEHxoNCrI/"+a+"BpM/cgFcNMojZCc/s400/atherton-rivers-of-fire.jpeg",
d+"03/atherton-rivers-of-fire-by-patrick.html",
b2+"SZ2Sg3NHQ9I/"+a+"BeI/PfsYvh2C3BU/s400/the+beloved+dearly.jpg",
d+"03/beloved-dearly-by-doug-cooney.html",
b4+"SaQsn-NC3hI/"+a+"Be4/ehD-rtsznvU/s400/trigger.jpeg",
d+"04/trigger-by-susan-vaught.html",
b4+"ST6Xbid5_II/"+a+"BZQ/8lQwYW1G8j8/s400/butterflies.jpg",
d+"02/secret-rites-of-social-butterflies-by.html",
b4+"ST6SAM1H15I/"+a+"BX4/dG_LIkhMsAE/s400/sahara.jpg",
d+"01/sahara-special-by-esme-raji-codell.html",
b3+"SbklsZ6u4II/"+a+"Bgo/6JRDtzBxleg/s400/kira-kira.jpg",
d+"04/kira-kira-by-cynthia-kadohata.html",
b1+"SbkjfG8VHvI/"+a+"BgA/tSfshOl9W9w/s400/naomi+leon.jpg",
d+"04/becoming-naomi-leon-by-pam-munoz-ryan.html",
b1+"SYsgmbjCPfI/"+a+"BdY/F6lUJl88mlk/s400/normal.jpg",
d+"03/waiting-for-normal-by-leslie-connor.html",
b1+"SXYDZWEz4iI/"+a+"Baw/xWOFAth_Ct8/s400/n125719.jpg",
d+"03/ruby-holler-by-sharon-creech.html",
b3+"SekEEbP61lI/"+a+"Bm8/CFibY41BwoM/s400/mystery-third-lucretia-susan-runholt.jpeg",
d+"04/mystery-of-third-lucretia-by-susan.html",
b4+"SbkqxcSzNVI/"+a+"BhQ/fXGewNWCElY/s400/the%2Bslippery%2Bmap.jpg",
d+"04/slippery-map-by-ne-bode.html",
b3+"SbklTwB4JoI/"+a+"Bgg/sjRsWufCFRE/s400/london%2Beye%2Bmystery.JPG",
d+"04/london-eye-mystery-by-siobhan-dowd.html",
b1+"SbkkwGhR7OI/"+a+"BgY/XPHAyVo2PCY/s400/gossamer.jpg",
d+"04/gossamer-by-lois-lowry.html",
b3+"Sc5nb3JXkFI/"+a+"BjY/2f9oj1AiT1o/s400/mayflower-pilgrims-new-world-nathaniel-philbrick.jpeg",
d+"04/mayflower-and-pilgrims-of-new-world-by.html",
b4+"SbkkXYPzzFI/"+a+"BgQ/kCkEloa1HEE/s400/fall%2Bof%2Bthe%2Bamazing%2Bzalindas.jpg",
d+"04/sherlock-holmes-and-baker-street.html",
b4+"SaQtSdtIqEI/"+a+"BfA/4-Ea6DwtGSM/s400/the%2Blast%2Bholiday%2Bconcert.jpg",
d+"04/last-holiday-concert-by-andrew-clements.html",
b4+"SbkrhI9sXVI/"+a+"BhY/eemMPH01BfU/s400/snow%2Bfalling%2Bin%2Bspring.jpg",
d+"04/snow-falling-in-spring-moying-li.html",
b2+"ShAlo4qQeKI/"+a+"Bsw/NcID20qO0JE/s400/audrey-wait-robin-benway.jpeg",
d+"03/audrey-wait-by-robin-benway.html",
b2+"SaQrVAZPPCI/"+a+"Beo/Q5_x5BYak10/s400/terry%2Bpratchett.jpg",
d+"03/amazing-maurice-and-his-educated.html",
b2+"SYiDCgN1l3I/"+a+"Bb8/xBYghmofqlE/s400/9780312384180.jpg",
d+"03/candyfloss-by-jacqueline-wilson.html",
b4+"R-uxfOEqjzI/"+a+"AWE/uHLgCg6fxIw/s400/BC_0689828683.jpg",
e+"03/landry-news-by-andrew-clements.html",
b3+"R_TsSuEqkLI/"+a+"AZs/7kWO0St6aX8/s400/7222064.jpg",
e+"04/janitors-boy-by-andrew-clements.html",
b1+"SAS8EYq9woI/"+a+"AfU/L_y-c_ux9XA/s400/n183832.jpg",
e+"04/week-in-woods-by-andrew-clements.html",
b3+"SL_0m9gqypI/"+a+"AtA/WQHlxvINzVk/s400/n183818.jpg",
e+"09/things-not-seen-by-andrew-clements.html",
b1+"SPuZjlRNRwI/"+a+"A50/ZSZfcfHeo-4/s400/n183882.jpg",
e+"11/things-hoped-for-by-andrew-clements.html",
b4+"ShAzg8sGnwI/"+a+"Bs4/AW35nuqg0iw/s400/lost-found-andrew-clements.jpeg",
e+"12/lost-and-found-by-andrew-clements.html",
b3+"SXYAfrychTI/"+a+"BaY/a2JZSFJ1evM/s400/messenger.jpg",
d+"02/messenger-by-lois-lowry.html",
b1+"SXX_gfucVxI/"+a+"BaQ/gMQCnW1XSag/s400/the%2Bgiver.jpg",
d+"02/giver-by-lois-lowry.html",
b2+"SQYLlt1D6DI/"+a+"A7A/Uf37RXgavIE/s400/Lionboy.jpg",
e+"11/lionboy-by-zizou-corder.html",
b4+"SQYL_tIprbI/"+a+"A7I/BA5J61KIqmw/s400/Lionboy_The_Chase.jpg",
e+"11/lionboy-chase-by-zizou-corder.html",
b1+"SQYMffZjfpI/"+a+"A7Q/6sfiLm1UE4g/s400/Lionboy_The_Truth.jpg",
e+"11/lionboy-truth-by-zizou-corder.html",
b3+"ST6ZMPZm9zI/"+a+"BZw/T7MZnBLgSHU/s400/face-value.jpg",
d+"02/face-value-by-catherine-johnson.html",
b3+"ST6YUci1RXI/"+a+"BZg/NUiXIKS185Q/s400/zig-zag.jpg",
d+"02/zigzag-by-ellen-wittlinger.html",
b3+"ST6X7VF1lLI/"+a+"BZY/ZaUSFuXZjc4/s400/seekers.jpg",
d+"02/seekers-quest-begins-by-erin-hunter.html",
b1+"ST6W8GRIW3I/"+a+"BZI/Q-mx9olP7oU/s400/rex-zero.jpg",
d+"02/rex-zero-king-of-nothing-by-tim-wynne.html",
b2+"ST6WZImdNaI/"+a+"BZA/sFDM13RMAe8/s400/nim.JPG",
d+"02/nim-at-sea-by-wendy-orr.html",
b3+"ST6V_Fnu4GI/"+a+"BY4/88q8lRsuJ1s/s400/tulane.jpg",
d+"02/miraculous-journey-of-edward-tulane-by.html",
b4+"SYsQErxsMnI/"+a+"Bc8/f20Pq3k5Nbs/s400/ember.jpg",
e+"02/city-of-ember-by-jeanne-duprau-is.html",
b3+"SYsSB8UivhI/"+a+"BdE/hlcnU3pCvjM/s400/sparks.jpg",
e+"02/people-of-sparks-by-jeanne-duprau.html",
b3+"SYsT6zm27xI/"+a+"BdM/jUTtS8fyCKA/s400/yonwood.jpg",
e+"03/prophet-of-yonwood-by-jeanne-duprau.html",
b3+"SYsOTXk4UlI/"+a+"Bc0/3NYPL4oWr88/s400/darkhold.jpg",
d+"02/diamond-of-darkhold-by-jeanne-duprau.html",
b2+"ST6VeaO8UfI/"+a+"BYw/tzY_OROcKnc/s400/magee.jpg",
d+"02/maniac-magee-by-jerry-spinelli.html",
b3+"SYiDhooCmKI/"+a+"BcE/urv-wjRP9z4/s400/CharlieCover1964.gif",
d+"02/charlie-and-chocolate-factory-by-roald.html",
b1+"ST6UbeeD8DI/"+a+"BYg/QIWKv5y20uU/s400/kit.jpeg",
d+"02/kits-wilderness-by-david-almond.html",
b4+"ST6TZFzrmII/"+a+"BYQ/oz4zNw0DtuI/s400/stowaway.jpg",
d+"01/shackletons-stowaway-by-victoria.html",
b4+"ST6QwGbf-jI/"+a+"BXo/OeebAno_HI8/s400/mulberry.jpeg",
d+"01/project-mulberry-by-linda-sue-park.html",
b1+"ST6QIUoHaSI/"+a+"BXg/2_Zy0j0JRrc/s400/home.jpg",
d+"01/home-and-other-big-fat-lies-by-jill.html",
b1+"ST6Pkl-OgJI/"+a+"BXY/0TJy8H4SRPY/s400/hurricane.jpeg",
d+"01/hurricane-by-terry-trueman.html",
b2+"ST6O9LgRmrI/"+a+"BXQ/a1DWA7PDpBw/s400/go%2Bbig.jpeg",
d+"01/go-big-or-go-home-by-will-hobbs.html",
b1+"ST6OhRfvzhI/"+a+"BXI/7Vg_AKjjdUA/s400/evangeline.jpeg",
d+"01/evangeline-mudd-and-golden-haired-apes.html",
b2+"ST6MLzGKFSI/"+a+"BWw/6_y48PUqTaw/s400/way%2Bdown%2Bdeep.jpg",
d+"01/way-down-deep-by-ruth-white.html"
);

//Options
var widget_height = 400;
var key_support = true;

//First run the code to create the basic structure of the slideshow widget.
var downloaded_images = new Array();
var load_icon_img = new Image;
load_icon_img.src = 'http://lh3.ggpht.com/_bazwyKf2FDM/Sg9AqBGjVWI/AAAAAAAABsk/p-CkU7kRbXU/bigrotation2.gif';

//Get width of the parent element.
var our_root_node = document.getElementById("inkweaver_review_slideshow");
var available_width = our_root_node.parentNode.clientWidth;

//Now we know the available width so set out created container to that width.
our_root_node.style.width=available_width;
our_root_node.style.height=widget_height+"px";

//Okay, now that the root node, the parent container is created, fill it up with the inner objects.
var generated_code="<div id='load_icon' style='z-index: 3; position: absolute; display: block;'><img id='load_icon_img' /></div>";
generated_code+="<div id='book_slot_1' style='z-index: 2; visibility: hidden; display: block; position: absolute;'><a id='book_link_slot_1'><img id='book_img_slot_1' /></a></div>";
generated_code+="<div id='book_slot_2' style='z-index: 2; visibility: hidden; display: block; position: absolute;'><a id='book_link_slot_2'><img id='book_img_slot_2' /></a></div>";
generated_code+="<div id='book_slot_3' style='z-index: 2; visibility: hidden; position: absolute;'><a id='book_link_slot_3'><img id='book_img_slot_3' /></a></div>";
generated_code+="<div id='next_button' onmouseover='set_element_opacity(this,100)' onmouseout='set_element_opacity(this,30)' onclick='inkweaver_review_next();' style='z-index: 3; width: 79px; cursor: pointer; position: absolute; display: block;'><img src='http://sites.google.com/site/inkweaverblog/file-cabinet/RightArrow.png'/></div>";
generated_code+="<div id='prev_button' onmouseover='set_element_opacity(this,100)' onmouseout='set_element_opacity(this,30)' onclick='inkweaver_review_prev();' style='z-index: 3; width: 79px; cursor: pointer; position: absolute; display: block;'><img src='http://sites.google.com/site/inkweaverblog/file-cabinet/LeftArrow.png'/></div>";


our_root_node.innerHTML = generated_code;

set_element_opacity(document.getElementById("next_button"),30);
set_element_opacity(document.getElementById("prev_button"),30);
document.getElementById("next_button").style.top = (widget_height/2-35)+"px";
document.getElementById("prev_button").style.top = (widget_height/2-35)+"px";
document.getElementById("prev_button").style.left = "0px";
document.getElementById("next_button").style.left = (available_width-79)+"px";

document.getElementById("load_icon").style.left = (available_width/2-16)+"px";
document.getElementById("load_icon").style.top = (widget_height/2-16)+"px";
document.getElementById("load_icon_img").src = load_icon_img.src;

//Now set up the initial book slots.
function random_number(range)
{
return (Math.round(Math.random()*200000)%range);
}


var current_book_position = random_number(resources.length/2);
var current_intervals = new Array();
var moving=false;
var loading=false;

function set_element_opacity(element,value)
{
   element.style.opacity = value/100;
   element.style.filter = 'alpha(opacity = ' + (value) + ')';
}

function mover(what,where,start_op,finish_op)
{
    var current = document.getElementById(what).specialOffsetLeft;
    var current_op = document.getElementById(what).specialOpacity;

    current+=(where-current)/8;
    current_op+=(finish_op-current_op)/8;

    if(current+1>where & current-1<where)
    {
      current=where;
      document.getElementById(what).style.left = current+"px";
      set_element_opacity(document.getElementById(what),finish_op);
      if(finish_op==0)
      {
        document.getElementById(what).style.visibility = "hidden";
      }
      //Job is done, nothing more to do, no reason to set another timeout.
      moving-=1;
    }
    else
    {
       //Use the parameters
       set_element_opacity(document.getElementById(what),current_op);
       document.getElementById(what).style.left = current+"px";
       //Update the parameters.
       document.getElementById(what).specialOffsetLeft = current;
       document.getElementById(what).specialOpacity = current_op;

       setTimeout("mover('"+what+"',"+where+","+start_op+","+finish_op+");",10);  //Reset this job with a timeout so that it runs again.
    }
}

function move_to(what_to_move,where_to_move_it,start_opacity,finish_opacity)
{
  document.getElementById(what_to_move).specialOffsetLeft = document.getElementById(what_to_move).offsetLeft;
  document.getElementById(what_to_move).specialOpacity = start_opacity;
  setTimeout("mover('"+what_to_move+"',"+where_to_move_it+","+start_opacity+","+finish_opacity+");",10);
  moving+=1;
}

function image_request(place)
{
    var floor;
    var roof;
    if(place-3<0)
    {
      floor = 0;
    }
    else
    {
      floor = place-3;
    }
    if(roof+3>resources.length/2)
    {
       roof=resources.length/2;
    }
    else
    {
      roof=place+3;
    }
    for(var img=floor; img<roof; img++)
    {
      downloaded_images[img] = new Image();
      downloaded_images[img].request_flag=true;
      downloaded_images[img].src = resources[img*2];      
    }
}

function process_slot(slot_number,resource_number,type,vis,start_op,finish_op,anim)
{
    var book_img = document.getElementById('book_img_slot_'+slot_number);
    var current_width;
    var current_height;
   // window.alert("Inside routine.");
    if(resource_number==undefined)
    {
       //window.alert("Undefined resource number.");
       current_width = book_img.clientWidth;
       current_height = book_img.clientHeight;
    }
    else if(!(resource_number<0 | resource_number>resources.length/2-1))  //Do we want the resource set or loaded?
    {
        if(downloaded_images[resource_number]==undefined||downloaded_images[resource_number].complete==false)
        {
          //This image has not yet been downloaded, so wait for it to download the repeat this request.
          if(slot_number==2)
          {
            //Only need to show spinning load icon and set load flag if it is the visible middle image that hasn't
            //yet loaded.
            document.getElementById('load_icon').style.display = 'block';
            loading=true;
          }
          document.getElementById('book_slot_'+slot_number).style.visibility = 'hidden';
          image_request(resource_number);  //Issue a request to load this area of the resource index.
          //Set a timeout to check for the completion of this load.
          setTimeout("process_slot("+slot_number+","+resource_number+",'"+type+"','"+vis+"',"+start_op+","+finish_op+","+anim+");",200);
          return;
        }
        else
        {
            //Make sure images for this area are loaded in the background before we get to them.
            image_request(resource_number);  //Issue a request to load this area of the resource index.
            if(slot_number==2)
            {
              //If middle image is visible and loaded then don't show the spinning ajax load icon.
              document.getElementById('load_icon').style.display = 'none';
              loading = false;
            }
            book_img.src = downloaded_images[resource_number].src;
            document.getElementById('book_link_slot_'+slot_number).href = resources[(resource_number*2)+1];

            //Redimension the image.
            current_width = downloaded_images[resource_number].width;
            current_height = downloaded_images[resource_number].height;

            ratio = widget_height / current_height;
            current_height = current_height * ratio;
            current_width = current_width * ratio;

            book_img.style.width = current_width+"px";
            book_img.style.height = current_height+"px";
            //window.alert("Set inside: "+current_width);
        }
    }
    else if(resource_number<=-1)
    {
       process_slot(slot_number,(resources.length/2)-1,type,vis,start_op,finish_op,anim);
       return;
    }
    else if(resource_number>=(resources.length/2))
    {
       process_slot(slot_number,0,type,vis,start_op,finish_op,anim);
       return;
    }

    //Now set the image's position
    if(type=="center")
    {
       //window.alert("Image width: "+current_width);
       if(anim==true)
       {
         move_to('book_slot_'+slot_number,((available_width/2)-(current_width/2)),start_op,finish_op);
       }
       else
       {
         document.getElementById('book_slot_'+slot_number).style.left = ((available_width/2)-(current_width/2))+"px";
       }
       document.getElementById('book_slot_'+slot_number).style.visibility = vis;
    }
    else if(type=="left")
    {
       if(anim==true)
       {
         move_to('book_slot_'+slot_number,0-current_width,start_op,finish_op);
       }
       else
       {
         document.getElementById('book_slot_'+slot_number).style.left = (0-current_width)+"px";
       }
       document.getElementById('book_slot_'+slot_number).style.visibility = vis;
    }
    else if(type=="right")
    {
       if(anim==true)
       {
         move_to('book_slot_'+slot_number,(available_width),start_op,finish_op);
       }
       else
       {
         document.getElementById('book_slot_'+slot_number).style.left = (available_width)+"px";
       }
       document.getElementById('book_slot_'+slot_number).style.visibility = vis;
    }
   // window.alert("Leaving routine.");
}

var current_order = new Array(
1,
2,
3
);

function move_slots(type)
{
  var save;
  if(type=="initial")
  {
    process_slot(1,current_book_position-1,"left","hidden",0,0,false);
    process_slot(2,current_book_position,"center","visible",100,100,false);
    process_slot(3,current_book_position+1,"right","hidden",0,0,false);
  }
  if(type=="refresh")
  {
    process_slot(1,current_book_position-1,"left","hidden",0,0,false);
    process_slot(2,current_book_position,"center","hidden",0,0,false);
    process_slot(3,current_book_position+1,"right","hidden",0,0,false);
  }
  else if(type=="right")
  {
    process_slot(current_order[1],undefined,"right","visible",100,0,true);  //Don't change image on middle slot but move it to the right.
    process_slot(current_order[0],undefined,"center","visible",0,100,true); //Don't change image on left slot but move it to the center.
    process_slot(current_order[2],current_book_position-1,"left","hidden",0,0,false);  //Change image of old right slot to the image of the new left slot
                                                                 //Also move slot to the left side.
    //Now reorder order array.
    save = current_order[2];
    current_order[2]=current_order[1];
    current_order[1]=current_order[0];
    current_order[0]=save;
  }
  else if(type=="left")
  {
    process_slot(current_order[1],undefined,"left","visible",100,0,true);  //Don't change image on middle slot but move it to the right.
    process_slot(current_order[2],undefined,"center","visible",0,100,true); //Don't change image on right slot but move it to the center.
    process_slot(current_order[0],current_book_position+1,"right","hidden",0,0,false);  //Change image of old left slot to the image of the new right slot
                                                                 //Also move slot to the right side.
    //Now reorder order array.
    save = current_order[0];
    current_order[0]=current_order[1];
    current_order[1]=current_order[2];
    current_order[2]=save;
  }
}

function inkweaver_review_next()
{
   if(!moving&&!loading)
   {
       current_book_position+=1;
       if(current_book_position>(resources.length/2)-1)
       {
          current_book_position=0;
          move_slots("left")
       }
       else
       {
          move_slots("left");
       }
   }
}

function inkweaver_review_prev()
{
   if(!moving&&!loading)
   {
       current_book_position-=1;
       if(current_book_position<0)
       {
          current_book_position=(resources.length/2)-1;
          move_slots("right")
       }
       else
       {
          move_slots("right");
       }
   }
}

//Issue a load request.
loading = true;
image_request(current_book_position);
move_slots('initial');

 function book_slideshow_handler(e)
 {
 	var pressedKey;
 	if (document.all)	{ e = window.event; }
 	if (document.layers || e.which) { pressedKey = e.which; }
 	if (document.all)	{ pressedKey = e.keyCode; }
 	if(pressedKey==37)
    {
       set_element_opacity(document.getElementById("prev_button"),100);
       setTimeout('set_element_opacity(document.getElementById("prev_button"),30);',200);
       inkweaver_review_prev();
       e.preventDefault();
       e.stopPropagation();
    }
    else if(pressedKey==39)
    {
       set_element_opacity(document.getElementById("next_button"),100);
       setTimeout('set_element_opacity(document.getElementById("next_button"),30);',200);
       inkweaver_review_next();
       e.preventDefault();
       e.stopPropagation();
    }
    return true;
 }
 if(key_support)
 {
   document.onkeydown = book_slideshow_handler;
 }

In short what I am trying to say is that you may very well find creating a widget to be an extremely difficult task. If I were you I would first try to find a pre-built widget that is already available and then if that still doesn't satisfy you go out and buy a couple HTML, CSS, and JavaScript reference books and start learning.

[corcor]

W3Schools Online Web Tutorials has some online tutorials on html, xml, and css

it'd be a free and easy place to start, although I'm sure a reference book would come in handy

[Nathan]

Yes W3Schools is one of the best online tutorial collections. However, personally I'm the type of person that likes to have a physical book to put on my desk beside my laptop. Also most books are also going to be better than W3Schools because W3Schools pretty much just gives you the basic building block ingredients whereas book usually help you put those building blogs together.

[MexicansStareAtMe]

Any way I could use existing code from widgets I like and edit that with my own images?

I think I made a widget about a year ago...I just can't remember haha!

Thanks for the help!

Oh and I'm also looking for ways that fans of my blog can embed my widgets. Please forgive my ignorance. I'm a first time "blogger"

[MexicansStareAtMe]

Originally Posted by annalaurabrown

Well from what I understand the process is more complicated than it may seem. I recommend googling for info if you really want to do it but honestly there are so many great ones out there why not just use what is already there.

You have a good point

[Nathan]

Originally Posted by MexicansStareAtMe

Any way I could use existing code from widgets I like and edit that with my own images?

I think I made a widget about a year ago...I just can't remember haha!

Thanks for the help!

Oh and I'm also looking for ways that fans of my blog can embed my widgets. Please forgive my ignorance. I'm a first time "blogger"

Oh I see, you are trying to make a widget for your blog so that other bloggers can embed it on their blogs?

There are tools to make that kind of thing for you. Try http://widgetbox.com

They'll make a "custom" widget for you for free. You just might have to deal with a few ads.

[MexicansStareAtMe]

Originally Posted by Nathan

Oh I see, you are trying to make a widget for your blog so that other bloggers can embed it on their blogs?

There are tools to make that kind of thing for you. Try Widgetbox › World's best place to find and make web widgets

They'll make a "custom" widget for you for free. You just might have to deal with a few ads.

Awesome, thank you!

[Nathan]

No problem. I found them a while back.

I've actually experimented with making my own widget for my blog, but I chose a different path.

I made a dashboard widget for Mac OS X:

Words Only Clock Widget for Mac OS X Dashboard - Experiment Garden