Recent Articles or post are necessary part of every blog. We mostly use this gadget on blog to show latest updates which also helps to increase visitor and views on latest posts. So here is an amazing gadget about recent post. This recent post gadget is totally different from simple or default style gadget just because of its impressive look and amazing feature. This widget is scrolling feature and also with rotating thumbnail on mouse hover effect. Due to scrolling feature they also show different latest post one by one in Fb ticker style. So if you want to use this gadget must follow below given steps
How To Add Scrolling Recent Post Gadget
- Open Your Blogger Dashboard >> Then go to Template section
- Now click on the Button Edit HTML in template section
- Now Click in coding box and search by Ctrl+F for code </head>
- After searching above code then paste below given codes just above </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
- After Pasting click on save Button
- Now Open Layout Section from menu
- Click on Add Gadget Button
- Now Open HTML/JavaScript box
- Paste below codes in gadget box.
<style type="text/css" media="screen">
<!--
/* ==== Scrolling Recent Posts Widget By SafeTricks.Net ===== */
#spylist {
overflow:hidden;
margin-top:4px;
padding:0px 0px;
height:400px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:295px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:85px;
overflow: hidden;
background: #000
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtQ4KTBuTUBJHaLFYfdrROYcEOPs_mTEs6tZKhMMlP8nzAB6iqw-i_Ckm9GLXmKhZEAzjHez2LQepjAxjZ6G9UTBOFEvEqUIu5p84vvWLyWmMsozWdlAPFfrYkIfVUJfRL-rCzQu0DF-U/s1600/helperblogger.com-post.jpg)
repeat-x;
border: 1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#000;
font-size:12px;
height:17px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#f4eeee;
border:0;
}
#spylist img { float: left; margin-top: 10px; margin-right: 15px; background: #EFEFEF; border: 0; }
#spylist img {
-webkit-transition:
all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s
ease; padding: 4px; background: #eee; background:
-webkit-gradient(linear, left top, left bottom, from(#eee),
color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background:
-moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px
rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#spylist img:hover {
-moz-transform:
scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2)
rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2)
rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0
20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4),
inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px
rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
.spydate{
overflow:hidden;
font-size:11px;
color:#007cb5;
padding: 3px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:9px;
color:#272b2e;
padding:2px 0px;
margin:0px 0px;
}
/* ==== Scrolling Recent Posts Widget By SafeTricks.Net ===== */
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";
imgr[1] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";
imgr[2] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";
imgr[3] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";
imgr[4] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";
showRandomImg = true;
boxwidth = 300;
cellspacing = 5;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 69;
thumbheight = 72;
fntsize = 13;
acolor = "#555";
aBold = false;
icon = " ";
text = "comments";
showPostDate =true;
summaryPost = 39;
summaryFontsize = 9;
summaryColor = "#555";
icon2 = " ";
numposts = 12;
home_page = "http://www.safetricks.net/";
limitspy=7;
intervalspy=3000
</script>
<div id="spylist">
<script src='https://googledrive.com/host/0B_1mqJd2tC8qLUJMTGZqTE1qTUU' type='text/javascript'></script>
</div>- Now replace http://www.safetricks.net/ link with your blog link
- After replacing you can also do some manual changes if you want like increase number or post or scroll speed.
- Now click on save button.
Open your blog and see this gadget working and i hope you like this gadget and also don't forget to share it with others. If you have any problem while implementation feel free to leave your comment.
0 Comments