Jquery Stylish Featured Post Slideshow for Blogger/Blogspot Site

Demo

Many web designer wants to create a beautiful website. This tutorial helps you to add a nice stylish featured post slideshow to your blogger/blogspot site. This widget created by jquery,javascript,css and html. It's not effecting on your website speed so you can use this widget on your site without any hesitation. Besides you can used to this in your web design project.

What's facility you achieve?

1. You can able to customize if you prefer.

2. You can able to add 5 featured images.

3. You can able to enable/disable autoplay.

4. You can able to add Title and Description.

How to add?

step-1: First login to your Blogger account.

step-2: Click Template.

step-3: Click Edit HTML.

step-4: Click Format Template.

step-5: Then click Ctrl+f.

step-5: Now search below of the code.

]]></b:skin>

step-6: Now copy following code and paste above ]]></b:skin>

css:

/**Jquery slideshow Start from www.noxdo.blogspot.com**/

.desSlideshow{

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwVvAjraIKPwVN9GkfCPxaDpRVVG7iyOAiVkLplSYApzbNmD8BbU1BYERLh-z8wZ5VS4NqG62m-7QbOjGnR2wSCuMmn1J0-TMCjCy0DdDBrnrZisXQebqe8n5_t_IAatyPbb5vSCUo0xE/s1600/loading.gif);

    background-position: center center;

    background-repeat:no-repeat;

}

.desSlideshow .switchBigPic,.desSlideshow .nav{

    display:none;


}
/**Jquery Slideshow End from www.noxdo.blogspot.com**/

step-7: Now again search.

</head>

step-8: Now copy below of the code and paste above </head>

Javascript:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js' type='text/javascript'></script>

<script src="http://noxdo-blogspot-com.googlecode.com/svn/trunk/demo/Jquery%20featured%20desslideshow-noxdo.blogspot.com/js/desSlideshow.js"></script>

<script language="javascript" type="text/javascript">

    $(function() {

        $("#desSlideshow1").desSlideshow({

            autoplay: 'enable',//option:enable,disable

            slideshow_width: '800',//slideshow window width

            slideshow_height: '249',//slideshow window height

            thumbnail_width: '200',//thumbnail width

            time_Interval: '4000',//Milliseconds

            directory: 'images/'// flash-on.gif and flashtext-bg.jpg directory

        });

    });

</script>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:blog.url == data:blog.item'><b:if cond='data:post.isFirstPost'><a href='http://noxdo.blogspot.com/'>Blogger widget</a></b:if></b:if></b:if>

Code analysis:

** Remember if your template already existed below of the code please delete it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js' type='text/javascript'></script>

Search http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js if you find the code two time delete any one of the code.

** If you want to disable autoplay just replace enable from below of the code

            autoplay: 'enable',//option:enable,disable

step-9: Now save the templates.
step-10: After saving click Layout
step-11: Click Add a Gadget
step-12: Scrolling and click HTML/JavaScript

step-13: Now copy below of the code and paste in the HTML/JavaScript box.

<div id="desSlideshow1" class="desSlideshow">

<div class="switchBigPic">

<div>

                    <a title="" href="#"><img class="pic" src="/images/006.jpg" /></a>

                    <p><strong>Title1</strong><br/>

                        Description Content1

                    </p>

      </div>

<div><a title="" href="#>"><img class="pic" src="/images/004.jpg" /></a>

                    <p><strong>Title2</strong><br/>

                        Description Content2

                    </p>

      </div>

<div><a title="" href="#"><img class="pic" src="/images/001.jpg" /></a>

                    <p><strong>Title3</strong><br/>

                        Description Content3

                    </p>

      </div>

<div><a title="" href="#"><img class="pic" src="/images/003.jpg" /></a>

                    <p><strong>Title4</strong><br/>

                        Description Content4

                    </p>

      </div>

<div><a title="" href="#"><img class="pic" src="/images/003.jpg" /></a>

                    <p><strong>Title5</strong><br/>

                        Description Content5

                    </p>

      </div>

  </div>

<ul class="nav">

<li><a href="#">Slideshow1</a></li>

  <li><a href="#">Slideshow2</a></li>

  <li><a href="#">Slideshow3</a></li>

  <li><a href="#">Slideshow4</a></li>

  <li><a href="#">Slideshow5</a></li>

</ul>

</div>

** Just replaced red,yellow,blue color with your link,image,Title and Description.

step-14: Now drag this gadget above the Blog post.

Now save arrangement and you are done. Then see your beautiful website by using this widget. Thanks to read. Wait for our next project.

Post Tags:

Blogger Slideshow

Jillur Rahman

I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.