Home » , » Image Accordion Blogger Widget For The Custom Recent Post

Image Accordion Blogger Widget For The Custom Recent Post


Image Accordion Blogger Widget For The Custom Recent Post that expands on mouse hover and auto resizes on mouse away. SEO Optimized and fast loading.

Image Accordion Blogger Widget For Custom Recent Post
Image Accordion Blogger Widget For Custom Recent Post



VIEW DEMO





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.

Quality of These Image accordion Blogger widget


  • Works in all platforms Like Blogger, Wordpress and in any website.
  • Works in all browsers.
  • Extremely Fast in Loading.
  • Simply copy and paste code. No additional plugins Required.
  • Fully Customizable.



How To Install Image Accordion Blogger Widget For The Custom Recent Post


  • First Login To Blogger Account.
  • Go To Layout
  • Click on Add a Gadget.
  • Choose HTML/JAVASCRIPT.
  • Copy The Below Code.
  • Paste Into HTML.JAVASCRIPT.
  • Now Save.



Title, Link, Description and Image Customization

Only few customization required in this blogger widget. Follow the step by step procedure To Install these Blogger Widget.

Change Background-image in UL. Accordion Li. bg3 class. Copy the image code of your post and paste in background-image section.

Change heading in h2 section. Delete heading and paste your post title.

Change description in p section and write the description of your post.

Change # in a href section and paste your link.

You are done.


HTML, CSS, JAVASCRIPT ALL IN ONE

<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(http://2.bp.blogspot.com/-7Fcu-6Sxjfk/USfHkyNIH7I/AAAAAAAAALM/kiN6vZm_FBQ/s1600/1.jpg);
}
ul.accordion li.bg2{
background-image:url(http://4.bp.blogspot.com/-ahr1Zhuvbvs/USfHlhhRtWI/AAAAAAAAALU/xHPZ79LepMc/s1600/2.jpg);
}
ul.accordion li.bg3{
background-image:url(http://3.bp.blogspot.com/-nAQ8g8Ew_Qk/USfHiTrFr3I/AAAAAAAAALE/RDvP9Sc8Qs8/s1600/3.jpg);
}
ul.accordion li.bg4{
background-image:url(http://1.bp.blogspot.com/-lgEdEPaY76s/USfHoYeF4EI/AAAAAAAAALg/BumDEeBuAVQ/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(http://3.bp.blogspot.com/-JKFYSqYH7E0/USfHorVCGBI/AAAAAAAAALc/Ciosm2N7N6Y/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>


I hope you liked the image accordion Blogger Widget for custom recent post and random post. Please inform me through comment if you find any problem in installation of these blogger widgets.

Title: Image Accordion Blogger Widget For The Custom Recent Post Author: Rohan Mod
Description : Image Accordion Blogger Widget For Custom Recent Post that expands on mouse hover and auto resizes on mouse away. SEO Optimized and fast loading.
Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS