Recent Blog Posts Alongside Snippets In Addition To Thumbnails

  • Share

User engagement is i of the most indispensable affair to become a successful blogger. One of our clients asked us for adding recent posts widget to their blogger web log then that the live visitors may encounter the nigh recent blog posts inwards the blog sidebar from any webpage of their web log.

Actually, blogger does not supply a gadget for showing recent weblog posts on the sidebar and thus we take developed a dynamic too as responsive (adopts all devices) recent weblog posts widget for blogger users. One of the master features of this widget is that if your weblog posts does not incorporate whatsoever ikon then your may exhibit whatever icon or photograph including your weblog logo every bit recent web log posts thumbnail.

This widget may fetch recent weblog posts from whatsoever other blogger web log irrespective of your ownership or authorship. In other words, you lot may display latest posts from some other weblog to your own weblog amongst the helpof swtRBP widget.

Additionally, following options are available with the swtRBP (SuperWebTricks Recent Blog Posts) widget:

Option-1: You may demonstrate entirely recent weblog posts Titles
Option-2: You may display mail service titles amongst snippets/excerpts
Option-iii: You may decide how many recent posts to be shown upto 500.
Option-four: You may alter the characters displays every bit posts summary.
Option-v: You may demonstrate the Posts writer mention amongst the published appointment.

Recent-Blog-Posts

How to add Recent Posts Widget to your Blogger Blog

Step-one:

Login to your blogger account in addition to choose the blog in which you desire to add together swtRBP widget.

Step-ii:

Navigate the template tab of your web log and click on Edit HTML. Then click anywhere inwards the template editor in addition to you lot will run into a search box at the elevation correct corner of template HTML editor.

Step-iii:

Find (Ctrl+F) the closing caput tag as well as so paste this JavaScript file merely earlier/to a higher place tag.


Step-four:

Now, observe closing tag of ]]> together with paste these CSS codes just in a higher place/before ]]> tag too salvage the template.

.swtRBP 
width:274px; /* Change the Width of each recent posts box */
height:274px; /* Change the Height of each recent posts box */
background-color: #F7F7F7; /* Change the Background color of each recent posts box */

.swtRBP img
height: 50%; /* Change the width of each recent posts Thumbnail */
width: 95%; /* Change the width of each recent posts Thumbnail */

.swtRBP h6
font-size: 1em; /* Change the Font size of each recent posts Title */

.swtRBP p
font-size: 0.75em; /* Change the Font size of each recent posts Summary/Snippet/Excerpt */

.swtRBP
padding: 0.5em;
border: 0.0625em solid #00ff00;
margin: 0.25em;
background-color: #F7F7F7;
text-align: center;
float: left;
overflow: hidden;
display: inline-block;

.swtRBP a
text-decoration: none;
text-transform: capitalize;
text-align: center;
font-size: 0.75em;
line-height: 1;

.swtRBP a:link
color: #0000FF;

.swtRBP a:visited
color: #00FF00;

.swtRBP a:hover
color: #FF00FF;

.swtRBP a:active
color: #FF0000;

.swtRBP img
padding: 0.3em;
border: 0.1em solid #fff;
margin-top: 2px;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
overflow: hidden;

.swtRBP span
color:#ff0000;
font-size: 0.75em;
font-style:italic;

.swt-rights
clear: both;

.swt-rights img
float:right;

.swtRBP h6
margin: 0.5em 0 0;
overflow: hidden;
padding: 0;
line-height:1.1;
letter-spacing: 0;
vertical-align: middle;

.swtRBP p
font-family: "Times New Roman", Times, serif;
word-wrap: break-word;
line-height: 1.1;
border-top: 1px solid #eaefe6;
color: #141514;
margin: 0.2em;
overflow: hidden;
padding: 0.4em;
text-align: justify;

You may change the in a higher place CSS codes according to your need as well as preference. If yous are using Responsive blogger template then this widget volition automatically adopts your users device. However, you lot may too role advanced media cover CSS codes and so that your recent web log posts fits for your responsive topic. For instance, we have added the following media covert CSS codes for AUBSP:

@media covert in addition to (min-width: 768px) together with (max-width: 1100px)
.swtRBP
width:295px;
height:295px;
margin:0.125em;padding:0.125em;

.swtRBP img
margin:0.0625em;padding:0.125em;


@media cover as well as (max-width: 350px)
.swtRBP
width:200px;
height:100px;
margin:0.0625em;padding:0.0625em;

.swtRBP span, .swtRBP img display:none

NOTE: If you accept no knowledge near CSS codes so delight fill up complimentary to enquire us for changing the codes inward accordance with your blogger weblog.

However, y’all may download about already customized swtRBP CSS codes as well as glue it instead of the to a higher place default swtRBP CSS codes.

Step-v:

Go to the Layout card tab of your blogger weblog from left sidebar in addition to click on Add a Gadget text link push button either from sidebar or anyplace y’all want to display latest posts. However, you lot may take the blogger page/mail to exhibit the recent blog posts instead of displaying on the sidebar.

Step-6:

From the open up pop-up window, coil downwardly too take HTML/JavaScript (add together a third-political party functionality or other code to your web log) provided past blogger. However, if you have chosen the blog mail service/page for displaying swtRBP then open up the HTML mode instead of compose manner.

Step-seven:

Now, paste the next codes into the content champaign of HTML/JavaScript and subsequently giving a refer to the gadget similar “Latest Updated Posts” click on save button.



Customization of swtRBP widget

i) Change the value of swtRBPnumbers from 12 to any number you lot want to present the recent weblog posts.
two) Change the value of swtRBPsnippets from 225 to any issue y’all desire to display the characters every bit posts summary.
iii) We take added a default posts thumbnail for posts having no icon. However, yous may display your own photo/image by changing the icon url of swtRBPonimage  instead equally recent posts thumbnail.
four) If you want to show the recent blogposts from whatever specified label/category and then add together this elementary code inwards the eye of the concluding occupation only subsequently default too before enquiry sign /-/LabelName and then that the concluding business looks similar equally shown below.




  • Share