Grid Accordion Portfolio Photo Gallery For Blogger

Advertisements
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.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

4 comments

August 23, 2012 at 10:08 PM

Nice your faizy.

August 24, 2012 at 2:20 PM

interesting information. i can't remember all this, especially when i need to use it.

August 25, 2012 at 3:54 AM

SUPER =))

August 26, 2012 at 4:57 AM

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.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.