Add Digg Top News Widget With Jquery Hover Effect

In my previous posts I have shown the way to add facebook like box,twitter followers box and google plus add to circle widget with jquery hover effect.If you not seen them read it here.

Add Google Plus Add To Circle Widget With Jquery Hover effect
Statick popout twitter followers box with hover effect 

Static popout facebook fanpage like box with hover effect for your blog

In this post I'm going to show the way to add digg top news widget with jquery hover effect

First log in to your blogger account and go to design>>edit html
Now press ctrl+f and search for </head> tag
Copy the below code and paste it just above </head> tag

<style> /* dude, this plugin by freddie@kakinetwork.com */ img, a { border: 0; } #on {visibility:visible;} #off {visibility:hidden;} #anywidget_div {width:196px;height: 353px;overflow: hidden;} /* right side style */ #anywidget_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;right: -200px;} #anywidget_right img {position: absolute;top: -2px;left: -35px;} #anywidget_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;} /* left side style */ #anywidget_left{z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;left: -200px;} #anywidget_left img {position: absolute;top: -2px;right: -35px;} #anywidget_left iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;right:-2px;top:-3px;} .box-title1 { border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-shadow: 5px 5px 5px #CCCCCC; padding:10px; margin: 10px 0; } .enteryouremail{ background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin:0px; } .submitbutton{ background:#F66303; border: 1px solid #F66303; text-shadow: 1px 1px 1px #333; box-shadow: 3px 3px 3px #666; font:bold 12px Arial, sans-serif; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function(){ jQuery(&quot;#anywidget_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#anywidget_right&quot;).stop(true,false).animate({right: -200}, 500); }); }); </script>

Now save your template and go back to design
Click on add a gadget and select html javascript.
Paste below code on it.

<div id="on">
    <div id="anywidget_right" style="top: 18%;">
        <div id="anywidget_div">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimI9VsTqd-u8W2pS1KdcDyaEhmU012nXisgZgFj-dsn8fqw8trJc8XpM63f2SAd0Tby1ah_h3wdxzBKpyiRB2AtfmEz6JOf1XPqUrr9hy-iyAWS2zEJ7sdqsa4Q4jJyyoCmLO-T9kL7K4/s1600/digg.png" alt="" />

<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#848484;" href="http://www.tech-cave.com/2012/01/add-google-plus-add-to-circle-widget.html">Get This</a></p>


<div id="digg-widget-1328709961080">
<a href="http://digg.com/all">See more top stories on Digg.com</a>
</div>
<script type="text/javascript">
(function() { var s, s1, diggWidget = {id: "digg-widget-1328709961080", layout: 1, colors: {hdrBg: "#1b5790", hdrTxt: "#b3daff", tabBg: "#4684be", tabTxt: "#b3daff", tabOnTxt: "#d41717", bdyBg: "#fff", stryBrdr: "#ddd", lnk: "#105cb6", descTxt: "#999999", subHd: "#999999"}, title: "Top Stories", width: 300, requests: [{t: "Top", p: {count: "5", method: "story.getTop", container: ""}}], hide: {}}; if (window.DiggWidget) { if (typeof DiggWidget == 'function') { new DiggWidget(diggWidget); } else { DiggWidget.push(diggWidget); } } else { DiggWidget = [diggWidget]; s = document.createElement('SCRIPT'); s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/widgets.js'; s1 = document.getElementsByTagName('SCRIPT')[0]; s1.parentNode.insertBefore(s, s1); } })();
</script>


        </div>
    </div>
</div>

Now save it.You are done.


If you got something.Don't forget to leave comment 

Posted in: Blogging