Test Blogger Slider in Blogger Post (image slider in blogger post)


Blogger Tip Today. I need image slider in blogger post, I found from KimSixBlogger and try all day and now work perfectly. Actually, I find it as long times and not work till now is OK. This learning I have tried long times till work.

Please do follow step by step 



Step 1. Please find </head> and past the script above there, script as below

<!--Slide start -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script src='//bxslider.com/lib/jquery.bxslider.js'/>
<script src='http://bxslider.com/lib/jquery.bxslider.js'/>
<script>
    $(document).ready(function() {
        $(&#39;.bxslider&#39;).bxSlider({
            auto: true,
            autoControls: true,
            captions: true
        });
    });
</script>
<!-- Slide Stop -->
</head>      <-- Post Above here


Step 2. Add library link "<link href='http://bxslider.com/lib/jquery.bxslider.css' rel='stylesheet' type='text/css'/>" past above </head> as below.


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


Step 3. Add css style sheet, find " ]]></b:skin> "and past the css style above as below sample.

<!--slider-->
.bxslider img{
width:100%;
height:300px;
}
.bx-wrapper img {
display: inline !important;
} 
         ]]></b:skin>  <--Find here and past css style as above.


Step 4. Add Image src you will got it and complete image slider in blogger post


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


The result image slider in blogger post as below.


Advertisment

    Test image slider in blogger post image 1
    Test image slider in blogger post 2
    Test image slider in blogger post 2
    Test image slider in blogger post 2