Grid Squeeze Box Portfolio Photograph Gallery For Blogger

Blogger is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes it’s extremely tough for novel bloggers to optimize. However, WordPress users own got for certain satisfaction that they tin easily integrate anything without in addition to stress or coding knowledge. This doesn’t hateful that Blogger is useless or worthless if nosotros utilize Blogger amongst its potentials than nosotros tin boom everything that nosotros own got on WordPress. So whatever gauge what nosotros own got for you lot today? Yes, Accordion Image Gallery Widget for Blogger is something that volition create amount your rima oris amongst H2O because this Accordion agency Photo Gallery volition convey life to your blogger blog. As nosotros all know Accordion plant on Hover, thence similarly whenever you lot volition hover over or house your mouse over whatever icon it volition zoom into the image.  So let’s acquire on amongst our Tutorial.

Before nosotros start working on our Tutorial outset allow us await at MBL Grid Accordion Image Gallery widget for Blogger. (Don’t forget to hover over images).

Grid Accordion Portfolio Photo Gallery (Live DEMO)

What is GRID Accordion?

Grid squeeze box is the combination of thumbnails grids in addition to squeeze box panel that allows you lot to display your portfolio inwards an oculus catching method. This widget is thence flexible that you lot tin integrate it XML, HTML or whatever other platform.

>Features of Accordion GRID Image Gallery:

• This squeeze box widget tin own got upwards to twenty images. However, you lot tin optimize acceding to your needs.
• Since alone ii Jquery files are used inwards this widget, thence it volition non going to impairment your website speed.
• Its API has the mightiness to accept shape of whatever application.
• It Supports caption amongst normal text of HTML Coding.
• This widget supports nearly every browser i.e. Google Chrome, Internet Explorer, in addition to etc.  

How To Install GRID Accordion Image Gallery inwards BlogSpot:

The steps are neither extremely complicated in addition to nor you lot require to larn HTML to integrate this widget inwards Blogger. Just follow the steps in addition to you lot volition successfully integrate this widget inwards 10 minutes.

• Go To Blogger.com >> Your Blog >> Template
• Then press Edit HTML >> in addition to Proceed.
• Now Finally Search for ]]></b:skin> and only inwards a higher house it glue the next 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/AVvXsEien_d0EFDFSsYa_YHq7eBvrKKOO5kORVw2IJw5EwjNVWEAwgRMOQ9aInOwr6EE-6zuTr_GQmYLsbH4nPni3yBqz5HtH6WlkFbyZytxEgXnEFwiMYFpxQ_tEUJCfcdMqW_FtqqbgO9IEsTv/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/AVvXsEippPTR_ptX2HeQEPOeypp64TpTcd0-C1FGeji4cC2AEnvHAtzdzZjwAcAhyuPvu_b19G983CoOs6amzrwfFdeZiBadSIBh8n84M-5N2tdwOzhHZfzmG9tdKFFU8SYtGZMe_szhnLnAeZKd/s1600/shadow.png) repeat-Y; position:absolute; right:0px; width:25px; height:100%; } .mblaccordion .preloader { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJpSB4VOUm6goQugJdYGTxi4b6fd3Vq03-grVHubAiJ7gITKkqq6gxalRv_zAUJKE_IUeWf-p9HUo6g8vkt8KlaA8yDUmSHcYEu8cfolraU95E5il9q9RBVLDfhnW8gLXGea2LaLE-ToBF/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/AVvXsEjhHWKJeokUyBkCflxor_YQQCTWe9M25yMAnIRK5HarjrJXyyFWtoHFcgUEbrU9Kat4XodI2xAiflkQYhYLy0hhYWeq2WSjcvvUZAtexwFpJFO5of31wKoFD5qS6hKigVzmEjX1UBCWunIF/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 corporation #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 car 0px; } #navigation a { background-color:#F1F1F1; text-decoration:none; color:#999; padding:5px 10px; margin:0px 4px; border:#FFF corporation 2px; }

• Now Search For </head> in addition to  above it glue the next 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 glue the next HTML Code according to your need. i.e. Posts or Layout. 

• For Layout: Go to  Add a Gadget >> HTML/JavaScript in addition to glue the Following Code. 
• For Posts: Go to Add novel Post >> Select HTML Tab >> And glue the next code.

<!-- MyBloggerLab.com Accordion GRID IMAGE GALLERY FOR BLOGGER --> <ul class="mblaccordion"> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="mage-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption"> Text </div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption"> Text</div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption"> Text </div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src=" Image-Here " alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here " alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt=" is non a robust blogging platform inwards price of designing in addition to optimizing because sometimes Grid Accordion Portfolio Photo Gallery For Blogger"background-color: cyan;">ALT"/> <div class="caption">Text</div> </li> </ul>

Customization:

• Replace Image-Here amongst the images of your photograph gallery.
• Replace Text amongst the judgement that you lot desire to demo on your image.
• Replace 940 if you lot desire to arrange the width of the photograph gallery.
• Replace 680 if you lot similar to modify the height.
• You tin fifty-fifty increase the release of columns past times changing columns:5. according to your need.

All Done: Now afterward customizing salve it in addition to that't it. If you lot got stuck inwards middle in addition to then don't forgot to live on out a comment. till then, peace, blessings in addition to happy blogging.

Credits: Since this widget is created past times MyBloggerLab.com its strictly prohabitated to reproduce it without giving proper credits. Please attain plow over credits to proceed the surroundings clean. 

Acknowledgment: Special Thanks to bqworks.com for all their back upwards in addition to frequent help.