About Me

Sunil Bhaskar
View my complete profile
Friday, July 9, 2010
A few months back Techie Blogger came up with Blogger Subscription Box Widget with custom CSS,which was a promising widget for blogger(which Wordpress had ages befoer blogger made it available).It offered a whole new way of subscribing to the blogs by spicing up its appearance.But then Feedburner changed a few settings including changes in Feed verification & also replacing the Feed Id with the Blog title and so on.Also a lot of people who tried to install this widget ran into issues where all they could find after the installation of the widget was the image i have displayed  in the left.Fianlly i have designed a html/Javascript widget for blogger which will add beauty & interactivity to the site.I have added a rollover effect over the Rss Feed Icon also.Copy the following code:
<style type="text/css" media="all">
@import "http://h1.ripway.com/sunilpisharath/subscribe.css";
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=PushedToDLimits" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','http://h1.ripway.com/sunilpisharath/Newspaper_Feed_add_128x1282.png',1)"><img src="http://h1.ripway.com/sunilpisharath/Newspaper_Feed_add_128x128.png" alt="Feed Me" name="Image1" width="90" height="80" border="0" id="Image1" /></a>
<div id="subscribe">
<a href="http://feeds.feedburner.com/PushedToDLimits" rel="nofollow"><img src="http://feeds.feedburner.com/~fc/PushedToDLimits?bg=99CCFF&amp;fg=444444&amp;anim=1" width="88" style="border:0px;" alt="Subscribe Now" height="26" /></a><br /><form id="subscribeform" action="http://feedburner.google.com/fb/a/mailverify?uri=PushedToDLimits" target="popupwindow" method="post" 'http://feedburner.google.com/fb/a/mailverify?uri=pushedtodlimits', 'popupwindow', 'scrollbars=yes,width=560,height=520');return true">
<div>
<input value="" class="subscribeinput" name="email" type="text" />
<input value="Home" name="url" type="hidden" /><input value="Pushed To D Limits" name="title" type="hidden" /><input value="en_US" name="loc" type="hidden" />
<input src="http://i263.photobucket.com/albums/ii150/mohamedrias/subscribesubmit.png" class="subscribesubmit" id="img3" type="image" />
</div></form></div><img src="http://h1.ripway.com/sunilpisharath/abr-2.jpg" name="img2" width="280" height="7" id="img2" />
<label for="a3_2" id="lab">Subscribe To My Feeds</label>;
After copying head over to Design>>Page Elements & then click on Add a gadget anywhere in thetemplate.Now select Html/Javascript and paste the code inside it.No need to give any title for this(might make the appearance bad).Now drag the widget & make it land on top of the BLog posts As shown below:
 I have designed this Subscription Box Widget to be placed just above the BLogger posts, so that it ensure's maximum display.I do hope that you have liked my work.Now Now as you can see i have marked certain areas in red lets take a look @ them:
1)http://feedburner.google.com/fb/a/mailverify?uri=PushedToDLimits:Replace the Push to D limits with your feed.Generally its your blog tite added together.
2) http://feeds.feedburner.com/~fc/PushedToDLimits?bg=99CCFF : Replace this with your feed icon.Can be found in the publicize tab.


                                              Guess thats it then.I don wanna touch the Css side , as it can be detrimental.So ill steer clear of it.Incase if you want me to teach you how to customize the css also(including the Rollover effects,then please provide me feedback.Hope you apprecioate my work by postin a few comments N givin me some credits.Ill be back with more and better gadgets for you.Till then Happy Bloggin.

Labels

Blogumulus by Roy Tanck and Amanda Fazani