How to Add Light Gallery in Blog Theme
How to Add Light Gallery in Blog Theme - This Light Gallery serves to display the gallery of images or video when we open a picture or video on the blog. Light Gallery is a plugin for a website created by Sachin N at Github. For the function in my opinion almost the same as Lightbox already in Blogger, but with better features. Sperti has support Responsive, shiftable image gallery, more attractive display, buttons for downloading fullscreen images and buttons, smoother transitions, and other advantages that Blogger's default Lightbox does not have.
If you are interested to use it, you can immediately follow some steps about How to Add Light Gallery in Blog Theme below.
1. Before adding Light Gallery we recommend disabling the default Blogger Lightbox in Blogger Settings
2. First open the Blog Editor Template, add the code below just before the template closing body like this </body>
3. For those who have optimized images on posts by removing imageanchor ="1" and replacing border = "0" with style = "border: none;", use the code below
4. If you only want to display on a particular page, please wrap the code above with the Conditional Tag.
5. Then find the post-body code as below
Note: The above code may differ depending on the theme used
6. Replace with the code below
7. Save the template and finish.
To see the demo you can see in the demo link below.
And for more complete settings you can see in sachinchoolur
That's tips on How to Add Light Gallery in Themes Blog, hopefully with a short enough article this can be useful and good luck.
If you are interested to use it, you can immediately follow some steps about How to Add Light Gallery in Blog Theme below.
How to Add Light Gallery in Blog Theme
1. Before adding Light Gallery we recommend disabling the default Blogger Lightbox in Blogger Settings
2. First open the Blog Editor Template, add the code below just before the template closing body like this </body>
<script src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/c5d422c5/lightgallery.js'/>
<link href='https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[$('#animated-thumbnail').lightGallery({thumbnail:true,getCaptionFromTitleOrAlt:true,selector:"a[imageanchor]"});//]]></script>
3. For those who have optimized images on posts by removing imageanchor ="1" and replacing border = "0" with style = "border: none;", use the code below
<script src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/c5d422c5/lightgallery.js'/>
<link href='https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[$('#animated-thumbnail').lightGallery({thumbnail:true,getCaptionFromTitleOrAlt:true,selector:"a[style]"});//]]></script>
4. If you only want to display on a particular page, please wrap the code above with the Conditional Tag.
5. Then find the post-body code as below
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
Note: The above code may differ depending on the theme used
6. Replace with the code below
<div class='post-body entry-content' id='animated-thumbnail' itemprop='articleBody'>
7. Save the template and finish.
To see the demo you can see in the demo link below.
And for more complete settings you can see in sachinchoolur
That's tips on How to Add Light Gallery in Themes Blog, hopefully with a short enough article this can be useful and good luck.
Post a Comment for "How to Add Light Gallery in Blog Theme"
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog