Recent Posts Widget For Blogger andrey понедельник, 12 января 2015 г. No Comment

Here's how to add recent posts widget for blogger in your blog. You'll find different styles of the recent post widget in this post, which are all attractive and can easily get the attention of your readers. Thumbnails, post number and snippet of the latest post on your blog are displayed on this widget. The recent post widget helps in interlinking a blog's posts, thereby increasing the pageviews and at the same time reduce its bounce rate. Add this blogger widget to your blog with the steps below.

Also Read: Most Commented Posts Widget For Blogger
                   Customized Labels Cloud Widget For Blogger
                   Popular Post Widget With Hover Effect For Blogger

 How to Add Recent Posts Widget In Blogger Blogs

  • From your blogger dashboard,
  • Goto 'Layout'
  • Click on 'Add a Gadget'
  • Select 'HTML/Javasccript'
  • Copy any of the codes below for your preferred style into the text field.

Style 1






style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.detutor.com/2015/01/recent-posts-widget-for-blogger-blogs.html">Recent Posts Widget

href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>




Style 2



 id="recent-posts"> href="http://detutor.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"> alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/> href="http://detutor.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> alt="All Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%;"/> href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips"> alt="All Blogging Tips" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; left: 0%;"/> rel="stylesheet" type="text/css" href="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts-t/recent-posts-min-5.css" />



Style 3






style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.detutor.com/2015/01/recent-posts-widget-for-blogger-blogs.html" rel="nofollow">Recent Posts Widget

href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />


Style 4




 class="recentpoststyle">


style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.detutor.com/2015/01/recent-posts-widget-for-blogger-blogs.html" rel="nofollow">Recent Posts Widget




Style 5



 id="recent-posts"> href="http://detutor.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"> alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/> href="http://detutor.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> alt="All Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%;"/> href="http://detutor.com/" rel="dofollow" target="_blank" title="All Blogging Tips"> alt="Blogging Tips" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; left: 0%;"/> rel="stylesheet" type="text/css" href="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts-t/recent-posts-min-6.css" />




Also Read: Numbered Page Navigation Widget For Blogger Blogs
                   Social Media Follow and Subscription Widget For Blogger
                   Floating Social Share Button For Blogger

You can customise the code for your preferred style by changing the number of post to be displayed. Also, replace the 'YOURURL' in the code with your website's address.

  • Save the gadget.
Here's how to add recent posts widget for blogger in your blog. You'll find different styles of the recent post widget in this post, which are all attractive and can easily get the attention of your readers. Thumbnails, post number and snippet of the latest post on your blog are displayed on this widget. The recent post widget helps in interlinking a blog's posts, thereby increasing the pageviews and at the same time reduce its bounce rate. Add this blogger widget to your blog with the steps below.

Also Read: Most Commented Posts Widget For Blogger
                   Customized Labels Cloud Widget For Blogger
                   Popular Post Widget With Hover Effect For Blogger

 How to Add Recent Posts Widget In Blogger Blogs

  • From your blogger dashboard,
  • Goto 'Layout'
  • Click on 'Add a Gadget'
  • Select 'HTML/Javasccript'
  • Copy any of the codes below for your preferred style into the text field.

Style 1






style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.detutor.com/2015/01/recent-posts-widget-for-blogger-blogs.html">Recent Posts Widget

href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>




Style 2



 id="recent-posts"> href="http://detutor.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"> alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/> href="http://detutor.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> alt="All Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%;"/> href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips"> alt="All Blogging Tips" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; left: 0%;"/> rel="stylesheet" type="text/css" href="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts-t/recent-posts-min-5.css" />



Style 3






style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.detutor.com/2015/01/recent-posts-widget-for-blogger-blogs.html" rel="nofollow">Recent Posts Widget

href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />


Style 4




 class="recentpoststyle">


style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.detutor.com/2015/01/recent-posts-widget-for-blogger-blogs.html" rel="nofollow">Recent Posts Widget




Style 5



 id="recent-posts"> href="http://detutor.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"> alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/> href="http://detutor.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> alt="All Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%;"/> href="http://detutor.com/" rel="dofollow" target="_blank" title="All Blogging Tips"> alt="Blogging Tips" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; left: 0%;"/> rel="stylesheet" type="text/css" href="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts-t/recent-posts-min-6.css" />




Also Read: Numbered Page Navigation Widget For Blogger Blogs
                   Social Media Follow and Subscription Widget For Blogger
                   Floating Social Share Button For Blogger

You can customise the code for your preferred style by changing the number of post to be displayed. Also, replace the 'YOURURL' in the code with your website's address.

  • Save the gadget.
by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

No Comment

‹‹ Следующее Предыдущее ››