Blogger is not a robust
blogging platform in terms of designing and optimizing because sometimes it’s extremely
tough for new bloggers to optimize. However, WordPress users have certain
satisfaction that they can easily integrate anything without and stress or
coding knowledge. This doesn’t mean that Blogger is useless or worthless if we
utilize Blogger with its potentials than we can nail everything that we have on
WordPress. So any guess what we have for you today? Yes, Accordion Image
Gallery Widget for Blogger is something that will fill your mouth with water
because this Accordion style Photo Gallery will bring life to your blogger
blog. As we all know Accordion works on Hover, so similarly whenever you will
hover over or place your mouse over any image it will zoom into the image. So let’s get on with our Tutorial.
Before we start working on our Tutorial first let us look at MBL Grid Accordion Image Gallery widget for Blogger. (Don’t forget to hover over images).
What is GRID Accordion?
Grid accordion is the
combination of thumbnails grids and accordion panel that allows you to display
your portfolio in an eye catching method. This widget is so flexible that you
can integrate it XML, HTML or any other platform.
>Features of Accordion GRID Image Gallery:
- This accordion widget can have up to 20 images. However, you can optimize acceding to your needs.
- Since only 2 Jquery files are used in this widget, so it will not going to harm your website speed.
- Its API has the ability to take shape of any application.
- It Supports caption with normal text of HTML Coding.
- This widget supports almost every browser i.e. Google Chrome, Internet Explorer, and etc.
How To Install GRID Accordion Image Gallery in BlogSpot:
The steps are neither extremely
complicated and nor you need to learn HTML to integrate this widget in Blogger.
Just follow the steps and you will successfully integrate this widget in 10 minutes.
- Go To Blogger.com >> Your Blog >> Template
- Then press Edit HTML >> and Proceed.
- Now Finally Search for ]]></b:skin> and just above it paste the following CSS Code.
/*---MyBloggerLab.com GRID Accordion Widget For Blogger ---*/ .mblaccordion { position:relative; overflow:hidden; } .mblaccordion .panel { background-color:#000; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BZ0JRXILRlEy2leQX9nrp9yYgkXRBeY-fNXNI1nHowVmdGs8acyd7ImdIAWzdO-d_c9rFDaQfovEm2IuYtwVmEyDORW8TQMBeKeJPx0lb1dkQN4FZ8dewaZ0oBBQh_k4j06rKAiEZOYH/s1600/preloader.gif); background-repeat:no-repeat; background-position:center center; position:absolute; overflow:hidden; } .mblaccordion .shadow { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQQqOausUZawvZMQgOPiJc5AG_OJzNVZe-5JwhdStw2W2KNLTLVu58y22P0Cy5mDomPwN5mk2aYGvH-1NMCneSAeAH4wKN3DJNKocbeJLfsVgDIQq8QM0CjvyJL1JUxloQS4XHDJVOg27p/s1600/shadow.png) repeat-Y; position:absolute; right:0px; width:25px; height:100%; } .mblaccordion .preloader { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSl9MGI8d68_Uqz873PRYDkNPaAkrrcd0GhFUo9988fKo0l75VwSbzSRy5FkX2roiPlNmYJqO8k8gOddatka53YC8PRzSSaWivmKRNL5NfW0YIow1J6Hi1z_AiHUldIJSWlzb_ZoM3cRTU/s1600/preloader2.gif) no-repeat; width:62px; height:14px; position:absolute; z-index:15; } .mblaccordion .caption { overflow:hidden; position:absolute; z-index:20; } .mblaccordion .caption-background { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG_XPaEF59J-qAgEIo0itoTLt3QLunksiqyWTmvuSp79S-cystOuBjpNbdzIEXtKCeYncBuQWoDOng4Tcitr-bja1LWQS_2wHoEHwgLg0PltiUuVWSW_tKTuP14OsGJJo50bshRtDAcLnf/s1600/captionBg.png); background:rgba(0,0,0,0.5); position:absolute; width:100%; height:100%; } .mblaccordion .caption p { color:#FFF; margin:0px; padding:10px; } .mblaccordion .caption p a { color:#FFF; } .mblaccordion { background-color:#FFF; border:4px solid #FFF; } .mblaccordion .panel { background-color:#EEE; } .mblaccordion { width:1200px; margin:0px auto; list-style:none; padding:0px; } .mblaccordion img, .mblaccordion .caption { position:absolute; left:-9999px; } #navigation { width:200px; height:25px; margin:60px auto 0px; } #navigation a { background-color:#F1F1F1; text-decoration:none; color:#999; padding:5px 10px; margin:0px 4px; border:#FFF solid 2px; }
- Now Search For </head> and above it paste the following JavaScript code.
<script type="text/javascript" src="http://mbl-flipper-google-blogger.googlecode.com/files/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://mbl-flipper-google-blogger.googlecode.com/files/jquery.gridAccordion.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ $('.mblaccordion').gridAccordion({width:940, height:680, columns:5, distance:2, closedPanelWidth:10, closedPanelHeight:10, alignType:'centerCenter', slideshow:true, panelProperties:{ 0:{captionWidth:200, captionHeight:35, captionTop:30, captionLeft:30}, 4:{captionWidth:150, captionHeight:100, captionTop:30, captionLeft:650}, 7:{captionWidth:310, captionHeight:35, captionTop:350, captionLeft:40}, 8:{captionWidth:300, captionHeight:40, captionTop:150, captionLeft:35}, 11:{captionWidth:150, captionHeight:120, captionTop:300, captionLeft:30}, 14:{captionWidth:300, captionHeight:40, captionTop:30, captionLeft:50}, 16:{captionWidth:150, captionHeight:120, captionTop:150, captionLeft:10}, 18:{captionWidth:300, captionHeight:40, captionTop:130, captionLeft:50} }}); }); </script>
Now paste the following HTML Code according to your need. i.e. Posts or Layout.
- For Layout: Go to Add a Gadget >> HTML/JavaScript and paste the Following Code.
- For Posts: Go to Add new Post >> Select HTML Tab >> And paste the following code.
<!-- MyBloggerLab.com Accordion GRID IMAGE GALLERY FOR BLOGGER --> <ul class="mblaccordion"> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="mage-Here" alt="ALT"/> <div class="caption"> Text </div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption"> Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption"> Text </div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src=" Image-Here " alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here " alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> </ul>
Customization:
- Replace Image-Here with the images of your photo gallery.
- Replace Text with the sentence that you want to show on your image.
- Replace 940 if you want to adjust the width of the photo gallery.
- Replace 680 if you like to change the height.
- You can even increase the number of columns by changing columns:5. according to your need.
All Done: Now after customizing save it and that't it. If you got stuck in middle then don't forgot to leave a comment. till then, peace, blessings and happy blogging.
Credits: Since this widget is created by MyBloggerLab.com its strictly prohabitated to reproduce it without giving proper credits. Please do give credits to keep the environment clean.
Acknowledgment: Special Thanks to bqworks.com for all their support and frequent help.
Acknowledgment: Special Thanks to bqworks.com for all their support and frequent help.
About the Editorial TeamThe Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
4 comments
Nice your faizy.
interesting information. i can't remember all this, especially when i need to use it.
SUPER =))
This should generate some interest for people's blogspot as portfolio galleries is always nice to look at.
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.