Tuesday, October 8, 2013

How to add a Recent Posts Widget with Thumbnails to your blogger blog

If you want to get your readers to read more of your posts and navigate through your blog contents, then this is the best widget to use when it comes to Recent Posts on your Blog. I found out that with this widget my readers where able to navigate through my posts very easily. This widget is very attractive and eye-catching. It has a custom loading effect too which makes the widget much more awesome. So if you want the same to happen to yours then just follow this simple instructions I am about to share below.

1. Log in to blogger
2. Go to blogger dashboard
3. Go to the layout section
4. Press on Add widget
5. Choose the HTML/JavaScript option
6. You may choose to name the widget or leave it blank, its your option
7. Paste the code below into the given widget

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('http://4.bp.blogspot.com/-0E2ZARxMyAo/UZwiR3XjlvI/AAAAAAAAKDc/3Z8WjltqbCQ/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}
#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
#post-gallery .rp-item 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);}
#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle     = "Recent Posts",       // Widget Title
    numposts    = 14,      // Number of Posts to show
    numchar     = 200,      // Number of Characters to be displayed
    rcFadeSpeed = 600,      // Speed
    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // If No Image
    blogURL     = "http://www.lifechangingproject.blogspot.com/";       // Your Blog URL
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-posts.js" type="text/javascript"></script>

8. Before you can save the widget rename the followings
    a. widget title
    b. Number of posts to show
    c. Your Blog Url
9. Now you can save it.
10. Once you have saved it, just arrangements and drag it to the bottom of the posts widget and save it there.
11. save and preview, and your good to go, enjoy it!

Check the example below this post and you will see it.


Post a Comment

Twitter Delicious Facebook Digg Favorites More