You can add as many featured articles in the widget as you wish. Its really easy to customize and you could play up with the CSS values to make it suite to your needs.
DEMO VIDEO!
Follow the instructions below to apply the widget to your blog.
Before we move on, you may like to view other amazing widgets that we recently published:
- AWeber Style Email Subscription Widget Box
- Blogger Featured Post Widget With Glass Shine Hover Effect
- WordPress 'Cloud' Feedburner Email Subscription Widget
Step #1 Customize the widget code
<div align='center'>
<div id='background'>
<table>
<tr><td>
<div class='view view-first'>
<img src='First Post Image Link'/>
<div class='mask'>
<h2>First Post Heading</h2>
<p>
First Post Paragraph </p>
<a class='info' href='First Post Link'>Read More</a>
</div>
</div> </td>
<td> <div class='view view-first'>
<img src='Second Post Image Link'/>
<div class='mask'>
<h2>Second Post Heading </h2>
<p>Second Post Paragraph</p>
<a class='info' href='Second Post Link'>Read More</a>
</div>
</div>
</td> <td>
<div class='view view-first'>
<img src='Third Post Image Link'/>
<div class='mask'>
<h2>Third Post Heading </h2>
<p>Third Post Paragraph</p>
<a class='info' href='Third Post Link'>Read More</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class='view view-first'>
<img src='Fourth Post Image Link'/>
<div class='mask'>
<h2>Fourth Post Heading </h2>
<p>Fourth Post Paragraph</p>
<a class='info' href='Fourth Post Link'>Read More</a>
</div>
</div>
</td>
<td>
<div class='view view-first'>
<img src='Fifth Post Image Link'/>
<div class='mask'>
<h2>Fifth Post Heading </h2>
<p>Fifth Post Paragraph</p>
<a class='info' href='Fifth Post Link'>Read More</a>
</div></div>
</td>
<td>
<div class='view view-first'>
<img src='Sixth Post Image Link '/>
<div class='mask'>
<h2>Sixth Post Heading </h2>
<p>Sixth Post paragraph</p>
<a class='info' href='Sixth Post Link'>Read More</a>
</div>
</div>
<p style=" line-height:0px; font-size:8px; font-weight:bold; text-align:right;padding-top:0px;"><a style="color:#D3D3D3;" href="http://www.bloggingehow.com">widgets</a></p>
</td>
</tr>
</table>
</div>
</div>
<style>
#background {
background: #FAF8CC; width:100%; border: 1px solid #C9C299;
}
.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
border: 2px solid #000000;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 8px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 5px 40px ;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
</style>
Now simply edit the link above with your own featured post links. Every different post boxes codes are highlighted with different color so to distinguish them easily. Note that the paragraphs should not be longer than 75-80 characters.
Use our character count tool to count the characters in your paragraph that you wish to add in.
Once you have customized the widget as per your needs, its time to add the widget to your blog.
Step #2 Add the widget to your blog
Navigate to Blogger Dashboard >> Design >> Add a Gadget and paste the entire code with in it. OR you could add the widget directly into your blog template via going in Edit HTML option.In case you wish to delete any section of the featured post widget, simply remove the following occurrences of section below:
<td>
<div class='view view-first'>
<img src='Fourth Post Image Link'/>
<div class='mask'>
<h2>Fourth Post Heading </h2>
<p>Fourth Post Paragraph</p>
<a class='info' href='Fourth Post Link'>Read More</a>
</div>
</div>
</td>
Need Any Help?
Hope you guys liked this amazing featured post widget. In case you face any problem while applying the widget, just drop out a comment below and we'll together try to fix that.
Stay safe guys!
You may like to read: