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

How to Craft a Featured Sectional for Your Blog

Your blog is one of the most important elements of your content marketing strategy. Here's how to showcase your blog's content elsewhere on your website to draw more readers to your blog.

If you operate a website, there's a good chance you also operate a blog associated with that website.

And if you don't operate a blog, you could be missing out on one of the most profitable and lowest-cost marketing inbound marketing strategies around. Blogging boosts SEO and traffic from search engines and establishes your company's voice as a thought leader. It can also boost leads, bringing in as much as six times more leads with a blog than without.

But this post isn't for those still stuck in 2004 who lack a business blog and don't want to invest in content marketing. This post is for those who love their blog, but they just need an easy way to showcase just how good their content is.

One of the best ways to bring readers to your blog from your website's homepage is to feature blog content on eye-catching sectionals. Those sectionals typically include a featured image to boost engagement and a list of the most recent blog posts to give your visitors a choice in what they want to read.

Remember, this blog sectional will typically live on your website's homepage or similar location, so you'll have to show off these elements in a very limited amount of space.

There are a few things that need to be included on your featured sectionals (regardless of where it lives):

- Title of post

- Date published

- Brief intro or synopsis

- Category and relevant tags

- Featured image

HTML

The HTML makes heavy use of various bootstrap column classes in order to reposition elements according to the appropriate screen size. This, ultimately, helps accommodate the featured post's image.

<div class="container">
  <section class="blog paddingSection80">
    <div class="big-box-blog">
      <div class="row">
        <div class="col-lg-4 col-sm-5 col-xs-12 blog-photo">
          <div class="box-blog-photo"><img alt="" class="img-responsive img-cirlce" src="https://raw.githubusercontent.com/solodev/featured-sectional-for-blog/master/image-1.jpg"></div><!--.box-blog-photo-->
        </div>
        <div class="col-md-4 col-sm-7 col-md-offset-1 box-short-article">
          <article>
            <header>
              <span class="data">May 10, 2018</span>
              <h2>Make a CTA Banner Using Only CSS</h2>
            </header>
            <p>Well-crafted CTAs can boost conversion rates. Here's how to style a CTA banner only using CSS.</p>
            <div class="tags">
              <a href="#">#Web Design</a>
            </div>
            <a class="btn btn-danger" href="#">read more</a> <a class="btn btn-primary" href="#">all blog posts</a>
          </article>
        </div>
        <div class="col-lg-3 col-md-12 container-blog-list">
          <div class="box-blog-list">
            <div class="row">
              <div class="blog-article col-xs-12 full-width" style="">
                <span class="data">May 08, 2018</span>
                <h3><a href="#">How to Validate Forms with Bootstrap</a></h3>
                <div class="tags">
                  <a href="#">#Forms #Bootstrap</a>
                </div>
              </div>
              <div class="blog-article col-xs-12 full-width" style="">
                <span class="data">May 3, 2018</span>
                <h3><a href="#">How to STyle Announcements and Events Sections</a></h3>
                <div class="tags">
                  <a href="$">#CSS</a>
                </div>
              </div>
              <div class="blog-article col-xs-12 full-width" style="">
                <span class="data">May 1, 2018</span>
                <h3><a href="#">Creating a Featured Content Slider with Slick Slider</a></h3>
                <div class="tags">
                  <a href="#">#Sliders</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

CSS

Considering the unique styling of this sectional piece, there's an appropriate number of custom classes used to format everything responsively.

@import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans');
body {
    font-family: 'Open Sans', sans-serif;
    font-family: 'Montserrat', sans-serif;
}
.big-box-blog {
  width: 100%;
  float: left;
  margin-top: 67px;
}
.big-box-blog .blog-photo .box-blog-photo {
  margin-left: 15px;
  margin-right: -30px;
  padding-top: 19px;
}
.big-box-blog .blog-photo .box-blog-photo img {
  -webkit-box-shadow: 0px 0px 12px -5px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 12px -5px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 12px -5px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  border: 3px solid #fff;
}
.box-short-article article {
  margin-left: -30px;
  padding-right: 0;
}
.box-short-article article header span {
  display: block;
  font-size: 21px;
  font-size: 2.1rem;
  font-weight: 500;
  color: #d9262c;
  text-transform: uppercase;
}
.box-short-article article header h2 {
  font-weight: 400;
  font-size: 32px;
  color: #000;
  text-transform: uppercase;
  margin-top: 17px;
  line-height: 36px;
  margin-bottom: 30px;
}
.box-short-article article p {
  font-size: 17px;
  font-size: 1.7rem;
  font-weight: 400;
  color: #0b0000;
}
.box-short-article article .btn {
  margin-right: 12px;
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  margin-bottom: 0;
  text-transform: uppercase;
  min-width: 45%;
}
.box-short-article article .btn-primary {
  margin-right: 0px;
}
.box-blog-list .blog-article {
  padding-left: 28px;
}
.box-blog-list .blog-article h3 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.tags {
  margin-top: 45px;
  width: 100%;
  margin-bottom: 63px;
}
.tags a {
  font-family: "alternate-gothic-no-3-d", Arial, Verdana;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
  margin-right: 13px;
  text-decoration: underline;
}
.tags a:hover {
  color: #6e6b6b;
}
.box-blog-list {
  padding-left: 17px;
  width: 100%;
  float: left;
}
.box-blog-list .blog-article {
  float: left;
  border-left: 2px solid #eee;
  border-bottom: 2px solid #eee;
  padding: 24px 15px 21px 32px;
}
.box-blog-list .blog-article span {
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  color: #d9262c;
  text-transform: uppercase;
}
.box-blog-list .blog-article h3 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.box-blog-list .blog-article h3 a:hover {
  color: #6e6b6b;
}
.box-blog-list .blog-article .tags {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 1199px) {
  .box-short-article article {
    margin-left: 0;
  }
  .box-blog-list {
    margin-top: 60px;
    margin-bottom: 60px;
  }
  .box-blog-list .blog-article {
    border-left: none;
    border-bottom: 2px solid #eee;
  }
}

@media (max-width: 991px) {
  .big-box-blog .blog-photo .box-blog-photo img {
    display: inline-block;
    width: 290px;
    margin-bottom: 30px;
  }
  .big-box-blog .blog-photo .box-blog-photo {
    text-align: center;
    margin-right: 15px;
  }
}

@media (max-width: 767px) {
  .box-short-article article {
    text-align: center;
  }
  .box-short-article article p {
    padding-right: 0;
  }
}

@media (max-width: 479px) {
  .box-blog-list .blog-article {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #eee;
  }
  .box-blog-list .blog-article:nth-child(2n) {
    border-left: none;
  }
  .box-blog-list .blog-article:last-child {
    border-bottom: none;
  }
}

@media (min-width: 768px) {
  .box-blog-list .blog-article:first-child {
    padding-top: 0;
  }
  .box-blog-list .blog-article:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

Want to see how it all looks before committing to its use? Check out the JSFiddle below. Be sure to scale your browser windows to various sizes to see how these sections would look on mobile display.

Download from Github

Share on Facebook Tweet It

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