Tuesday, May 19, 2015

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 y... thumbnail 1 summary
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.


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.


Step 3

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

Style 1:


<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://usefbcover.com/public/recent-posts-min-1-ycode.js" type="text/javascript"/></script><link rel="stylesheet" type="text/css" href="http://usefbcover.com/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://www.haakblog.com/" target="_blank">Blogger</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:


<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://usefbcover.com/public/recent-posts-min-1-ycode.js" type="text/javascript"/></script><link rel="stylesheet" type="text/css" href="http://usefbcover.com/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://www.haakblog.com/" target="_blank">Blogger</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: 


<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://usefbcover.com/public/recent-posts-min-1-ycode.js" type="text/javascript"/></script><link rel="stylesheet" type="text/css" href="http://usefbcover.com/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://www.haakblog.com/" target="_blank">Blogger</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:


<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://usefbcover.com/public/recent-posts-min-1-ycode.js" type="text/javascript"/></script><link rel="stylesheet" type="text/css" href="http://usefbcover.com/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://www.haakblog.com/" target="_blank">Blogger</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:


<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://usefbcover.com/public/recent-posts-min-1-ycode.js" type="text/javascript"/></script><link rel="stylesheet" type="text/css" href="http://usefbcover.com/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://www.haakblog.com/" target="_blank">Blogger</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.

No comments

Post a Comment

Subscribe to: Post Comments (Atom)