Writing the quality posts and engaging users with the content available on website is the key of success in blogging platforms. There are lots of tricks to achieve these goals. Here I am going to post one of the way which will surely engage your users with content available on website using animated recent post widget with thumbnails!
.png "Animated recent post widget with thumbnail for blogger")
1. Log in to blogger dashboard!
2. Navigate to "Layout" section of your blog.
.png "Animated recent post widget with thumbnail for blogger")
3. Click on "Add a Gadget". Select "HTML/JavaScript".
4. Copy down below code (Press Ctrl+A to select entire code)
5. paste into "HTML/JavaScript" section. Enter any title line "Recent Posts". Click on "Save".
6. Done now check out your block whether it's working or not!
.png)
Animated recent post widget with thumbnail for blogger
Demo
Steps you have to perform
2. Navigate to "Layout" section of your blog.
3. Click on "Add a Gadget". Select "HTML/JavaScript".
4. Copy down below code (Press Ctrl+A to select entire code)<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<body>
<style type="text/css" media="screen">
#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://lh6.googleusercontent.com/-A6a829gqfDQ/T-3xppy6MlI/AAAAAAAACFE/RrOao4P11Uk/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;
}
/* -------Animated Scrolling Recent Posts Widget By FunWithTricks.Com------ */
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[1] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[2] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[3] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[4] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.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.funwithtricks.com/";
limitspy=7;
intervalspy=3000
</script>
<div id="spylist">
<script src='https://googledrive.com/host/0B_1mqJd2tC8qLUJMTGZqTE1qTUU' type='text/javascript'></script>
</div>
<a href="http://www.funwithtricks.com/2013/12/animated-recent-post-widget-for-blogger.html" target="_blank">Get this widget!</a>
5. paste into "HTML/JavaScript" section. Enter any title line "Recent Posts". Click on "Save".
Customization
- Change http://www.funwithtricks.com/ with your blog address.
- Change the value in numposts = 12 with the number of posts that will be shown in one rotation.
- Change the value in limitspy=7 with the number that you want to show in one time.
- Modify width according to your needs.
Troubleshooting
- Thumbnails are not displaying according to posts
.png)
- Scrolling effect is not working
1 comments:
thanks You are great bro..........
ReplyPost a Comment
You are always welcome to leave valuable feedback!