0
Recent Posts Widget for Blogger CSS Hover Effect with jQuery: How to Add Recent Posts Widget for Blogger CSS Hover Effect with jQuery to increase page views and give information to visitors about your new post. Recent Post Widget helps to increase page views and keep visitors to spend more time on your blog. This is a tutorial about How to add recent post widget for blogger with some text css hover effect. We provide you all css and jQuery code of Recent Post Widget to your blog or website. You can attract your visitors to spend more time on your blog and increase more page views. Its decrease your bounce rate and this is easy way to do this.



Recent Posts Widget for Blogger

Follow below steps to add Recent Posts Widget for Blogger CSS Hover Effect with jQuery:

Step 1

Login into your blogger account and Go to Blogger Dashboard. Go to Layout tab at left panel in your dashboard and click on Add a Gadget Link. See below picture for help.

Recent Posts Widget

Step 2

When you click on Add a Gadget Link a pop-up window will open with all available gadgets for blogger. Scroll down and select HTML/JavaScript gadget from list. See below picture for more help.

Recent Posts Widget for Blogger

Step 3

Select your style for recent post and paste below code into HTML/JavaScript box:

Style 1:

Recent Posts Widget Blogger


Recent Posts Widget
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"><script language="JavaScript">home_page = "http://www.haakblog.com//"; numposts = 5;imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="http://news91.in/public/recent-posts-min-1-ycode.js" type="text/javascript"/></script><link rel="stylesheet" type="text/css" href="http://news91.in/public/recent-posts-min-1.css" /></div><div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.haakblog.com/2014/10/recent-posts-widget-blogger-css-hover-effect-with-jquery.html" target="_blank" title="Recent Post Widget">Recent Post Widget</a> <a href="http://haaknews.in/" target="_blank">News</a></div>
Note: Change http://www.haakblog.com/ to your home page and if you change number of post than change 5 as your requirement.

Style 2:

Recent Posts Widget


Recent Posts Widget
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"><script language="JavaScript">home_page = "http://www.haakblog.com/"; numposts = 5;imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="http://news91.in/public/recent-posts-min-1-ycode.js" type="text/javascript"/></script><link rel="stylesheet" type="text/css" href="http://news91.in/public/recent-posts-min-4.css" /></div><div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.haakblog.com/2014/10/recent-posts-widget-blogger-css-hover-effect-with-jquery.html" target="_blank" title="Recent Post Widget">Recent Post Widget</a> <a href="http://haaknews.in/" target="_blank">News</a></div>
Note: Change http://www.haakblog.com/ to your home page and if you change number of post than change 5 as your requirement.

Style 3: 

Recent Posts Widget


Recent Posts Widget

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"><script language="JavaScript">home_page = "http://www.haakblog.com/"; numposts = 5;imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="
http://news91.in/public/recent-posts-min-1-ycode.js" type="text/javascript"/></script><link rel="stylesheet" type="text/css" href="http://news91.in/public/recent-posts-min-6.css" /></div><div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.haakblog.com/2014/10/recent-posts-widget-blogger-css-hover-effect-with-jquery.html" target="_blank" title="Recent Post Widget">Recent Post Widget</a> <a href="http://haaknews.in/" target="_blank">News</a></div>
Note: Change http://www.haakblog.com/ to your home page and if you change number of post than change 5 as your requirement.

Style 4:

Recent Posts Widget


Recent Posts Widget

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"><script language="JavaScript">home_page = "http://www.haakblog.com/"; numposts = 5;imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="http://news91.in/public/recent-posts-min-1-ycode.js" type="text/javascript"/></script><link rel="stylesheet" type="text/css" href="http://news91.in/public/recent-posts-min-10.css" /></div><div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.haakblog.com/2014/10/recent-posts-widget-blogger-css-hover-effect-with-jquery.html" target="_blank" title="Recent Post Widget">Recent Post Widget</a> <a href="http://haaknews.in/" target="_blank">News</a></div>
Note: Change http://www.haakblog.com/ to your home page and if you change number of post than change 5 as your requirement.

Style 5:

Recent Posts Widget for Blogger


Recent Posts Widget for Blogger

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"><script language="JavaScript">home_page = "http://www.haakblog.com/"; numposts = 5;imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="http://news91.in/public/recent-posts-min-1-ycode.js" type="text/javascript"/></script><link rel="stylesheet" type="text/css" href="http://news91.in/public/recent-posts-min-13.css" /></div><div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.haakblog.com/2014/10/recent-posts-widget-blogger-css-hover-effect-with-jquery.html" target="_blank" title="Recent Post Widget">Recent Post Widget</a> <a href="http://haaknews.in/" target="_blank">News</a></div>
Note: Change http://www.haakblog.com/ to your home page and if you change number of post than change 5 as your requirement. 

Post a Comment

 
Top