tag:blogger.com,1999:blog-5497787979177318898.post-89881074746786794372008-03-28T10:58:00.007+02:002008-03-28T11:49:44.032+02:00Hey guys, today we will add docking boxes hack for blogger using some CSS and javascript codes before adding this feature you can check demos of this hack on <a href="http://oz-featherlight.blogspot.com/">featherlight blogger template</a> and<a href="http://oz-bigblue.blogspot.com/"> cooking blogger template</a> , i tested this blogger widget on 2 different platforms which are Firefox and Internet Explorer and hack works well , adding this feature to blogger is as easy as posting an article all you need to do is ;<br /><span class="fullpost"><br /><ol><li>Go to edit html from your dashboard</li><li>Leave widgets <span style="font-weight: bold;">NOT</span> expanded</li><li>Find the lines below and paste code :</li></ol>Find the code below and paste <a href="http://goasou.googlepages.com/dbx.css.txt">this css codes</a> , <span style="font-weight: bold;">ABOVE THE CODE</span><br /><blockquote><br /><span style="color: rgb(204, 102, 0);">paste codes here</span><br /><br /><span style="color: rgb(255, 0, 0);">]]&gt;&lt;/b:skin&gt;<br /></span></blockquote><br /><ol><li>Now we need to paste<a href="http://goasou.googlepages.com/dbx-js.txt"> javascript codes</a> <span style="font-weight: bold;">below this line</span></li></ol><blockquote><br /><span style="color: rgb(255, 0, 0);">]]&gt;&lt;/b:skin&gt;</span><br /><span class="fullpost"><br /></span><span style="color: rgb(204, 102, 0);">paste codes here</span><br /><span class="fullpost"><br /></span></blockquote><br /><br />Now find your widgets , there must be a line <span style="font-weight: bold;">above your widgets</span> like this :<br /><blockquote><br /><span style="color: rgb(255, 0, 0);">&lt;b:section class='main' id='main' showaddelement='yes'&gt;</span><br /></blockquote><br />Now change class='main' with <span style="font-weight: bold;">class='dbx-box'<br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp0.blogger.com/_sF9F5_nDfgc/R-y4KghMtSI/AAAAAAAAAcs/aLeta9UCdSg/s1600-h/ddds.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://bp0.blogger.com/_sF9F5_nDfgc/R-y4KghMtSI/AAAAAAAAAcs/aLeta9UCdSg/s400/ddds.JPG" alt="" id="BLOGGER_PHOTO_ID_5182719761863980322" border="0" /></a><br /><br />Refresh your page and test it , if it does not work try to change <span style="font-weight: bold;">class='dbx-box'</span> TO <span style="font-weight: bold;">class='dbx-group'</span><br /><br />Thats all .<br /></span><br />Do not forget to <a href="http://feeds.feedburner.com/webmasterlaboratory"><b>subscribe</b></a> for latest articles!Gosunoreply@blogger.com