Responsive Image Gallery For Blogger [ Create With HTML And CSS ]

byMd. Sohel •
0

Responsive Image Gallery For Blogger [ Create With HTML And CSS ]

Responsive Image Gallery For Blogger


Today in this post, I will share How to Create Responsive Image Gallery For Blogger / Photo Gallery Embed with HTML And CSS in Blog Post. Video and Photo Design are Slider slideshow. 

We see many types of websites on the internet, Where photos of a product or the content of a blog post are neatly arranged and the photos are in the form of slideshows, which is very attractive to look at and responsive design of any mobile, PC, laptop, which is shows perfectly on all devices.

{tocify} $title={Table of Contents}


Benefits Of Creating Images, Images, Video Slider

Creating a video and photo / image slider is a very simple tool that allows you to display multiple images and videos to the users of your blog site with the best offers, highlighted content which helps a lot to attract visitors.  Which promotes your content with simple way.

You can use any of the slides designed below to display images of your site post product image or post content image and display highlighted hot offers and add some special effects and resize photos, images or videos to your liking and for the website, all  Widgets are arranged with high quality HTML and CSS code.

Image slider for Blogger website is very easy to add with HTML & CSS code. You do not need to know any kind of coding for this design.  Below are some Blogger widget designed codes for creating photo gallery for Blogger post, through which you can easily create very interesting photo gallery for your Blogger website.


How To Add Photo gallery widget for Blogger With HTML and CSS

Create Image gallery or photo gallery for your website post,Then you can design as per your choice from the following blew codes.


Style 1 - Photo Gallery For Blogger With HTML and CSS

  • Go to Blogger Dashboard 
  • Click Theme
  • Then, Edite Theme 
  • Now Search for <head> section and paste following blew code after <head> section.


<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


  • Now, Go to Blogger Dashboard 
  • Click Theme
  • Then, Edite Theme 
  • Now Search for </body> tag and paste blew javascript code above </body> tag.


<script>
    $(document).ready(function() {
        $('.bxslider').bxSlider({
            auto: true,
            pause: 50000,
 // in millisecond
            autoHover: true, // pause on hover
            autoControls: true,
            captions: false
        });
    });
</script>


  • Now, Create New Post and add blew HTML and CSS code where you want to add image slider in your post.


<style>
 .bxslider img{
width:100%;
height:400px;
}
.bx-wrapper img {
display: inline !important;
}
</style>

<ul class="bxslider">
<li><img src="ImageURL1" title='CaptionGoesHere' /></li>
<li><img src="ImageURL2" title='CaptionGoesHere' /></li>
<li><img src="ImageURL3" title='CaptionGoesHere' /></li>
<li><img src="ImageURL4" title='CaptionGoesHere' /></li>
</ul>


Style 2 : Image Gallery For Blogger With HTML, CSS and Javascript 

  • Go to Blogger Dashboard 
  • Theme
  • Edite Theme 
  • Now Search for </body> and paste blew script code above </body> tag.


 <script type='text/javascript'>
//<![CDATA[
// Scroll
$('a.right-b').click(function() {
  $('.blanter-wrap').animate({
    scrollLeft: "+=500px"
  }, "normal");
});
 $('a.left-b').click(function() {
  $('.blanter-wrap').animate({
    scrollLeft: "-=500px"
  }, "normal");
});
//]]>
</script>


  • Now Go  To Blogger Dashboard 
  • Then Create New Post and Paste Following Blew CSS and HTML Code where you want to add image Slider with youtube video.


<div class="slide-wrap">
<div class="blanter-wrap">
<ul>
<li>
<a class="youtube-iframe" href="javascript:void(0)">
<iframe allow="autoplay; encrypted-media" allowfullscreen="false" frameborder="0" src="https://www.youtube.com/embed/CZHGjeJZMqI?rel=0&amp;showinfo=1"></iframe>
</a>
<a href="javascript:void(0)">
<img alt="San Vicente Ferrer Church" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1KslPNyajZzl9uUXph-xKOt7EvuNV2JFbvTPZCQm4K7f2AWn4caMp658rx-_zpy1M9GVzkriKj7fdbGELNVWhp8CaFEdleFXgtXKsGRXGLBwEqL6h1LIBKGzQOrIKW8jjPVztbgLsnQgI/s1600/san-vicente-ferrer-church.png" title="San Vicente Ferrer Church" />
</a>
<a href="javascript:void(0)">
<img alt="Catanan Falls" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3nKYUcAAqlyNEDrjSGo1Xgv5P6223ZIxKVoQDidwp5ityJM3bL0Xk4Kin0x93w4tGHzwEIOcOjn2ZcWtQApLsFOn234-L16iTsjBw6VbGviv_Ug8IB2BksF5qVj8j6MHO5HGKrTcEcp6f/s1600/catanan-waterfalls.png" title="Catanan Falls" />
</a>
<a href="javascript:void(0)">
<img alt="Carolotan Falls" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCn5xbHXXvIZiC2NgOlD3QARxwvON5jWgcbWjK-rnKZHgGy9ZkYW67cMbTI_GebCes4vhw55PUBLONyGNA8rJz1kNIntX_7xe5N3nsKFepPlQ4TQLq_6RlDluT_Y_ijUIBPFWq3wFzK47K/s1600/carolotan-falls2.png" title="Carolotan Falls" />
</a>
<a href="javascript:void(0)">
<img alt="Dampol Bridge" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGXhJ7QI7I8IDpWkkS_ntjrAZ2DrQ4JTU58K8DZUHNqV89J7JukGoarwVX33nnoS_s8_SFWFyxhGwJCn7RMbgUPtvLOwnAteqBCnVAN8UOtdPcdg9Z3wWL1CNeY9MNO1Es3oEMr7zPczpU/s1600/dampol-bridge.png" title="Dampol Bridge" />
</a>
<a href="javascript:void(0)">
<img alt="Abeca Falls" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaLcgKDakd_Qehe_N4_2FSTlkT44SCTs6tnOuJXwEhBDVW2wCqqwNYS43m4yq2p5FGElf1JEN0CyTXefp2O7khrQcgPEmEaQF6Yv2LZ0HrsuO9Nad3vKnAmktYdgUz0l03wTdndO1baPyQ/s1600/abeca-falls1.png" title="Abeca Falls" />
</a>
</li>
</ul>
</div>
<a class="left-b" href="javascript:void(0);">
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-left" class="svg-inline--fa fa-angle-left fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg></a>
<a class="right-b" href="javascript:void(0);">
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></a>
</div>

<style>
 /* CSS Blanter Mini Slider */
.slide-wrap{margin:30px 0;overflow:hidden;position:relative}
.slide-wrap ul li a img{height:309px;width:100%}
.blanter-wrap{overflow:hidden;overflow-x:scroll;position:relative;width:100%;height:330px}
.slide-wrap ul{position:absolute;list-style:none;padding:0;margin:0}
.slide-wrap li{white-space:nowrap;list-style:none;padding:0;margin:0}
.slide-wrap iframe{width:100%;height:87%;background:#000}
.slide-wrap ul li a{cursor:auto;padding-right:0!important;margin-right:5px;display:inline-block;vertical-align:middle;position:relative;max-width:550px;height:355px;background-position:center;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover}
.slide-wrap ul li a.youtube-iframe{width:550px}
.slide-wrap ul li a:last-child{margin-right:0}
a.right-b{right:0}
a.left-b svg,a.right-b svg{width:15px;margin:10px 0 0}
a.left-b,a.right-b{position:absolute;top:35%;width:40px;line-height:50px;height:50px;text-align:center;color:#fff;background:#000;opacity:.7;transition:all 0 ease-in-out}
a.left-b:hover,a.right-b:hover{opacity:1}
.blanter-wrap::-webkit-scrollbar{width:8px;height:8px;border-radius:10px}
.blanter-wrap::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:10px}
.blanter-wrap::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
.blanter-wrap::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out;border-radius:10px}
</style>



Conclusion: In this post i will discuss How to create Responsive Image Slider Widget for Blogger Website / Responsive Image Gallery For Blogger blog post with HTML, CSS and Javascript code. There are two design, If you want edite with code to create with own design then change the css code and apply it. 


If have any question or facing any problem using code Please comment blew on this post or Contact With Us. 


Tags:

Post a Comment

Previous Post Next Post