The biggest headache of a Blogger is to design his weblog inwards such a way that his visitors cannot happen without appreciating his hard work. Have yous e'er seen an Accordion icon slider that industrial 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 possess got less efficiency of creating something out of this world, as well as unwillingly nosotros possess got to depend exclusively on HTML, CSS as well as JavaScript. However, afterward hours of coding our handwork live paid off because nosotros were able to practice an Unleashed Accordion Image Slider for blogger adapted from WordPress. Today nosotros volition live integrating MBL Accordion Features transportation service icon slider to Blogger.
What is Accordion Slider?
Majority of Webmasters don’t know what does Accordion agency because the same give-and-take is every bit good used for a musical instrument. However, an Accordion slider is a type of a widget that holds images together as well as gives an entire novel await to your site. Moreover, it is a sort of JavaScript business office that operates on hover.Features of Unleashed Accordion Image Slider:
- It is built amongst high speed Jquery as well as hence no compromise on Site speed.
- You tin easily customize it mode 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 as well as etc.
How To Install It inwards Blogger:
The steps are extremely straightforward as well as would hardly possess got fifteen minutes to consummate the integration as well as hence practice every bit mentioned below.
- Go to Blogger.com >> Template >> Edit HTML >> Proceed.
- Now search for ]]></b:skin> and 1 time yous discovery it, merely inwards 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( optic 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 enterprise #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 enterprise #FF8080;
border-bottom: 1px enterprise #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 enterprise #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) laissez passer on 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> as well as merely inwards 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 as well as 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 >> as well as glue the next code.
<div class="MBLwrapaccordion"><div id="MBLover"><div class="MBLContainer"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8T3lJD1_ccebqzWtuc6wzyajE2QRkJ0ncwnjkyMLxuXkt4P8CLDa3kR7YgAeda5P_dPzV16t-CEgax4FNZ_WMU6or_TWBnyjJ_zbds5LVaHbgp-0PhR0oKPNumIyUgKNQuRZW6XV6qraX/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/AVvXsEjr6W3y8ESzOpPoJZeTDM73MHbLPLrMwakZuxdb_KDGb78hhIpifjw4sh9CX1gh3CrX_rkLAap4dv2CyM2yvMrHpcR-8oeyYcOYvFqdmWVfh-r2WWVIV6wp1FsxUNGDKoVBr6wOLYi0PGxI/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/AVvXsEhnQqk188-0DMcF-Dkedpe0iJcH-pIlH4R3tyuz2pVuMpLKDTjyrUZGEb5pZbbYaN7R-qfEN-UxN09srLxX7toV7oy-j6NMm3_fe6vzEbA_6T3YburRbm5u5hpHIiin3tM5RoPIB3xlXtmQ/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/AVvXsEjRrQrrs8SDCy-nkjhOLSTzs5lrvWuacSacEHN4AyPZB0cNm_Y9czZZ2SczaIGuu-B2SSmIRYXBo-PO7DOmGQ7gFlgB33-Pc1wRtxMaRUGGxjSdpEXTe9cvtRlckQQVkidbC3LH9qYSNsuw/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/AVvXsEgcCVHeXa9-8vu8veZ2nzRisxO5tPB_F_VXAf8qbsrFtKTVEZLyM0WRdaWJy0tAkROcR2iBw4IcH7UHnpIt8bt2CcxOnOwQwXj_5_xKdmGXi_qxRtOA9M4qtYTQTvMqr4ktt4Ow6594AEU/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/AVvXsEgmbabfC0WyRiDaXJVHyZOvhW-jvZZsqZm-QzNE4Gb9AqAaUn3dSvOkfsoBvao5NajlCTvL-Jzx6y2iZlzldl0ghlPrOAvraFCI5_ao3MZ6aYaJpSghcXNFZxLAPfII1eG0l3E6kcp2yrDc/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbI7p333LAt2_dxnNUGhe5fLVLD7ZEXZlZbVm6031yRWjoSFXsLHNNd5XTI3GqyvROk_JrPdaCdB5NWCPP_LVhdmF3sIPUZ-EmjcWq5qf39Hd12vuuiFPN-5fqWi540a2r9LhXnZ9ll10Q/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 as well as salvage it inwards PNG format.
- To alter the width of your slider replace 890px From CSS, JavaScript as well as HTML Structure coding. Remember: yous possess got to alter it Three times from the inwards a higher identify coding.
- Replace Your-Post-URL with your specific URL that yous desire to target 1 time your visitors volition click sure enough icon on squeeze box slider.
All Done: Once yous possess got fully customized your slider become as well as salvage your Gadget. Now become ahead as well as view your site to witness incredible unleashed squeeze box slider.
From The Editor’s Desk:
Hope yous possess got enjoyed the roller-coaster ride if yous experience whatever difficulty spell adding this widget experience costless to teach out your comments. Till engagement MBL Blog has produced fifty fantabulous widgets For Blogger Platform as well as this may non been possible without your support.. If yous possess got whatever work or complain most your services experience costless to teach out your comment till than peace, Blessing as well as Happy Celebrating. Credits:
Related Widgets:
Related Widgets:
No comments:
Post a Comment