Recent post widgets is can go a long way to enhance the usability and user friendliness of a website and blog theme. The attractive widget can help to driving more traffic to your blog and website. If you are using our older version of recent post widget then you must familiar with this widget. So today in this tutorial we are going to make a new recent post widget for videos blog and website, Which can make your website and blog theme more attractive and also better for browsing your latest posts. There is no better way to understand something than by seeing a live preview, So click on the link and see the demo.
Live Preview
How To Add It To Blogger Blog
- Go to blogger layout section
- Click Add A Gadget.
- In Add A Gadget window, select HTML/JavaScript .
- Copy the code below and paste it inside the content box.
- Save the gadget.
- Drag the gadget and reposition it where you want to show recent posts.
- Click Save button (top right hand corner).
<style>
#bp_recent {
width:320px;
padding: 5px;
color: #999;
font-size: 14px;
text-align:justify;
}
#bp_recent img {
width: 120px;
height: auto;
border: 8px solid rgba(255, 255, 255, 0.5) !important;
-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
box-shadow:1px 1px 1px rgba(0,0,0,0.2);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#bp_recent img:hover {
opacity: 0.5;
-webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px 1px rgba(0,0,0,0.2);
}
#bp_recent a{
margin-bottom: 10px!important;
}
</style>
<div id='bp_recent'></div>
<script type="text/javascript" src="http://yourjavascript.com/401413211131/recentposts-orig.js"></script>
<script style='text/javascript'>
var numberOfPosts = 8;
var showPostDate = false;
var showSummary = false;
var summaryLength = 0;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
var readMore = 'Read More';
</script>
<script src='http://www.mybloggertricks.org//feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
1. Simply replace the http://www.mybloger-tricks.com with your own blog address (Url) which is include "http://".
2. Widget comes with fixed width you can also edit width by changing following value (300 to 350 e.g.).
width: 320px;
Do you have any query regarding this tutorial on how to add recent posts widget to blogger? Post your queries via comment and we'll get back to you as soon as possible. I hope this tutorial has been of interest. Thank you everyone for reading and special thanks to bloggerplugins.org for his valuable help for making script. Make sure you browse the comments as some of them contain useful advice about how to make your widget customizable, how to reduce number of the posts even further the size of the recent post image, etc. If you don't want to miss any of our future updates? Subscribe to our rss feeds to get all our latest updates delivered directly to your email inbox.
After a long we are back again with a beautiful subscription box, If you aren’t building a email subscription widget, you’re missing significant opportunities to capture leads, build community, and create a sustainable way to communicate with those who are interested in what you have to say (and/or sell). Your subscriber is like diamond and it’s a resource you must develop, nurture and grow. It doesn’t matter what type of business or nonprofit work you are in or how big or small you are. You need to build your email subscription. But simply putting a newsletter sign-up form on your site isn’t the most effective thing you can do. It’s also about how you place it on your site, what tactics you use to drive subscribers and it’s a LOT about content… what you share and how you communicate with your email subscription list so that you provide them value. So today we sharing with you a subscription widget with elegant design we have used image for background and also use HTML5 required attribute and some eye caching CSS3 effects we hope you may like it.
