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. 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. Since, Blogger Platform
doesn’t support significant designer languages like PHP, ASP. 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 MBL
Accordion Features post image slider to Blogger.
What is Accordion Slider?
Majority of Webmasters don’t know what does Accordion means because the same word is also used for a musical instrument. However, an Accordion slider is a type of a widget that holds images together and gives an entire new look to your site. Moreover, it is a kind of JavaScript function that operates on hover.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:
The steps are extremely straightforward
and would hardly take 15 minutes to complete the integration so do as mentioned
below.
- 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.
/* 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( 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() {
$('#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 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="MBLwrapaccordion"><div id="MBLover"><div class="MBLContainer"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWN_lP6oCB7OhNIambw5wb5yLGQWMta773Vyc7n-35V0tTBeUPA9Dcr7OVJ4KiNs8UuNTTCLYBPMbUGsrfRIefsU7LJtOa4f7agRTjM7taXepWStZLjf7ntyJmWhWKCpOIs9Ln8Tzymv7o/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Ye4BwWaTn8Ep73S4tNgjZIHVfsq04qSlyYDAsWbejbexeX5X8dawm_1TzkiwAZdqMd8iB4wCNElpj4gNJpxVoqjWNhCH5CIxCyDMKZOq2xyKwC6vl37EIC6HaHhn5J9ktNmMR-09O8YI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAmpKFhs0FtEuzoJio0oues3MKz7J50AAOwlqYC2OU53cBa-eUwdGlT_ipwAssV_40nBFCZxCvWuAhGajQGiy4gg0qVGsQm5wwdW8E0yLe56d7Gj7Ysv5FT6Nq2YW-XwiMLTyhAdXRHX6K/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Qdi4RxsW041UMc-fmuHn4pbgCgejuFSdve_e2M_BmvmKGfibMJT1lVSIGbDHRGNGsOFmkzlV4wq0obPRcSx7ey4WKOlwHUVXdiGOaXWmTXzbO9VD6V4tXR0Y4hu2WT0pAQEP6PKmeqOr/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3haq909NDC_JFbJe3cBQut37nefF8IJMUrbgHH2d_AclgBwEN-HgjUMa9lN6W9DOaVMHnVUeMXC3GD_ayJp6Zeqjp9U7qOvLYG2MF2ut5CGCUGndCcKjJXGf29uiOAnKy3oumoN6JrfU/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIW8reX8BlfcviU_TDXZHtyeVYR2JyVsieEUoodFi_Ek8OCmE7JPSz1OBJhPthekOxgfL5w0yugO6rwSh2eaVa-MmaWXfTo6u26M9GPjbqdVB1zH5tktoNVVe3I-jVI3dxa0JFWj89_qMP/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="logo" class="logo" height="26" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmEqQ-CA2kVb5zBRccDqf6H8uKnLpoclFhBnWRfnJ3DfxHdqGu0rD1ggA_3C7ftIIkzhV4nmyg46KTEgP7MwOHnbarksS-PKHgdYRAjb3Bsii_HqR_cRGdFF9_xWnsgW28CGqfq482vpsP/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 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.
All Done: Once you have fully customized
your slider go and save your Gadget. Now go ahead and visit your site to
witness incredible unleashed accordion slider.
From The Editor’s Desk:
Hope you have enjoyed the
roller-coaster ride if you feel any difficulty while adding this widget feel
free to leave your comments. Till date MBL Blog has produced 50 splendid
widgets For Blogger Platform and this may not been possible without your
support.. If you have any problem or complain about your services feel free to
leave your comment till than peace, Blessing and Happy Celebrating. Credits: alialaa
Related Widgets:
Related Widgets:
About the Editorial Team
The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
13 comments
interesting. but i can't memorize all those codes for when i want to try it out...
Thanks Dear, No Problem You can Copy it any time you like because we are here to Serve you. Peace and Blessings
Good One ;)
Nice to See you Back AT MBL, Stay in Touch Peace
Thanks for the code. It is valuable for me as I am cs student .
It's Good , But I think it will slow down the speed of blog
My Recent post-iPhone 5 launched - All you need to know
I Don't think so it will Effect your Page Speed. Since all the widget shared here are highly Compressed. Peace
nice post thanks for sharing
also visit http://www.sciencevilla.com
Dear Faizan can ho can i add more images in this accordion because i want to add minimum 20 to 30 pictures in slider kindly tel my how i do this
You can Add Unlimited Image Slider. So Just Do As follows
In the Above Coding Search For <div id="MBLover">
Once you Find it, Just Below it Paste This Coding.
<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>
By Doing This it will Add 1 More Slider to Your Accordion. Repeat this Process as many Time As you Like. Peace
Dear Colleague,
I started to follow your work recently and I'm quite pleased by their professionalism. I'm beginning to study Html, so obviously I have little understanding.
When I do the second step (Then Within the template search for and just above it paste The Following JavaScript coding.) Aparere this tutorial the following message:
Unable to scan your model because its formatting is inadequate. Make sure that all XML elements are closed properly.
XML error message: Element type "script" must be Followed by Either attribute specifications, ">" or "/>".
Error 500
What should I do in this case?
Thank you for sharing it so elegant.
Murilo Coffee | Brazil
This error indicates that you are not properly closing the Script tags. Make sure that the scripts tags are properly closed.
For Example:
<script> Your Code </script>
i think the error was in the last code of the DIV, it was not closed properly
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.