Customizing new Featured Post widget in Blogger

Blogger's new Feature post widget is quite a good development for an active blogger. Every widget launched by Blogger had some space for developers to customize it for making it less scary. However, this widget doesn't allows to change HTML in template and using some Javascript for that in a great idea at all. I got some good ways to amend this widget fr making it look good.

Change order of elements - using flex box

CSS flex box technique allows you to change the order of title, description and image. Since HTML is just a simple tag that puts title, then description and then image.

To do this follow the steps below:

• Find ]]></b:skin>
• Add the following code above it

.FeaturedPost .post-summary{
display:flex;
flex-direction:column;
}
.FeaturedPost img{
order:1;
}
.FeaturedPost h3{
order:2;
}
.FeaturedPost p{
order:3;
}

Change the numbers, first one is for image, second is for heading and third is for description. To read more about flex box, read this on CSS-Tricks.

Add style

Customization is the most factor of attraction. A good colour theme and fonts are keys, so here is a bit customization code. Follow the steps below:

• Find ]]></b:skin>
• Add the following code above it

.FeaturedPost img {
  border-radius: 5px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.FeaturedPost h3 {
  font: 400 20px 'segoe ui', sans-serif;
}
.FeaturedPost h3 a {
  color: #222;
}
.FeaturedPost p {
  font: 400 15px 'segoe ui', sans-serif;
  line-height: 23px;
  color: #666;
}

Right now I don't have any demo to show, but it will look pretty.