You Are Here : Home » , » Sliding Recent Posts Widget for Blogger

Sliding Recent Posts Widget for Blogger

Hello and Welcome to my blog. These days I am sharing lots' of tricks for game. Today I have got time to share some widgets and tricks for Blogger users. In this post I will provide you a cool sliding recent posts widget for Blogger. It is awesome and easy to customize. You can use it for free and customize and change the design of recent posts widget according to your need. You all should be familiar with the recent post widget. If not than you should have to know that this widget will show some of the posts that you posted recently in your Blog. It will also pull up image thumbnails from your recent posts. Read below to know more about this sliding widget and its' special functions.

Sliding Recent Posts Widget for Blogger

As the title of this post suggests we are to talk about sliding widget for Blogger. By sliding I mean that all your recent post will keep sliding so that your users can keep track of your post which you have posted recently. In this widget I have also added a cool image effect so that the widget may not look boring to your users. You can also control the number of posts that will shown in the recent posts widget section. This widget is based on CSS and JavaScripts. Actually I have customized the recents posts with the help of CSS 3 to make it look good. And the function of JavaScript is to bring or pull recent posts from your blog. You can customize this widget according to your need. If you want to add this widget yourself after customizing it according to your need than you can download the Scripts and default CSS files used in creating this recent widget from here. All the files is available on ZIP file. In case you need help than follow the below given steps to add this in your Blogger blog. If you want to see a demo of this widget than look my recent posts widget in the right sidebar of my blog.

If you are not familiar with the HTML and how to add this recent posts widget in your Blog than follow some simple steps shown below to add this widget in your Blogger blog in a easy way. Now follow the following steps.
  • Sign in to your Blogger account and click on the blog title in which you want to add this sliding recent posts widget.
  • Now navigate to Layout page (Blogger > Blog Title > Layout).
  • After that click on add a gadget where you want to add this widget. After clicking add a gadget you will see a popup where lots of widget is shown. You will need to scroll until you found a widget named HTML/JavaScript. Click on plus sign which is located on the right side of it.
Sliding Recent Posts Widget for Blogger
  • After that you will see a new page where you will have to write a Title for this widget and below that you will need to add the HTML files that will show up your recent posts.
  • Now a title like Recent posts, New Posts etc. In the content add the few lines of code given below. To copy the code given below press "Copy Code from here" on the code box.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css" media="screen">
<!--
/* ========== Scrolling Recent Posts Widget Start ======== */
#HT-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 390px;
}
#HT-widget ul {
width: 290px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin-bottom: 5px;
}
#HT-widget li {
margin:5px;
padding:5px 5px 5px 15px !important;
text-indent:0px;
line-height:1.3em;
list-style:none;
display:block;
border-radius: 10px;
border-top:1px solid #e9e9e9;
border-left:1px solid #e9e9e9;
border-right:1px solid #e9e9e9;
border-bottom:1px solid #e9e9e9;
background: #f9f9f9;
color: #FF0000;
-moz-box-shadow: 0 1px 4px #bbb inset;
-webkit-box-shadow: 0 1px 4px #bbb inset;
-ms-box-shadow: 0 4px 4px #bbb inset;
box-shadow: 0 1px 4px #bbb inset;
}
#HT-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 14.4px;
font-family: Agency FB;
height: 14px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#HT-widget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#HT-widget 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);
}
#HT-widget img:hover {
opacity: 1;
-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 #292832, inset 0 0 20px #292832;
-moz-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;  rgba(0, 0, 0, .4);
-o-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Arial,verdana, sans-serif;
}
.spycomment {
overflow: hidden;
font-family: Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}
/* ========== Scrolling Recent Posts Widget Ends ======== */
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
imgr[1] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
imgr[2] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
imgr[3] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
imgr[4] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;   /* REPLACE TRUE WITH FALSE TO NOT SHOW DATE OF POST */
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 12;    /* NUMBER OF POSTS THAT WILL BE SHOW IN THE WIDGET */
home_page = "WRITE YOUR BLOG URL HERE";
limitspy=4;
intervalspy=4000;
</script>
<div id="HT-widget">
<script src='http://hackers-thiefs-recent-post-widget.googlecode.com/svn/svn/scr-ht.js' type='text/javascript'></script>
</div>

Note: You will need to replace "WRITE YOUR BLOG URL HERE" on line 130 in the above code with your blogs' webpage address. Don't forget to add trailing slash (/) after your home page (for eg. http://hackersthiefs.blogspot.com/). Now after writing your blog url you can save this widget. After adding this drag the widget from the layout page where you want this widget to show.
Great! You have just added a cool sliding recent posts widget in your blogger blog. Now you will want to change a little in this recent posts widget. I know it can be difficult for you to make a change in the widget if you are not familiar with programming. But don't worry! See below to know how to customize and make some changes in the widget to make it look awesome.
  1. By default, you will see date of post below the title in the recent posts widget. You know you can turn off to show post date. To turn it off look for "showPostDate = True" on line 124 in the above code and replace True with False to stop showing post date.
  2. As I have said you can control how many post it to be slide in the widget. By default you 12 recently posted posts will keep sliding in the widget. Now look for "numposts = 12" on line 129 in the above given code and change 12 with your desired number of posts.
  3. You can see in the recent posts widget that 4 out 12 posts is shown at a time. You can change four posts according to your need. Look for "limitspy=4" on line 131 in the above code and change 4 with your desired number of posts that is to be showed at a time.
  4. You can change the speed of sliding of this widget. By default 4 seconds. To change the the speed look for "intervalspy=4000" on line 132 in the above given code and change 4000 with your desired value. You should have to know that 1000 is equal to 1 second and vice virsa.
  5. You can also change the size of the image thumbnail that is shown in the sliding recent posts widget. By default width and height is set to 50 pixels. To change the width and height look for 'thumbwidth' and 'thumbheight' ob lines 117 and 118 in the above lines of code and change 50 with your desired thumbnail size.
  6. Look for "font-size: 14.4px" on line 40 in the above code and change 14.4 to the font size according to your need.
  7. Now you would also like to change the width of the recent posts widget. To change look for "width: 290px" on line 12 in the above lines of code and change 290 with your desired width of the widget.
  8. You can change the font family of title of posts in the recent posts widget. To change look for "font-family: Agency FB" on line 41 in the above code.
  9. By default image thumbnail is floating on the left side but you can make it float on right side. To change floating rule on this sliding recent posts widget look for "float: left" on line 48 and replace left with right to make the image to float on right side.
  10. If you have Jquery already installed in your Blogger Template than remove everything on line 1 of the above code.
That's all for the sliding recent posts widget for Blogger blogs. This widget for blogger is really awesome and easy to use. You can completely change the look of this sliding recent posts widget in the way you want it to look. I hope you you will like this cool widget in your Blogger blog. If you need any help you can drop a comment below. If you liked this widget than please take some time to share this to your friends by using the below socialize widget.

Ads by Google
If you enjoyed reading this article then please leave a comment or subscribe to our newsletter to get all the future posts delivered to your feed reader or you email desk.

No comments:

Leave a Reply

Welcome to SpicyTweaks.

Copyright © 2013-17 SpicyTweaks. All Rights Reserved.

Scroll to top