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