Jquery Unleash Accordion Image Slider For Blogger

The biggest headache of a Blogger is to design his weblog inwards such a way that his visitors cannot maintain without appreciating his hard work. Have yous always seen an Accordion icon slider that plant whenever mortal hovers over it? For WordPress users, Accordion Slider is non novel because it is a robust platform. Since, Blogger Platform doesn’t back upwards pregnant designer languages similar PHP, ASP. Therefore, nosotros own got less efficiency of creating something out of this world, in addition to unwillingly nosotros own got to depend alone on HTML, CSS in addition to JavaScript. However, later hours of coding our handwork survive paid off because nosotros were able to practise an Unleashed Accordion Image Slider for blogger adapted from WordPress. Today nosotros volition live integrating MBL Accordion Features post service icon slider to Blogger.


What is Accordion Slider?

Majority of Webmasters don’t know what does Accordion way because the same discussion is likewise used for a musical instrument. However, an Accordion slider is a type of a widget that holds images together in addition to gives an entire novel await to your site. Moreover, it is a variety of JavaScript business office that operates on hover.

Features of Unleashed Accordion Image Slider:

  • It is built amongst high speed Jquery in addition to thence no compromise on Site speed.
  • You tin give notice easily customize it fashion according to your needs.
  • It has multiple animated hover transactions.
  • Ability to add together to a greater extent than than 1 slider on the same page.
  • Allows to add together Six images amongst transparent background.
  • Works perfectly on multiple browsers i.e. Opera, Chrome, cyberspace explorer in addition to etc.

How To Install It inwards Blogger:

The steps are extremely straightforward in addition to would hardly accept fifteen minutes to consummate the integration in addition to thence practise every bit mentioned below.
  • Go to Blogger.com >> Template >> Edit HTML >> Proceed.
  • Now search for ]]></b:skin> and 1 time yous uncovering it, only to a higher identify it glue the next Styling code.

/*  MBL Accordion Image Slider For Blogger (www.mybloggerlab.com) */
.MBLwrapaccordion {
 margin-left: auto;
 margin-right: auto;
 width: 890px;
}
.caption_home{
 position:absolute;
 left:0;
}
 .Accordionlink  { display:none !important;}          
                    
MBLover, #MBLover2, #MBLover3, #MBLover4, #MBLover5, #MBLover6 {
 overflow:hidden;
 display:block;
 position:relative;
 display:inline-block;
}
.MBLContainer {
 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;
}
.MBLContainer 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( middle 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 company #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 company #FF8080;
 border-bottom: 1px company #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 company #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) travel past times 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 inside the template search for </head> in addition to only to a higher identify it glue the next 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() {
        $(‘#MBLover’).unleash({
duration: 700,
childClassName: ‘.MBLContainer’,
captionClassName: ‘.caption_home’,
        SliderWidth: ‘890px’,
        SliderHeight: ‘300px’,
        width: 590,
        Event: “hover”,
        easing:  “quadEaseOut”,
captionEasing:  “backEaseInOut”,
        CollapseOnMouseLeave: true,
         CaptionAnimation: “pop-up”
});
    });
    </script>


  • Save the template in addition to one-half of your piece of work is almost done.
  • Now glue the next HTML Structure code where yous desire to exhibit this Accordion Slider i.e. Layout >> Add a Gadget >> Add HTML/JavaScript >> in addition to glue the next code.
<div class=”MBLwrapaccordion”>
<div id=”MBLover”>
<div class=”MBLContainer”>
<img src=”http://2.bp.blogspot.com/-PfwY96xdTu4/UFMppL1B8uI/AAAAAAAAFTQ/vjAuwoJAWec/s1600/b1.jpg”/>
<div class=”caption_home”>
<a href=”Your-Post-URL“><img src=”Your-Image-Here”/></a>
</div>
</div>
<div class=”MBLContainer”>
<img src=”http://1.bp.blogspot.com/-9rmNVAnmcY8/UFMpq-aP9II/AAAAAAAAFTY/ae9Er7iRQfE/s1600/b2.jpg”/>
<div class=”caption_home”>
<a href=”Your-Post-URL“><img src=”Your-Image-Here”/></a>
</div>
</div>
<div class=”MBLContainer”>
<img src=”http://1.bp.blogspot.com/-aie7ZqfSH34/UFMpsUODQ6I/AAAAAAAAFTg/7E10uvUD4T4/s1600/b3.jpg”/>
<div class=”caption_home”>
<a href=”Your-Post-URL“><img src=”Your-Image-Here”/></a>
</div>
</div>
<div class=”MBLContainer”><img src=”http://2.bp.blogspot.com/-7wL4licVv8U/UFMptsEFrTI/AAAAAAAAFTo/8zcDhMntmzs/s1600/b4.jpg”/>
<div class=”caption_home”>
<a href=”Your-Post-URL“><img src=”Your-Image-Here”/></a>
</div>
</div>
<div class=”MBLContainer”>
<img src=”http://4.bp.blogspot.com/-GBAKAMmv1vE/UFNjUn2VKHI/AAAAAAAAFUg/qlKceFhNsTM/s1600/b5.jpg”/>
<div class=”caption_home”>
<a href=”Your-Post-URL“><img src=”Your-Image-Here”/></a>
</div>
</div>
<div class=”MBLContainer”>
<img src=”http://1.bp.blogspot.com/-GIXByirH7Bg/UFMpvnql_3I/AAAAAAAAFT4/54jbNn5ZAvA/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.mybloggerlab.com”>MBL</a><div>
<div>
<img alt=”The biggest headache of a Blogger is to Jquery Unleash Accordion Image Slider For Blogger” class=”logo” height=”26″ src=”http://1.bp.blogspot.com/-bKa1d1tUHCU/UFMqYBS3LKI/AAAAAAAAFUA/P-RzX-3-jEo/s1600/shadow_2.png” width=”890px”/></div>
</div>
<div class=”Accordionlink”><a href=”www.mybloggerlab.com”>MBL</a><div>
<div>


Customization:
  • Replace Your-Image-Here with your featured images. Remember: Use Transparent images otherwise the background volition live hidden in addition to salve it inwards PNG format.
  • To alter the width of your slider replace 890px From CSS, JavaScript in addition to HTML Structure coding. Remember: yous own got to alter it Three times from the to a higher identify coding.
  • Replace Your-Post-URL with your specific URL that yous desire to target 1 time your visitors volition click surely icon on pianoforte accordion slider.
All Done: Once yous own got fully customized your slider become in addition to salve your Gadget. Now become ahead in addition to view your site to witness incredible unleashed pianoforte accordion slider.

From The Editor’s Desk:

Hope yous own got enjoyed the roller-coaster ride if yous experience whatever difficulty spell adding this widget experience costless to larn out your comments. Till engagement MBL Blog has produced l first-class widgets For Blogger Platform in addition to this may non been possible without your support.. If yous own got whatever work or complain most your services experience costless to larn out your comment till than peace, Blessing in addition to Happy Celebrating. Credits: alialaa

Related Widgets:


Sumber http://www.mybloggerlab.com