Latest-Posts-Widget

Whether it is news or a blog it is ideal to have a "Latest Posts" widget on your website. Blog and news posts are consistent and dated and finding the latest content published to your website may be difficult for site visitors.

Many websites solve this problem by adding a date filter to their content. Doing this adds more steps the user has to take to find the latest information from your organization. By adding a "Latest Posts" widget to your website, your website visitors don't need to go anywhere else to read the latest from your organization.

In this tutorial, Solodev will show you how to add and style a "Latest Posts" widget for your website.

Tutorials

For detailed instructions, view Solodev's Styling Your Latest Posts Widget article.

Demo

Try out a working example on JSFiddle.

HTML

The latest posts widget contains the following HTML markup.

<div class="container sectional-wrapper" >
<div class="row" >
<div class="col-md-8" >
   <div class="sub-header" >
      <h1 class="subheader-title" >
         Styling your Latest News Widget
      </h1>
   </div>
   <h2 >
      The Digital Experience
   </h2>
   <p >
      The digital experience can easily be summed up as the experience your customers from A to Z, from finding your website to checking out or calling. Everything they see, read, watch, etc. is part of their digital experience that you provide them. It is quintessential that brands pay close attention to the digital experiences they deliver and personalize these experiences to increases sales and ROI.
   </p>
   <h2 >
      Decide with Data
   </h2>
   <p >
      When your business website was last refreshed or redone, it gave a new look and feel that communicated that your company was fresh, forward thinking and effective. Does that perception still exist today? While an oil change every 5,000 miles can be effective for what you park in the garage, when it comes to websites, sometimes trading up for a new model is the right call.
   </p>
   <h2 >
      The Customer is King
   </h2>
   <p >
      Your customers interact with your brand again and again across a whole digital landscape of locations, devices and tools. You touch them on your website or ecommerce store, through email campaigns, via search or social media, and with digital advertising. Your ability to understand who they are, how and where they interact, and what they&rsquo;re individually interested in &ndash; and then deliver an appropriate experience that delights is the essence of successful customer experience management (CEM).
   </p>
</div>
<div class="col-md-3 col-md-offset-1 aside-section" >
   <aside class="widget" >
   <div class="widget blog-widget" >
      <h2 class="widget-header" >
         Latest Posts
      </h2>
      <div class="ct-latest media" >
         <div class="media-left" >
            <img alt="widget image" class="media-object" src="http://www.webcorpco.com/core/fileparse.php/409/urlt/number1.jpg" style="max-width: 90px; user-select: auto;">
         </div>
         <div class="media-body" >
            <h2 class="ct-latest-header media-heading" >
               Five Ways to Improve your Website
            </h2>
            <p >
               While an oil change every 5,000 miles can be effective for what you park in the garage, when it comes to websites, sometimes trading up for a new model is the right call.
            </p>
         </div>
      </div>
      <div class="ct-latest media" >
         <div class="media-left" >
            <img alt="widget image" class="media-object" src="http://www.webcorpco.com/core/fileparse.php/409/urlt/customer-is-king.jpg" style="max-width: 90px; user-select: auto;">
         </div>
         <div class="media-body" >
            <h2 class="ct-latest-header media-heading" >
               How to Optimize your PPC Ads
            </h2>
            <p >
               It is quintessential that brands pay close attention to the digital experiences they deliver and personalize these experiences to increases sales and ROI.
            </p>
         </div>
      </div>
      <div class="ct-latest media" >
         <div class="media-left" >
            <img alt="widget image" class="media-object" src="http://www.webcorpco.com/core/fileparse.php/409/urlt/6-Critical-Reasons-Landing.jpg" style="max-width: 90px; user-select: auto;">
         </div>
         <div class="media-body" >
            <h2 class="ct-latest-header media-heading" >
               Why Websites Rule the World
            </h2>
            <p >
               The digital experience can easily be summed up as the experience your customers from A to Z, from finding your website to checking out or calling. 
            </p>
         </div>
      </div>
      <a class="widget-link"  ><img alt="latest-05" src="https://www.solodev.com/assets/arrow-left-border.png" ><span >More blog posts</span></a>
   </div>
</div>

CSS

All required CSS is contained in latest-posts.css

External Includes

This tutorial includes the following third party resources.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="latest-posts.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>