Fancy CSS Accordion Image Slider Widget for Blogger

Hi Friends today I came with a new amazing Accordion widget for blogger. This Widget is so beautiful and easily to install in blogger. This is made up of Pure CSS coding that's why it don't takes much time to load. I already shared an Image Accordion Widget for Blogger. So this is my second Accordion Widget for Blogger. This Widget is awesome and have Six Different Images which slide over each other. This Accordion is basically developed by Muhammad Hassan of exeideas.com and we made few changes in it and made more cute and easy to install. Adding this widget in your blog can cause an awesome slider effect in your blog. This also helps visitors to pay attention towards pages that are linked in this Accordion. So, today I am going to share an article about How to Add Pure CSS Accordion Image Slider Widget in Blogger Blog.

(See Demo Image Here)

Without Hover

With Hover Effect

How to Add Image Slider in Blogger?

• Login to Blogger Dashboard.
• Goto Template >> Edit HTML. (Note: Backup your Template Please)
• Search for ]]></b:skin> and Paste Following Code just Above it.

/*********************************************************
  BBT Image Accordion Widget by BestBloggerTricks.com
**********************************************************/
.bbt-accordion {
width: 990px;
overflow: hidden;
margin-left: -15px;
}
.bbt-accordion ul {
width: 2000px;
margin-top: 0px;
}
.bbt-accordion li {
position: relative;
display: block;
width: 165px;
float: left;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
background: #fff;
}
.bbt-accordion ul:hover li {
width: 70px;
}
.bbt-accordion ul li:hover {
width: 640px;
}
.image_title {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0; bottom: 8px;
width: 640px;
}
.image_title a {
display: block;
color: #fff;
text-decoration: none;
padding: 20px;
font-size: 18px;
}

• After doing above steps, 
• Then goto "Layout" tab. 
• Click on "Add a Gadget". 
• Slect widget type as "HTML/Javascript". 
• Then Paste the Following code inside it. 

<div class="bbt-accordion">
<ul>
<li>
<a href="1st Link Here">
<img alt="BestBloggerTricks" src="1st Image URL Here">
</a>
<div class="image_title">
<a href="1st Link Here">1st URL title Here</a>
</div>
</li>
<li>
<a href="2nd Link Here">
<img alt="BestBloggerTricks" src="2nd Image URL Here">
</a>
<div class="image_title">
<a href="2nd Link Here">2nd URL title Here</a>
</div>
</li>
<li>
<a href="3rd Link Here">
<img alt="BestBloggerTricks" src="3rd Image URL Here">
</a>
<div class="image_title">
<a href="3rd Link Here">3rd URL title Here</a>
</div>
</li>
<li>
<a href="4th Link Here">
<img alt="BestBloggerTricks" src="4th Image URL Here">
</a>
<div class="image_title">
<a href="4th Link Here">4th URL title Here</a>
</div>
</li>
<li>
<a href="5th Link Here">
<img alt="BestBloggerTricks" src="5th Image URL Here">
</a>
<div class="image_title">
<a href="5th Link Here">5th URL title Here</a>
</div>
</li>
<li>
<a href="6th Link Here">
<img alt="BestBloggerTricks" src="6th Image URL Here">
</a>
<div class="image_title">
<a href="6th Link Here">6th URL title Here</a>
</div>
</li>
</ul>
</div>

• Now click on Save and you are done!

Editing:

• Replace All # Image URL with Images which you want to add in slider. (Image Size should be 640x320 pixels)
• Replace All # Link with URL's which you want to link with each Image in slider.
• Replace All # URL Title with Titles of each Link which you want to add in slider.

Final Words: You have successfully Added Accordion Image Slider Widget in your Blogger Blog. Please Share this post to Social Network. If you have any query about this tutorial, feel free to comment below. Your comment will be appreciated.
Allah Hafiz till next post!