Automatically Featured posts+Related Post Widget with opacity Effect For Blogger

In This Post, i am going to give a tutorial on how to add the best and most beautiful featured posts With Realted Post widget for blogger which changes its opacity on mouse hover. As you can see, i have implemented this widget on my blog itself at the bottom. I just feel like you are eager of adding this featured posts with Realated Post widget on your blogger blog so you are still reading this post. So let me help you in implementing this widget on your blogger blog now.Just I tried to make you happy in this it will show your related post with featured post.I Think you Really Like it . :)

How It Works ?

1. Go to your Blogger dashboard -->  Template --> Edit Html.

2. Find ]]></b:skin> and add the following code just above it.

#habboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:;border:0px solid #333; padding:5px 5px;}#habboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }#habboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }#habboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }#habboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}#habboxes img:hover{border: 1px solid #c5c5c5; }.habbody img{float:left}.habbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}.habbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}.habbody h3 a:link,.habbody h3 a:visited{color:#2F97FF;}.habbody h3 a:hover{color:#c5c5c5}.habbody p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;}.Fadein3 img {filter:alpha(opacity=80);opacity: 0.8;border:0;}.Fadein3:hover img {filter:alpha(opacity=100);opacity: 1.0;border:0;}

   

3. Save your Template.

4. Now Go to Layout --> Add a gadget.

5. Choose Html / Javascript gadget and paste the following code inside it and save the gadget.

<div id='habboxes'><div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '><!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<!---~~~~~~~~~~~~~~~Hacking And Blogging Starts~~~~~~~~~~~~~-->

<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
<div class="related-posts-widget">
<!--  -->
loading..
</div>
<!--~~~~~~~~~Hacking And Blogging ends~~~~~~~--></div></div>

   

Need Help ??

I am sure the installation of this tweak wont trouble you a lot, if in case you needed help in changing the font colors on active, hover and visited modes then let me know. By default the visited link will turn black, unlinked and would also not rotate. Click any of your label links and see that page to check this effect.

But Stay Free And Ask Me About Problem !