Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Styling your Latest Posts Widget

In this tutorial, Solodev will show you how to create and style a latest posts widget for your website.

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.

Below is the HTML, CSS, and JavaScript required.

Step 1 - latest-posts.html

Copy and paste the code below into latest-posts.html

<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’re individually interested in – 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>
      </aside>
    </div>
  </div>
</div>

Step 2 - latest-posts.css

Download the CSS below and include it in your web page

latest-posts.css

Step 3 - Add the includes below to your web page

<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>

Download from Github

Share on Facebook Tweet It

Elena Roig
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev