The biggest headache of a Blogger is to design his weblog inward such a way that his visitors cannot maintain without appreciating his hard work. Have you lot e'er seen an Accordion icon slider that plant whenever somebody hovers over it? For WordPress users, Accordion Slider is non novel because it is a robust platform. Since, Blogger Platform doesn’t back upward 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 lastly 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 ship 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 equally good 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 expect to your site. Moreover, it is a variety of JavaScript share that operates on hover.Features of Unleashed Accordion Image Slider:
- It is built alongside high speed Jquery in addition to then no compromise on Site speed.
- You tin easily customize it fashion according to your needs.
- It has multiple animated hover transactions.
- Ability to add together to a greater extent than than ane slider on the same page.
- Allows to add together Six images alongside transparent background.
- Works perfectly on multiple browsers i.e. Opera, Chrome, cyberspace explorer in addition to etc.
How To Install It inward Blogger:
The steps are extremely straightforward in addition to would hardly accept fifteen minutes to consummate the integration in addition to then practice equally mentioned below.
- Go to Blogger.com >> Template >> Edit HTML >> Proceed.
- Now search for ]]></b:skin> and ane time you lot honor it, but higher upward 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( pump 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 corporation #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 corporation #FF8080;
border-bottom: 1px corporation #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 corporation #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) tumble out 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 but higher upward 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 you lot 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="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 in addition to relieve it inward PNG format.
- To alter the width of your slider replace 890px From CSS, JavaScript in addition to HTML Structure coding. Remember: you lot own got to alter it Three times from the higher upward coding.
- Replace Your-Post-URL with your specific URL that you lot desire to target ane time your visitors volition click sure enough icon on squeeze box slider.
All Done: Once you lot own got fully customized your slider larn in addition to relieve your Gadget. Now larn ahead in addition to watch your site to witness incredible unleashed squeeze box slider.
From The Editor’s Desk:
Hope you lot own got enjoyed the roller-coaster ride if you lot experience whatever difficulty piece adding this widget experience costless to move out your comments. Till appointment MBL Blog has produced l fantabulous widgets For Blogger Platform in addition to this may non been possible without your support.. If you lot own got whatever employment or complain well-nigh your services experience costless to move out your comment till than peace, Blessing in addition to Happy Celebrating. Credits:
Related Widgets:
Related Widgets:
No comments:
Post a Comment