Add 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(Read:How to backup & restore templates)
»Go to layout >add a widget (but
make sure the widget have the full
length.)
»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 h1
{
color: #fff;
font-family: Segoe UI light;
font-size: 22px;
font-weight: lighter;
margin: 0;
padding: 0;
width: 95%;
}
.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"><h1> This is demo
heading 1</h1></div>
<div class="bedownbox"><p> This is the
first description.</p></div>
</div>
<div class="bebox" id="bebox2">
<div class="beupbox"><h1> This is demo
heading 2</h1></div>
<div class="bedownbox"><p> This is the
second description.</p></div>
</div>
<div class="bebox" id="bebox3">
<div class="beupbox"><h1> This is demo
heading 3</h1></div>
<div class="bedownbox"><p> This is the
third description.</p></div>
</div>
<div class="bebox" id="bebox4">
<div class="beupbox"><h1> This is demo
heading 4</h1></div>
<div class="bedownbox"><p> This is the
fourth description.</p></div>
</div>
</div>

&#187;Now replace all the "Italic" __Lines with their respective content.