Blogger Ever

4 column featured widget for blogger

4 column featured widget for blogger
What I could say about this thrilling pure CSS3 widget that can really spice up your blog with metro style featured widget.The widget is really fascinate your visitors and will visit more pages than before.
This widget have the following features.

  • Pure CSS3 animation
  • Browser friendly
  • 4 columns
  • Fixed image size means no problem to change the image size.
  • Metro style
So lets start.
  • Backup your template
  • Go to layout >add a widget (but make sure the widget have the full length like I have shown below)
  • Now paste the following code
<style>
.befeature
{
height: 250px;
overflow: hidden;
width: 900px;
}
.bebox:hover
{
margin-top: -180px;
}
.bebox
{
float: left;
height: 500px;
margin: 0;
margin-left: 1%;
moz-transition: all .3s ease-in-out;
ms-transition: all .3s ease-in-out;
o-transition: all .3s ease-in-out;
overflow: hidden;
padding: 180px 0 0 0;
transition: all .3s ease-in-out;
webkit-transition: all .3s ease-in-out;
width: 24%;
}
.beupbox
{
height: 60px;
margin: 0;
overflow: hidden;
padding: 5px 10px 0px 10px;
width: 100%;
}
.beupbox h2
{
color: #fff;
font-family: Segoe UI light;
font-size: 22px;
font-weight: lighter;
margin: 0;
padding: 0;
width: 95%;
}
.beupbox h2 a
{
color:#fff;
}
.bedownbox
{
height: 400px;
margin: 0;
padding: 0px 10px 10px 10px;
width: 100%;
}
.bedownbox p
{
color: #fff;
font-family: verdana;
font-size: 13px;
font-wieght: normal;
}
#bebox1
{
background: #3e3e3e url('FIRST_IMAGE_URL') no-repeat;
background-size: 100% 180px;
}
#bebox2
{
background: #3e3e3e url('SECOND_IMAGE_URL') no-repeat;
background-size: 100% 180px;
}
#bebox3
{
background: #3e3e3e url('THIRD_IMAGE_URL') no-repeat background-size: 100% 180px;
}
#bebox4
{
background: #3e3e3e url('FOURTH_IMAGE_URL') no-repeat;
background-size: 100% 180px;
}
</style>
<div class="befeature">
<div class="bebox" id="bebox1">
<div class="beupbox"><h2><a href='#' target='_blank'>This is demo heading 1<a/></h2></div>
<div class="bedownbox"><p>This is the first description.</p></div>
</div>
<div class="bebox" id="bebox2">
<div class="beupbox"><h2>
<a href='#' target='_blank'>This is demo heading 2</h2></a></div>
<div class="bedownbox"><p>This is the second description.</p></div>
</div>
<div class="bebox" id="bebox3">
<div class="beupbox"><h2>
<a href='#' target='_blank'>This is demo heading 3</h2></a></div>
<div class="bedownbox"><p>This is the third description.</p></div>
</div>
<div class="bebox" id="bebox4">
<div class="beupbox"><h2>
<a href='#' target='_blank'>This is demo heading 4</a></h2></div>
<div class="bedownbox"><p>This is the fourth description.</p></div>
</div>
</div>
  • Now replace all the highlighted lines with their respective content.
Update: Replace # with the article link.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.