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.
- The width of the featured boxes section: change 1100px
- The size of the images: change 100% (100% is square; landscape is less than 100%; portrait is more than 100%)
- The color of the text: change #000 (leave # before the hex color)
- 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
- 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.
- To change the position of the content on top of the image, change fb-content-middle to fb-content-bottom
- Replace LINK in each featured box with your links
- Replace IMAGEURL in each featured box with the url of your images (you can upload them to a test page and copy the urls)
- Replace Title in each featured box with your titles