Display Recent Posts With Featured Thumbnails in Blogger [Quick Guide]

recent posts widget with thumbnailsWe have discussed in detail how you can use JavaScript to extract data from Blogger JSON Feed API and use it to build gadgets such as “Recent Posts Widget” and “Recent Comments Widget“. The JSON tutorial series would help a developer to create quality widgets for blogspot blogging platform. Today’s tutorial will show you the end-product of what can be done using JSON feed for posts. I will share with you an advanced widget that will display recent posts in descending order (latest at top) along with post thumbnails, post summary, timestamp, comment count, label tag, author name and edit link. You can add it to your blogger blogs to display latest posts in a unique style. This is the first widget of its kind with so much features. See the demo below:

Update: A more compact, flexible and fully functional version of this widget has been released. Checkout:

What is a Blogger Recent Posts Widget?

A recent posts widget displays your latest posts in descending order with newest at top. It shows a list of your latest blog posts along with thumbnails, post excerpt and post meta info. It works with all blogspot blogs. Copy the code and paste it inside a HTML/JavaScript gadget, that simple!

You can also use it to display posts by label by listing recent posts from a specific label. You can customize it to display posts in magazine style fashion with vertical, horizontal, gallery style listing. I will discuss all such possibilities in my coming tutorials. Developers at themeforest use the same method to create magazine style blogger templates. You will learn how to code it from scratch through our JSON series.

Full features are the following:

  1. Post Title

  2. Featured Image – With third party image support  and YouTube Thumbnails support

  3. Post summary

  4. Read more link

  5. Author Name

  6. Label/Category/Tag name

  7. Comments Count

  8. Publish date

  9. Edit link tooltip that will show post Update Date and Time.

  10. Lightweight

  11. Fluid and responsive

Displays the following GIF preloader which spins and pulsates when the widget loads or when data is requested by browser from JSON feed.

preloader for blogger blogs

Once fully loaded the blog posts are displayed in descending order (Latest at top).

recent posts widget with thumbnails

See the difference in published date and updated date through the tooltip. A unique feature rarely seen before:

recent posts widget with tooltip

Lets get to coding!

Add Recent Posts Widget To Your Blog

Follow these easy steps to add this gadget to your blogspot blogs:

1 Go To Blogger > Template

2 Backup your template

3 Click Edit HTML

4 Paste the following code just above </head> tag

Note: This step is optional. Skip it if you have already added jQuery library source links to your blogger template.

<script async=”http://www.mybloggertricks.com/” src=’https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’></script>

5 Next paste the following stylesheet links for FontAwesome and Oswald font just above </head>. Skip adding the links if you already have added them inside your templates:

<link href=’http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css’ rel=’stylesheet’/>

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

6 Now paste the following CSS code just above    ]]></b:skin>

/*############Recent Posts Widget##################*/

.mbtlist list-style-type:none;overflow:hidden; padding:10px!important;
.mbtlist li margin:0px auto 20px auto; clear:both; color:#666; font-family:helvetica; font-size:12px;
.mbtlist icolor:#999; padding-right:4px;
.mbtlist .ilineline-height:2em; clear:both; border:1px solid #eee; margin-top:10px; padding: 0px 4px;   font-size: 12px;
.mbtlist div spanmargin:0 10px 0 0; display:inline-block;
.mbtlist span display:block; margin:5px 0px 0px; padding-right:5px;
.mbtlist .icon color: #999;font-family: verdana;font-size: 12px;text-align: justify;
.mbtlist img float:left; margin:0px 10px 10px 0px; border:6px solid #fff; padding:0px; width:150px; height:100px; box-shadow:-1px -1px 4px #777;
.mbtlist .mbttitle font-family:oswald; font-size:18px; color:#0080ff; font-weight:normal; text-decoration:none;    line-height: 1.4em;
.mbtlist .mbttitle:hover, .mbtlist .itotal a:hover  color:#00A5FF;
.mbtlist .iedit atext-decoration:none; color:#999; cursor:pointer
.mbtlist .iedit:before, .mbtlist .iauthor:before, .mbtlist .itag:before, .mbtlist .icomments:before, .mbtlist .idate:before, .mbtlist .itotal span:beforefont-family:fontAwesome; position:relative; padding-right:5px;
.mbtlist .iauthor:before content:’f007′;
.mbtlist .itag:before content:’f02c’;
.mbtlist .icomments:before content:’f086′;
.mbtlist .idate:before content:’f017′;
.mbtlist .iedit:before content:’f040′;.mbtlist .imore font-size:12px; font-weight:bold; text-decoration:none; color:#999;.mbtlist .itotal color:#333;  padding:5px 10px; border:1px solid #eee;.mbtlist .itotal a font-family:oswald; font-size:12px; font-weight:normal; color:#0080ff; text-decoration:none.mbtlist .itotal span:before content:’f07c’;.mbtlist .itotal span font padding:0px 3px; color:#333; font-family:georgia; font-size:15px; font-weight:bold#mbtloading1 margin: 20% auto;
background: url(‘http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif’) no-repeat left center;width: 80px;height: 80px;

/*—— CSS3 Tooltip Shortcode ————-*/
.tooltip1outline:none;text-decoration:none!important;position:relative;color: orange!important; font-weight: bold;.tooltip1:hover border-bottom: none;.tooltip1 strongline-height:30px.tooltip1 > spanmax-width:300px;width:115px;padding:5px 8px;opacity:0;bottom:170%;left:0px; visibility:hidden;z-index:10;position:absolute;font-family:helvetica;font-size:12px;font-weight:bold;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out.tooltip1 > span imgfloat:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;.tooltip1:hover > spanopacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-90px.tooltip1 span bwidth:15px;height:15px;right:25px;bottom:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none

No comments:

Powered by Blogger.