CSS Widget Designer is a straight forward simple tool for designing your widgets using CSS. Its easy, fast and very useful in checking and rectifying your designs. Many of my widgets shared on this blog are created using this tool. I can easy change the colors, add stuff like HTML and all the scripts sort of thing and can easily preview how they are going to look on my blog and reader’s blog who are going to implement this script. Now you are not only restricted till the CSS based widgets but this tool can also be used to check your scripts. For example just copy and paste below script into the yellow box and press the PREVIEW button below the box and you will see how the script has been loaded onto the white canvas on the right.
<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">body{background:#f5465a;padding-bottom:150px}</style><img style="position:fixed;z-index:9999;top:0;left:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEJiR_qRxvzLvOXwbqTgjMSTwkLUKV0AYybdXaNtM6nTTwOuHhDY41Fd3O1pmlZVEvFzNAvbcaHMX_0cn9yIKgXKhxp5P4yvn-_ViStpoxk0EuLzja_7LhGqZrr2GRE-_QlEbr7PhQ3IQ/s150/top-left.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgltUMdzrtVMTiA7sykVheEUPOFAa2zQk7xsn0a9TIHEAfQ_6jonUDMq1TtYEnj1TQC-48qP5VNMiRj3Hn0gl5J7zDH84tCj-bK_mDJcCCxEehhcp-cnwc3mRs6ryjxu40dg5Nu_TB2poc/s150/top-right.png"/><div style="position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:104px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpKaz_tuC-5s3X3BOkPt3sbUnnFIZFKT1tGByVHhkrWQfOWuYtCq8A_xxRDxkEkcahgNsEmbpFlyudlqGydWOfs0NWC30tt4Pr10r597ezIPRqwgXnw8tADvI1Rpc3SxNVetS93OKL4wQ/s1600/footer.png) repeat-x bottom left;"></div><img style="position:fixed;z-index:9999;bottom:30px;left:30px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeIcXW9_us-hc0YBBAWegPc_3ZHhnKCu4HZ3_wTDLeT92QyJII0JCnIr8ZtI-DKdAb3OICWmjPOT4-qK_WrWtuDttu5bBYlfQ-FQfEBIDdxLJnESj8ThB1HvPbiTVb5atbbNieMEKW34w/s180/bottom-left.png"/>');var no=100;var hidesnowtime=0;var snowdistance='pageheight';var ie4up=(document.all)?1:0;var ns6up=(document.getElementById&&!document.all)?1:0;function iecompattest(){return(document.compatMode&&document.compatMode!='BackCompat')?document.documentElement:document.body}var dx,xp,yp;var am,stx,sty;var i,doc_width=800,doc_height=600;if(ns6up){doc_width=self.innerWidth;doc_height=self.innerHeight}else if(ie4up){doc_width=iecompattest().clientWidth;doc_height=iecompattest().clientHeight}dx=new Array();xp=new Array();yp=new Array();am=new Array();stx=new Array();sty=new Array();for(i=0;i<no;++i){dx[i]=0;xp[i]=Math.random()*(doc_width-50);yp[i]=Math.random()*doc_height;am[i]=Math.random()*20;stx[i]=0.02+Math.random()/10; sty[i]=0.7+Math.random();if(ie4up||ns6up){document.write('<div id="dot'+i+'" style="POSITION:absolute;Z-INDEX:'+i+';VISIBILITY:visible;TOP:15px;LEFT:15px;"><span style="font-size:18px;color:#fff">*</span><\/div>')}}function snowIE_NS6(){doc_width=ns6up?window.innerWidth-10:iecompattest().clientWidth-10;doc_height=(window.innerHeight&&snowdistance=='windowheight')?window.innerHeight:(ie4up&&snowdistance=='windowheight')?iecompattest().clientHeight:(ie4up&&!window.opera&&snowdistance=='pageheight')?iecompattest().scrollHeight:iecompattest().offsetHeight;for(i=0;i<no;++i){yp[i]+=sty[i];if(yp[i]>doc_height-50){xp[i]=Math.random()*(doc_width-am[i]-30);yp[i]=0;stx[i]=0.02+Math.random()/10;sty[i]=0.7+Math.random()}dx[i]+=stx[i];document.getElementById('dot'+i).style.top=yp[i]+'px';document.getElementById('dot'+i).style.left=xp[i]+am[i]*Math.sin(dx[i])+'px'}snowtimer=setTimeout('snowIE_NS6()',10)}function hidesnow(){if(window.snowtimer){clearTimeout(snowtimer)}for(i=0;i<no;i++)document.getElementById('dot'+i).style.visibility='hidden'}if(ie4up||ns6up){snowIE_NS6();if(hidesnowtime>0)setTimeout('hidesnow()',hidesnowtime*1000)}
//]]>
</script>
So now now get it how this Editor works. Apart from that as the yellow box is showing, if you want to edit your CSS widgets, simply enclose your CSS Codes in <style> </style> tags and then paste the supporting HTML. I will be adding a supporting video explaining the whole process on how you easily use this CSS Widget Designer and Script Editor to create awesome widgets for blogger.