How to add featured boxes to your blog

You can see an example of the featured boxes here. You have to follow 2 steps - step #1 is adding the CSS, step #2 is adding the HTML to a widget and adding your content (link, image url and title).


Step 1: Add the CSS

Go to Theme > Customize > Advanced > click on "Links" to expand the dropdown > scroll down to the bottom of the dropdown and select "Add CSS" > add this to the Add custom CSS field:

.featured-boxes {
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding: 0 1.5em;
display: grid;
grid-template-columns: minmax(0,1fr);
column-gap: 20px;
row-gap: 20px;
}
@media screen and (min-width: 576px) {
.featured-boxes.fb-cols-3 {
grid-template-columns: repeat(3,minmax(0,1fr));
}
}
@media screen and (min-width: 768px) {
.featured-boxes.fb-cols-4 {
grid-template-columns: repeat(4,minmax(0,1fr));
}
}
@media screen and (max-width: 767px) and (min-width: 576px) {
.featured-boxes.fb-cols-4 {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
.featured-box {
position: relative;
}
.box-image {
width: 100%;
padding-bottom: 100%;
position: relative;
}
.box-image img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
object-fit: cover;
}
.box-content {
color: #000;
background: rgba(255,255,255,0.8);
text-align: center;
padding: 15px 12px;
display: block;
width: 90%;
left: 5%;
position: absolute;
}
.fb-content-middle .box-content {
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.fb-content-bottom .box-content {
bottom: 5%;
}
.box-title {
font-family: Jost;
font-weight: 400;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1.5px;
}

If you want to edit:

All edits can be made to the CSS above. The backgrounds below match the backgrounds in the CSS.

  1. The width of the featured boxes section: change 1100px
  2. The size of the images: change 100% (100% is square; landscape is less than 100%; portrait is more than 100%)
  3. The color of the text: change #000 (leave # before the hex color)
  4. The background of the text: change rgba(255,255,255,0.8); use rgba if you want the background to be semi-transparent, use a hex color if you want the background to be solid
  5. The font of the title: change Jost (especially if your theme doesn't have the Jost font loaded

Step 2: Add the HTML

You can add the HTML below to a HTML/JavaScript widget in the Layout page in your Blogger dashboard. I recommend adding it to one of the Home sections or the Before Footer/After Footer sections. Mainly because they're full-width and the featured boxes will look much better there.


3 Columns

<div class="featured-boxes fb-cols-3 fb-content-middle">

<div class="featured-box"><a href="LINK">
<div class="box-image"><img src="IMAGEURL"/></div>
<div class="box-content">
<div class="box-title">Title</div>
</div>
</a></div>

<div class="featured-box"><a href="LINK">
<div class="box-image"><img src="IMAGEURL"/></div>
<div class="box-content">
<div class="box-title">Title</div>
</div>
</a></div>

<div class="featured-box"><a href="LINK">
<div class="box-image"><img src="IMAGEURL"/></div>
<div class="box-content">
<div class="box-title">Title</div>
</div>
</a></div>

</div>

4 Columns

<div class="featured-boxes fb-cols-4 fb-content-middle">

<div class="featured-box"><a href="LINK">
<div class="box-image"><img src="IMAGEURL"/></div>
<div class="box-content">
<div class="box-title">Title</div>
</div>
</a></div>

<div class="featured-box"><a href="LINK">
<div class="box-image"><img src="IMAGEURL"/></div>
<div class="box-content">
<div class="box-title">Title</div>
</div>
</a></div>

<div class="featured-box"><a href="LINK">
<div class="box-image"><img src="IMAGEURL"/></div>
<div class="box-content">
<div class="box-title">Title</div>
</div>
</a></div>

<div class="featured-box"><a href="LINK">
<div class="box-image"><img src="IMAGEURL"/></div>
<div class="box-content">
<div class="box-title">Title</div>
</div>
</a></div>

</div>

How to edit:

All edits can be made to the HTML above. The backgrounds below match the backgrounds in the HTML.

  1. To change the position of the content on top of the image, change fb-content-middle to fb-content-bottom
  2. Replace LINK in each featured box with your links
  3. Replace IMAGEURL in each featured box with the url of your images (you can upload them to a test page and copy the urls)
  4. Replace Title in each featured box with your titles