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.
/*---bsresearcher.blogspot.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/AVvXsEhSlXVk3tF3wjC2aQmpqm1GPI0XwkI79MM3Moa9KRa95tl544hRB9s3FgEaPwUg1J-whTmhBR2f4U9xdrhJwLPKZh4XnUktJe6QKhZO8u0i_Qr-5xmJ67ZZesf2n42wD6abqZdJ7xwi_WSg/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/AVvXsEgPnYiDMqAk5Q608XuSrY8fxgvc7gsRUjchrMhIipqnozymuHNT1MVzp4ji-KTp8tCHGAkgDv5AcjQcGDWJ_0DxahaZa9m8j8tscF5iG6kOfV6cdoeBD-B-sxFGEOmkGkCVUZ6G4GQp7b7a/s1600/shadow.png) repeat-Y; position:absolute; right:0px; width:25px; height:100%; } .mblaccordion .preloader { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiLUqs5_dglPfKkP5gFIMub7IlNCXTrPTxDYYDoxAHSSwPfvoqO51dzCDdLErzVvxQp97uDlFUoWcL26xzK9E6a6e-9TG9u8xBlyf-UCzK3ANNCjk3H_6JCvRdxoEB14TOvg-BI0NO5Atk/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/AVvXsEiVYzjnQxAg5q86re6HuapPdNuZQ_GspEyHC-I2S1rbVnzIE4ZhOEOVTyROG4vJdjnG_btnfE3hA5U0-GjM4V2yHXIz39cT0zXoQRO3RRu3xxfzFxkc9C5RPGN50McvNErYupQrN2aXQq2E/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.
<!-- bsresearcher.blogspot.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 bsresearcher.blogspot.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.
Grid Accordion Portfolio Photo Gallery For Blogger
4/
5
By
Editorial Board
Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me.
Let’s enjoy a personal and evocative conversation. Thank You!