Thursday, November 29, 2012

Groom Floating Pro Social Bookmarking Widget for Blogger


As from the previous post related with bookmarking widget which liked by many visitors. So, today there is also a new and professional looking widget for blogger with shadow effect and mouse hover effect in the widget with blue groom widget. I give a name for it groom be'coz this is wedding season in India and today's my childhood friend will be a groom :-) and this wedding dress's color is same like this widget's blue background :-)

This widget is simply made by using the HTML CSS and some JavaScripts. We use JavaScript in this widget be'coz we have to make it float with scrolling down and scrolling up.






Add Groom Floating Widget

  • Login to Blogger > Dashboard
  • Click on Drop Down Menu and select Layout
  • Add a HTML/JavaScript Gadget
  • Paste below code in it. 


<link href="https://dl.dropbox.com/u/63968842/floting%20widget.css" rel="stylesheet" type="text/css" />

<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>



<div id="floatdiv">
<div id="sidebar">



<div id="rss"><a href="http://feeds.feedburner.com/WidgetGenerators" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rss','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSbt38kEQboScgxJpYyAV8fiCS1Th55rOvYuNAQyBmB-lvjf6CzUpRKgwNopBDoucVAfSrfECFiTX3D4JyKjvAhJRJc9cRWk-XEc7X-stQZNewKw0A0IPUpygzzWTWfqacXprADeYsW8gI/s1600/rss-front.png',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9rvVyceCruAz9yEFxPUzRbR10OtkomyaLR6KWMOHv6dFR7yzf5VdYijo9lfWMQlEr_eA3zV44bHzUoMFgBhNdRR37fVDIysrr1xCKrLQl4MH7NmksDhpWZhW2Py7Ci7Me2nZgNI6JYwgY/s1600/rss-back.png" alt="My RSS Feed" name="rss" width="48" height="48" border="0" id="rss2" /></a></div>

<div id="youtube"><a href="http://www.youtube.com/WidgetGenerators" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('you tube','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwpgXDsSnwKY0UaArnlPQ_H2WVjhkw3gFs_VwmHOD9SaW7HqBAjaTiEKGlmE0DZU3tw5NXtp1cUXL2nBEF1puQTfHsL-BJMFj-8kPVZTA1bgI9b88W59yErlD8GXQLsbpa3aJpt1CjYTy_/s1600/youtube-front.png',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78QUMJ1bZB8iVPrNueOce2uTQYQLL34h8HL72e3lxjFLAZ2M7K5l0M3twSGKgX-5f47tPUiO4krs8bkOpUweMD0rF-KWZJOo7oh7wVsoJ8U3Qo_0qFRSzFv0LwFy4wGni77JX3UtVV4tx/s1600/youtube-back.png" alt="My YouTube Channel" name="you tube" width="52" height="44" border="0" id="you tube" /></a></div>

<div id="twitter"><a href="http://www.twitter.com/WidgetGenerator" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('twitter','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiSpzcBWlwPlZkR9ki30AR2htdEI7MelXM6Tez-oTSxq0szV_m0S7rNQ4ry5FTX6LJZz8cFEIm9L76jN66bHfJOODjZ9rn5ICq_g7HQQmD-9wQLiudlj9d0OJhFfPGUdfhNslikI5kl0By/s1600/twitter-front.png',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCKYTKrEPG2mw3_ny-zDrMJOMHLaG9NBar9ji-j9Euz4JWDdUI4N7lVEZxgvncgeLDDd9r0Myq7NVyVOrmvy-oX-tQay_fp2tpIQxjNuXejTrTleDEPLrcpkhLa-kaeqEboc9jxcAAW0x_/s1600/twitter-back.png" alt="My Twitter Feed" name="twitter" width="53" height="53" border="0" id="twitter2" /></a></div>

<div id="contact"><a href="http://www.facebook.com/WidgetGenerators" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJEFksZsYIG2iZLSTELS9wkoI31nP7nj2tSvjBEGbJJ5mwYeXYXaNlkDrYoclDyLccDJ-UfP0FsRYWvqhE94KlXBZx7m8OgzHk5WQiKAKHFdh7gmwcLpkem99HqhDcuSzAKTmbKV4nZmzo/s1600/facebook-icon.png',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOGb8DuFxFtzRkAuUCFdEO0S5jc2J94bwEebJThGTZdyF3b3a9ISM7WvISc8AZ7aXRrEHLTtn4TyHHCX8TxWgsv0e9pSdwmL1Xc5s2tJnoWfn5qMIi_kdE2sOMBYTwgTtXeVMEBqQ4oF_u/s1600/facebook_icon.png" alt="Facebook" name="contact" width="42" height="41" border="0" id="contact2" /></a></div>


</div>
</div>
<script type="text/javascript" src="https://dl.dropbox.com/u/63968842/floting%20widget.js"></script>

  • Now Save Your Widget  and You are done.


Make Changes....!

  • Replace this text with your RSS username WidgetGenerators
  • Replace this text with your Youtube usename WidgetGenerators
  • Replace this text with your Twitter username WidgetGenerator
  • Replace this text with your Facebook username WidgetGenerators



If any Problem Comes, Ask in Comments

0 comments:

Post a Comment