Image Accordion Blogger Widget For The Custom Recent Post

After our two tremendous blogger widget like 4 types of popular post widget and Post title before the homepage title here is another tremendous Blogger Widget. These Blogger widget of image accordion for custom recent post or random post is extremely fast. I have mixed HTML, CSS and Javascript code all in one code for you. Which makes it easy to install .You have to only copy and paste the code.

Website design and its look play an important role in attracting visitors to your website. Somewhere it also affects your Adsense cpc and Ctr. So always focus to make your site appear good. These blogger widget is for the same purpose. All the link that you will insert in this blogger widget will be directly accessible to your visitors so insert the best article and posts of your blog with this widget. You will have the full control of this widget. Try to insert your recent post in this widget and put this below the navigation bar you will see an increase in traffic on your blog. And it will also make your site look good.

<style type="text/css">
ul.accordion{
list-style:none;
position:absolute;
right:60px;
top:0px;
font-family: Cambria, serif;
font-size: 16px;
font-style: italic;
line-height: 1.5em;
}
ul.accordion li{
float:right;
width:115px;
height:480px;
display:block;
border-right:2px solid #fff;
border-bottom:2px solid #fff;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
position:relative;
overflow:hidden;
cursor:pointer;
-moz-box-shadow:1px 3px 15px #555;
-webkit-box-shadow:1px 3px 15px #555;
box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBgpFRYxzTy04VxEXsccE8naW_hgN4dTE0YnNfEfEXqjAbPRJMtt7ZDtusgPPvYAhyToQCGxcyFvojdu4U8bqYJxHrDDz7nelj6Qq4GyeteKkvYyJSZpkyYWnWAHp4Kdaw6lktmE6VV0/s1600/1.jpg);
}
ul.accordion li.bg2{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihvWo-TByN-mXjiHnDpdOjh7TgZH9ZHX_mFAcUOQ6AlBBk7G7mYRpMKP-ETUo9rfTKSP4OeHf7oB6P_3R7xKIDE8asfL91SyDe_s4nztZmmTC7wKGSdL3-Mpc9V7H3yV5AQOBDE_sikIM/s1600/2.jpg);
}
ul.accordion li.bg3{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLEwQ8SVmm5OYq9FGObLHp51c2ils6mxYbb8SVhH2mfeQIlzWQeeLYtQ3IlUN3ba9_ULcmoLOOyc8NpvJ6bwCBehq_oC0QgITJwj5zN8vjwFip2dAdkKdd0vMwMJbG9nA1Nq5T3__X_L0/s1600/3.jpg);
}
ul.accordion li.bg4{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFXGDX6Q3DZLgVi9pTXtGsvSLveusj3HtqqqMb984saU1go4QLTqXpnIsLkxskVyNQPkL-L19enpMuC3hXBR9nCyYIgx3IuVWw0JG6BloVgDPTOIwSWo18USEaYTsU5UPNAleRgRh_AcU/s1600/4.jpg);
}
ul.accordion li.bleft{
border-left:2px solid #fff;
}
ul.accordion li .heading{
background-color:#fff;
padding:10px;
margin-top:60px;
opacity:0.9;
text-transform:uppercase;
font-style:normal;
font-weight:bold;
letter-spacing:1px;
font-size:14px;
color:#444;
text-align:center;
text-shadow:-1px -1px 1px #ccc;
}

ul.accordion li .description{
position:absolute;
width:480px;
height:175px;
bottom:0px;
left:0px;
display:none;
}
ul.accordion li .description h2{
text-transform:uppercase;
font-style:normal;
font-weight:bold;
letter-spacing:1px;
font-size:45px;
color:#444;
text-align:left;
margin:0px 0px 15px 20px;
text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description p{
line-height:14px;
margin:10px 22px;
font-family: "Trebuchet MS", sans-serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
text-transform: none;
letter-spacing: normal;
line-height: 1.6em;
}
ul.accordion li .description a{
position:absolute;
bottom:5px;
left:20px;
text-transform:uppercase;
font-style:normal;
font-size:11px;
text-decoration:none;
color:#888;
}
ul.accordion li .description a:hover{
color:#333;
text-decoration:underline;
}

ul.accordion li .bgDescription{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA8jQmZeXY7iOY5RubzwPHLP5Cjk5Hx2n3cUtIh92EWNaovl6VpcqJ5nWorN1Z6u5l3rGeZBVK1aDScDsOrwBaQCddAWIg1-bPtFYszH4BbnCwkqTgT_eyzvXsVIjrfenI4Loxtr-hnxg/s1600/bgDescription.png) repeat-x top left;
height:340px;
position:absolute;
bottom:0px;
left:0px;
width:100%;
display:none;
}

</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#accordion > li').hover(
function () {
var $this = $(this);
$this.stop().animate({'width':'480px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
},
function () {
var $this = $(this);
$this.stop().animate({'width':'115px'},1000);
$('.heading',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(500);
$('.bgDescription',$this).stop(true,true).slideUp(700);
}
);
});
</script>

<ul class="accordion" id="accordion">
<li class="bg1">
<div class="heading">Heading</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Heading</h2>
<p>Some descriptive text</p>
<a href="#">more ?</a>
</div>
</li>


<li class="bg2">
<div class="heading">Heading</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Heading</h2>
<p>Some descriptive text</p>
<a href="#">more ?</a>
</div>
</li>


<li class="bg3">
<div class="heading">Heading</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Heading</h2>
<p>Some descriptive text</p>
<a href="#">more ?</a>
</div>
</li>


<li class="bg4">
<div class="heading">Heading</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Heading</h2>
<p>Some descriptive text</p>
<a href="#">more ?</a>
</div>
</li>
</ul>