The biggest headache of a Blogger is to design his blog in such a way that his visitors cannot continue without appreciating his hard work. This is too much beautifull Blogger image Slider. Have you ever seen an Accordion image slider that works whenever someone hovers over it? For WordPress users, Accordion Slider is not new because it is a robust platform. Therefore, we have less efficiency of creating something out of this world, and unwillingly we have to depend entirely on HTML, CSS and JavaScript. However, after hours of coding our handwork finally paid off because we were able to create an Unleashed Accordion Image Slider for blogger adapted from WordPress. Today we will be integrating eXe Accordion Features post image slider to Blogger.

What is Accordion Slider?

Features of Unleashed Accordion Image Slider:

• It is built with high speed Jquery so no compromise on Site speed.
• You can easily customize it style according to your needs.
• It has multiple animated hover transactions.
• Ability to add more than one slider on the same page.
• Allows to add Six images with transparent background.
• Works perfectly on multiple browsers i.e. Opera, Chrome, internet explorer and etc.

How To Install It in Blogger:

• Go to Blogger.com >> Template >> Edit HTML >> Proceed.
• Now search for ]]></b:skin> and once you find it, just above it paste the following Styling code.

/*  ExE Accordion Image Slider For Blogger (www.exeblogger.blogspot.com) */
.ExEwrapaccordion {
 margin-left: auto;
 margin-right: auto;
 width: 890px;
}
.caption_home{
 position:absolute;
 left:0;
}
 .Accordionlink  { display:none !important;}           
                     
ExEover, #ExEover2, #ExEover3, #ExEover4, #ExEover5, #ExEover6 {
 overflow:hidden;
 display:block;
 position:relative;
 display:inline-block;
}
.ExEContainer {
 overflow: hidden;
 display:block;
 -moz-box-shadow: -5px 0px 5px rgba(1, 1, 1, 0.3);
 -webkit-box-shadow: -5px 0px 5px rgba(1, 1, 1, 0.3);
 box-shadow: -5px 0px 5px rgba(1, 1, 1, 0.3);
 position:absolute;
 cursor: pointer;
 float:left;
 display: inline-block;
 zoom: 1;
}
.ExEContainer img {
 position:relative;
}
.caption {
 position:absolute;
 background:rgba(1, 1, 1, 0.4);
 padding:20px;
 left:0;
}
.caption p {
 color:#FFF;
 font-family:Arial, Helvetica, sans-serif;
 margin:0px;
 font-size:12px;
 line-height:1.6;
}
.caption h1 {
 color:#CCC;
 font-size:16px;
 font-weight:normal;
 font-family:Arial, Helvetica, sans-serif;
 margin:0px;
 margin-bottom:5px;
}
.caption a {
 text-decoration:none;
}
.caption_1 {
 position:absolute;
 padding:20px;
 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
 box-shadow:inset 0px 1px 0px 0px #ffffff;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
 background-color:#ededed;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #dcdcdc;
 display:inline-block;
 text-shadow:1px 1px 0px #ffffff;
 margin:0px 20px 20px 20px;
 left:0;
}
.caption_1 p {
 color:#999;
 font-family:Arial, Helvetica, sans-serif;
 margin:0px;
 font-size:12px;
 line-height:1.6;
}
.caption_1 h1 {
 color:#666;
 font-size:16px;
 font-weight:normal;
 font-family:Arial, Helvetica, sans-serif;
 margin:0px;
 margin-bottom:5px;
}
.caption_1 a {
 text-decoration:none;
}
.caption_2 {
 position:absolute;
 background: #F03;
 padding:20px;
 left:0;
 margin:0px 20px 20px 20px;
 border-right: 1px solid #FF8080;
 border-bottom: 1px solid #FF8080;
}
.caption_2 p {
 color:#FFF;
 font-family:Arial, Helvetica, sans-serif;
 margin:0px;
 font-size:12px;
 line-height:1.6;
}
.caption_2 h1 {
 color:#EFEFEF;
 font-size:16px;
 font-family:Arial, Helvetica, sans-serif;
 margin:0px;
 margin-bottom:5px;
}
.caption_2 a {
 text-decoration:none;
}
.caption_3 {
 position:absolute;
 background: rgba(255, 255, 255, 0.7);
 padding:20px;
 left:0;
 margin:0px 20px 20px 20px;
 border: 1px solid #fff;
}
.caption_3 p {
 color:#666;
 font-family:Arial, Helvetica, sans-serif;
 margin:0px;
 font-size:12px;
 line-height:1.6;
}
.caption_3 h1 {
 color:#333;
 font-size:16px;
 font-family:Arial, Helvetica, sans-serif;
 margin:0px;
 margin-bottom:5px;
}
.caption_3 a {
 text-decoration:none;
}
.caption_4{
 position:absolute;
 background: #111725 url(../images/top_2.png) top repeat-x;
 padding:20px;
 left:0;
 margin:0px 20px 20px 20px;
}
.caption_4 p {
 color:#FFF;
 font-family:Arial, Helvetica, sans-serif;
 margin:0px;
 font-size:12px;
 line-height:1.6;
}
.caption_4 h1 {
 color:#CCC;
 font-size:16px;
 font-family:Arial, Helvetica, sans-serif;
 margin:0px;
 margin-bottom:5px;
}
.caption_4 a {
 text-decoration:none;
}

• Then within the template search for </head> and just above it paste the following JavaScript coding.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script src='https://mybloggerlab.googlecode.com/files/jquery.unleash.min.js' type='text/javascript'/>
<script src='https://mybloggerlab.googlecode.com/files/jquery.animation.easing.js' type='text/javascript'/>

<script type='text/javascript'>
    $(window).load(function() {
        $('#ExEover').unleash({
 duration: 700,
 childClassName: '.ExEContainer',
 captionClassName: '.caption_home',
        SliderWidth: '890px',
        SliderHeight: '300px',
        width: 590,
        Event: "hover",
        easing:  "quadEaseOut",
 captionEasing:  "backEaseInOut",
        CollapseOnMouseLeave: true,
         CaptionAnimation: "pop-up"
   });
    });
    </script>

• Save the template and half of your work is almost done.
• Now paste the following HTML Structure code where you want to show this Accordion Slider i.e. Layout >> Add a Gadget >> Add HTML/JavaScript >> and paste the following code.

<div class="ExEwrapaccordion">
<div id="ExEover">
<div class="ExEContainer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5_bAK_XA16sK5jhwaMGxJUv1Vucjo3nHXcyTJ1WJtB_LlI6Pf996QRTWQIJV89bBwiQlNtX8ph7M1G0ncTFotsAX0v87EYinCAg3XMSstjzMcBz4HiPwPr3KieoqvX4VYcbDEUwkFR1aR/s1600/b1.jpg"/>
<div class="caption_home">
<a href="Your-Post-URL"><img src="Your-Image-Here"/></a>
</div>
</div>
<div class="ExEContainer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg53hpPGIfa_TQihpEanCm6oIXLL8QCQoz9weIK4SkmLSDIFjyvGN2Kh8Z1omhyphenhyphenXq6ovrBlJxXlPZTOR3Q6oXAtQGMxIItEFzhJD5Wv3Fg5Xv9zhYDWwdP4mz3XdoqmbSoRrlAzCE9PaL_w/s1600/b2.jpg"/>
<div class="caption_home">
<a href="Your-Post-URL"><img src="Your-Image-Here"/></a>
</div>
</div>
<div class="ExEContainer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFh6hyphenhyphen4lSkyFjvFY7srk8q-SzZMrV98EfFSnKjphe1MWxQ9XaDIo2LYqc9hl19yS5pNLZpgiH6ISTlASqYio8qbiS04x3sZya0T0AcBTMuVByl4BhYVs5jRhG4OMoQEhNj2YvnS4GLKnp/s1600/b3.jpg"/>
<div class="caption_home">
<a href="Your-Post-URL"><img src="Your-Image-Here"/></a>
</div>
</div>
<div class="ExEContainer"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWfjoUkmbd9-yAocyzOFs0JK-AmE11SB1aKuBRq8_AWwt590z8gusHSij6iGiJLElVWuqVvgdGgEc4YavqnwE0V-N01cuk_49nFlUDf0IEGwJmd8pkSOEIuQ2IVgDSrI_MGWjlpGH4TL1c/s1600/b4.jpg"/>
<div class="caption_home">
<a href="Your-Post-URL"><img src="Your-Image-Here"/></a>
</div>
</div>
<div class="ExEContainer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_zQj09DfIqdUBrlJeiddT0k0cI04gB_zsDW4H-NUHfoaGw7dV_AU7FJDcSDbLEbmqccgOGke7-Go6odbBzkTPiJPpTFzx6bC6NzNJjg7p14HpUVjFd5baT-hnb-2CFbjqE_oKRWNieE/s1600/b5.jpg"/>
<div class="caption_home">
<a href="Your-Post-URL"><img src="Your-Image-Here"/></a>
</div>
</div>
<div class="ExEContainer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbEVy1P_QJkp2UWW1uNmcqxoBMIeSWTASDP1M5mC7WoONpuyPPcRBTV19lfahGX7_x2-hV0_Mc_H86AnGLg_CM0ZxRJ5_iMf-PayxfJGUmwcKLRfT5CifZptuP8OJmkDFKUPyejrQSClIl/s1600/b6.jpg"/>
<div class="caption_home">
<a href="Your-Post-URL"><img src="Your-Image-Here"/></a>
</div>
</div>
</div>
<div class="Accordionlink"><a href="www.exeblogger.blogspot.com">ExE Blogger</a><div>
<div>
<img alt="logo" class="logo" height="26" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqtyQLvuFyT00WYKV_HMIR0AZh04HV6jofxyE08HAJahuwteUXA38j7uXExOU4JJVdK3cPHFd_-EIMRtO2BC0hG95tqrwFpdmgIgGhT1kvFZOQGbOnv9DuGUhGsnDePqtb-twM85G8t-lO/s1600/shadow_2.png" width="890px"/>
</div>
</div>
<div class="Accordionlink"><a href="www.exeblogger.blogspot.com">ExE Blogger</a><div>
<div>

Customization:

• Replace Your-Image-Here with your featured images. Remember: Use Transparent images otherwise the background will be hidden and save it in PNG format.
• To change the width of your slider replace 890px From CSS, JavaScript and HTML Structure coding. Remember: you have to change it Three times from the above coding.
• Replace Your-Post-URL with your specific URL that you want to target once your visitors will click certain image on accordion slider.

Author: Muhammad Usman Ghani

Related Posts: