New Popular Posts With Thumbnail For Blogger

In this Tutorial i will show, how to create Popular Posts with thumbnail and snipped. Related to this topic i posted a tutorial on How to create Popular Posts with carousel slider. This previous widget can be use at bottom of the posts and on header. But in this tutorial i will show you how to create Popular Posts with thumbnail and snipped on Sidebar. This is common widget but this widget has some features which other widgets doesn't have. These Features include:

• SEO friendly (not javascript)
• Dynamic result based on real statistic
• Easy to custumized

Without wating time, lets start th work to in install this widget.

Steps:

1: Login to Blogger Dashboard and navigate to Design –> Page Elements
2: Click “Add Gadget” and Choose “Popular Posts” and Customize the gadget with more than 4 popular post will show–> “Display Up to” … Posts.
Note: (If you already have this gadget skip this step).


*If you have Popular Post Gadget then :
3: Click on "Add a Gadget" again and Select a HTML/JavaScript Widget just under the header and paste the following code inside it,

<style type="text/css" media="screen">

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
    
}

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}




#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;    
}

#PopularPosts1 {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

.tags span,
.tags a {
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

4: Save it. You're done.

FIVE PAGE NAVIGATION STYLES FOR BLOGGER - PART 2

This is the Part 2 of this Tutorial. This Tutorial is about how  to change Page Navigation Style for blogger with Five Page Navigation Styles. I am pretty sure, you will like these styles. The most important thing in this tutorial is that this Tutorial is lengthy so it will take your time to change Page Navigation Style for blogger, because this is the Part 1 of this tutorial. But you don't have to worry about this because i have arrange this tutorial so that you find easy to perform these following steps and that's why i divided this tutorial in two parts.

This is the view of those Page Navigations Styles.

Style 1

.blog-pager,#blog-pager{
  font-family:"Times New Roman", Times, serif;
  font-weight:normal;
  width:500px;
  font-size: 0.8em;
  padding: 0.6em 0.5em;
background: #3E3E3E;
 } 
.showpageNum a,.showpage a {
  text-decoration: none;
  padding: 0.3em 0.5em;
  color: #055d90;
  white-space: nowrap;
  background: #3E3E3E;
  color: #ffffff;
      margin-right: 0.1em;
  }  
.showpageNum a:hover,.showpage a:hover {
background: #EC5210;
  }
.showpageOf{
  margin:0 8px 0 0;
  display:none;
  }
.showpagePoint {
  text-decoration: none;
  padding: 0.3em 0.5em;
  color: #055d90;
  white-space: nowrap;
  background: #313131;
  color: #868686;
  margin-right: 0.1em;
  }

Style 2 

.blog-pager,#blog-pager{
  font-family:"Times New Roman", Times, serif;
  font-weight:normal;
  width:500px;
  font-size: 0.8em;
  padding: 0.6em 0.5em;
  background-color:#000000;
  text-align:center;
 } 
.showpageNum a,.showpage a {
  text-decoration: none;
  padding: 0.3em 0.5em;
  color: #055d90;
  white-space: nowrap;
  color: #ffffff;
   margin-right: 0.1em;
  }  
.showpageNum a:hover,.showpage a:hover {
 color:#A30A1A;
 text-decoration:none;
 background-color:#ffffff;
  }
.showpageOf{
  margin:0 8px 0 0;
  display:none;
  }
.showpagePoint {
color:#ffffff;
text-decoration:none;
background-color:#A9061B;
width:36px;
height:16px;
font-size:12px;
padding-left:5px;
padding-right:6px;
padding-top:3px;
padding-bottom:4px;
  }

Style 3 

.blog-pager,#blog-pager{
 font-family:Arial, Helvetica, sans-serif;
 font-size:11px;
 width:500px;
 text-align:center;
 } 
.showpageNum a,.showpage a {
 float:left;
 line-height:14px;
 padding:2px 4px 0;
 min-width:8px;
 border:1px solid #d7dce0;
 color:#848a8c;
 text-decoration:none;
 margin:0 3px;
 }  
.showpageNum a:hover,.showpage a:hover {
 color:#fff;
 background:#7f8487;
 border-bottom-color:#848a8c;
 }
.showpageOf{
  margin:0 8px 0 0;
  display:none;
  }
.showpagePoint {
 color:#fff;
 background:#7f8487;
 border-bottom-color:#848a8c;
 float:left;
 line-height:14px;
 padding:2px 4px 0;
 min-width:8px;
 border:1px solid #d7dce0;
 text-decoration:none;
  }

Style 4 

.blog-pager,#blog-pager{
 font-size: 0.6em;font-family:verdana;
 padding: 0.2em 0.5em; 
 margin-right: 0.1em; 
 border:1px solid #FFF; 
 background: #FFF; text-decoration: none;
 width:500px;
 } 
.showpageNum a,.showpage a {
 color: #693; 
 text-decoration: underline;
 border: 1px solid #E3E3E3; 
 text-decoration: none; 
 padding: 0.2em 0.5em;
 }  
.showpageNum a:hover,.showpage a:hover {
 border: 1px solid #693;
  }
.showpageOf{
  margin:0 8px 0 0;
  display:none;
  }
.showpagePoint {
 border: 1px solid #693;
 padding: 0.2em 0.5em;
 font-weight: bold; 
 background: #693; color: #FFF;
  }

Style 5 

.blog-pager,#blog-pager{
  font-family:"Times New Roman", Times, serif;
  font-weight:normal;
  width:500px;
  font-size: 0.8em;
 } 
.showpageNum a,.showpage a {
  display: block;
  float: left;
  padding: 3px 5px 3px 5px;
  margin-right: 3px;
  border: 1px solid;
  color: #FF6400;
  border-color: #FF6400;
  background: #FFF url(http://i1133.photobucket.com/albums/m596/abu-farhan/Meneame.png) bottom left repeat-x;
  text-decoration:none;
 }  
.showpageNum a:hover,.showpage a:hover {
  border-color: #FF9400;
  background: #FFBE94;
  color: #FF6400;
  }
.showpageOf{
  margin:0 8px 0 0;
  display:none;
  }
.showpagePoint {
  border-color: #FF9400;
  background: #FFBE94;
  color: #FF6400;
  border: 1px solid;
  font-weight: bold;
  display: block;
  float: left;
  padding: 3px 5px 3px 5px;
  margin-right: 3px;
  }

Step 1:

1: Go To Blogger > Design > Page Elements

2: Don't check the "Expand widget Templates" box

3: Search for ]]></b:skin>

4: Copy your desired css script from above

5: Just before ]]></b:skin>  paste the css script

Step 2: 

6:  Search for </body>

7: Just before </body>  paste this: 

<script type='text/javascript'>;var home_page='/';var urlactivepage=location.href;var postperpage=7;var numshowpage=4;var upPageWord ='Prev';var downPageWord ='Next';</script>;<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

Change this based on your blog setting:

var postperpage=7;
var numshowpage=4;

postperpage : How many posts per page for your blog.numshowpage : How many number will show in your page navigation.

Just change the numbers only.

8: Save it.

Step 3: 

9:  Again go to the Edit HTML page and check the "Expand widget Templates" box

10: Search for this:

'data:label.url'

11: Replace this with:

'data:label.url + &quot;?&amp;max-results=7&quot;'

Change 7 base on how many post per page you want to show.

12: Save it. You are done.

Five Page Navigation Styles For Blogger - Part 1

This is the Part 1 of this Tutorial. This Tutorial is about how  to change Page Navigation Style for blogger with Five Page Navigation Styles. I am pretty sure, you will like these styles. The most important thing in this tutorial is that this Tutorial is lengthy so it will take your time to change Page Navigation Style for blogger, because this is the Part 1 of this tutorial. But you don't have to worry about this because i have arrange this tutorial so that you find easy to perform these following steps and that's why i divided this tutorial in two parts.

This is the view of those Page Navigations Styles.

Style 1

.blog-pager,#blog-pager{  font-family:"Times New Roman", Times, serif;  font-weight:normal;  font-size:11px; } .showpageNum a,.showpage a { background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') repeat-x; border:1px solid #97a7af; margin:0px 1px 0 1px;padding:3px 8px;  text-decoration:none;  color:#FF5917;line-height:14px;cursor:pointer;white-space:nowrap;  } .showpageNum a:hover,.showpage a:hover {  background-image:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') repeat-x 0 -200px; text-decoration: none; color: #31627e; }.showpageOf{ margin:0 8px 0 0; display:none; }.showpagePoint {  background: url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') 0 -240px no-repeat; color: #BBB;  margin:0 3px 0 3px;padding:3px 8px; line-height:14px;cursor:pointer;white-space:nowrap;border:1px solid #CCCCCC;text-decoration:none;}

Style 2 

.blog-pager,#blog-pager{  font-family:"Times New Roman", Times, serif;  font-weight:normal;  font-size:11px; } .showpageNum a,.showpage a { background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') repeat-x; border:1px solid #97a7af; margin:0px 1px 0 1px;padding:3px 8px;  text-decoration:none;  color:#FF5917;line-height:14px;cursor:pointer;white-space:nowrap;  } .showpageNum a:hover,.showpage a:hover {  background-image:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') repeat-x 0 -200px; text-decoration: none; color: #31627e; }.showpageOf{ margin:0 8px 0 0; display:none; }.showpagePoint {  background: url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') 0 -240px no-repeat; color: #BBB;  margin:0 3px 0 3px;padding:3px 8px; line-height:14px;cursor:pointer;white-space:nowrap;border:1px solid #CCCCCC;text-decoration:none;}

Style 3 

.blog-pager,#blog-pager{  font-family:"Times New Roman", Times, serif;  font-weight:normal;  font-size:11px; } .showpageNum a,.showpage a { background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') repeat-x; border:1px solid #97a7af; margin:0px 1px 0 1px;padding:3px 8px;  text-decoration:none;  color:#FF5917;line-height:14px;cursor:pointer;white-space:nowrap;  } .showpageNum a:hover,.showpage a:hover {  background-image:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') repeat-x 0 -200px; text-decoration: none; color: #31627e; }.showpageOf{ margin:0 8px 0 0; display:none; }.showpagePoint {  background: url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') 0 -240px no-repeat; color: #BBB;  margin:0 3px 0 3px;padding:3px 8px; line-height:14px;cursor:pointer;white-space:nowrap;border:1px solid #CCCCCC;text-decoration:none;}

Style 4 

.blog-pager,#blog-pager{  font-family:"Times New Roman", Times, serif;  font-weight:normal;  font-size:12px;  width:500px;} .showpageNum a,.showpage a {  background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg.png') repeat-x;  border:1px solid #97a7af;  margin:0px 1px 0 1px;padding:3px 8px;  text-decoration:none;  color:#333;line-height:14px;cursor:pointer;white-space:nowrap;  -webkit-border-radius:3px;-moz-border-radius:3px;  } .showpageNum a:hover,.showpage a:hover {  background-image:url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png');  border:1px solid #e4905a;color:#e4905a;text-decoration:none;  }.showpageOf{  margin:0 8px 0 0;  }.showpagePoint {  background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png') repeat-x;  margin:0 3px 0 3px;padding:3px 8px;  line-height:14px;cursor:pointer;white-space:nowrap;  -webkit-border-radius:3px;-moz-border-radius:3px; border:1px solid #e4905a;color:#333;text-decoration:none;font-weight:bold;  }

Style 5 

.blog-pager,#blog-pager{  background: url("http://i1133.photobucket.com/albums/m596/abu-farhan/amazon1.gif") repeat-x;  font-size:12px;  font-family:"Times New Roman", Times, serif;  border-top: 1px solid #d0eaf8;  border-bottom: 1px solid #d0eaf8;  font-weight:normal; } .showpageNum,.showpage,.showpagePoint{margin:0 4px 0 4px; }.showpageNum a,.showpage a {  text-decoration: none;  padding: 6px;color: #055d90;  white-space: nowrap;  } .showpageNum a:hover,.showpage a:hover {  padding: 5px;  border: 1px solid #055d90;  text-decoration: none;  color: #055d90;  white-space: nowrap;background: #fff;  }.showpageOf{  display:none;  }.showpagePoint {  color:#000000;  }

Step 1:

1: Go To Blogger > Design > Page Elements

2: Don't check the "Expand widget Templates" box

3: Search for ]]></b:skin>

4: Copy your desired css script from above

5: Just before ]]></b:skin>  paste the css script

Step 2: 

6:  Search for </body>

7: Just before </body>  paste this: 

<script type='text/javascript'>;var home_page='/';var urlactivepage=location.href;var postperpage=7;var numshowpage=4;var upPageWord ='Prev';var downPageWord ='Next';</script>;<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

Change this based on your blog setting:

var postperpage=7;
var numshowpage=4;

postperpage : How many posts per page for your blog.numshowpage : How many number will show in your page navigation.

Just change the numbers only.

8: Save it.

Step 3: 

9:  Again go to the Edit HTML page and check the "Expand widget Templates" box

10: Search for this:

'data:label.url'

11: Replace this with:

'data:label.url + &quot;?&amp;max-results=7&quot;'

Change 7 base on how many post per page you want to show.

12: Save it. You are done.

How To Create Popular Post With Carousel Slider

In this Tutorial i will show, how to create Popular Posts with carousel slider. The reason for this, I have received some comments asking about how to create popular posts. My last tutorial was about how to show blogger (Popular Posts ) widget only in homepage.  I also posted other tutorial about How to create Multi Column Footer Widget and How to add a Drop Down Menu to blogger. Again this is not easy to do for new comers but is still easy for old ones who have good knowledge of these codes. But still beginners can do by following the steps given. However you can also read some other related articles/posts and i highly recommend this for beginners. So read older post. You can read older post by scrolling down to Related Posts or go back manually. Related posts will helps you to make your blog different from others.

Some Features of Popular Post for blogger are :

• SEO friendly (not javascript)
• Dynamic result based on real statistic
• Easy to custumized

Because of these features listed above, I post this tutorial and make this widget to show popular post with Carousel slider and it can show image and snipped horizontally like this:

Finally, Lets start our work and perform some easy steps:

1: Go To Blogger > Design > Page Elements
2: Click “Add Gadget” and Choose “Popular Posts”(If you already have this gadget then skip this step)

If you have Popular Post Gadget then :
3: Click on "Add a Gadget" again and Select a HTML/JavaScript Widget just under the header and paste the following code inside it,

<style>

#slider ol,#slider ul,#slider li
 {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
}

.popular-posts  img {
  margin: 0  !important;
  padding:0  !important;
  width:150px;
  height:120px;
}

ol, ul {
 list-style: none;
 }

.wrapper {
 width: 720px;
 margin: 0 auto;
 position:relative;
}

.clear {
 clear: both;
 }

.display-none {
 display:none;
 }

#slider {
 position: relative;
 top: -2px;
 z-index: 1;
 }

#slider .prev {
 position: absolute;
 width: 21px;
 height: 21px;
 display: block;
 background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;
 top: 150px;
 left: -51px;
 }

#slider .next {
 position: absolute;
 width: 21px;
 height: 21px;
 display: block;
 background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;
 top: 150px;
 right: -51px;
 }

#slider #slider-wrapper {
 width: 720px;
 height: 300px;
 padding-top: 40px;
 overflow: hidden;
 z-index: 999;
 position: relative;
 }

#slider #slider-inner {
 width:9780px;
 height:300px;
 position:absolute;
 }

#slider .article {
 width: 150px;
 height: 300px;
 float: left;
 margin-right: 30px;
 }

#slider .article img {
 margin-bottom: 25px;
 box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
 -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
 -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
 }

#slider .article h2 {
 margin-bottom: 15px;
 line-height: 18px;
 }

#slider .article h2 a {
 font-size: 18px;
 color: #404040;
 font-weight: bold;
 text-shadow: 0 1px 0 #fff;
 line-height: 23px;
 }

#slider .article .meta-comments a {
 font-size: 10px;
 font-weight: bold;
 text-transform: uppercase;
 text-shadow: 0 1px 0 #fff;
 }

#slider .article .item-snippet {
 margin-left: 15px;
 }

#slider .widget-item-control { display: none}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js"></script>

4: Save it and You are done.

How To Show Blogger Widget Only In Homepage

In this Tutorial i will show you, how to show blogger (Popular Posts ) widget only in homepage. The reason for this is that, I have received many comments asking about how to show popular posts only in homepage. I also posted other tutorial about How to create Multi Column Footer Widget and How to add a Drop Down Menu to blogger. This is actually not easy to do for new comers but is still easy for old ones. Not only this you can also read other related articles/posts. Make your blog pretty simple and different from others so lets start our work and perform some easy steps:

1: Go To Blogger > Template > Edit HTML

2: Find (Ctrl+F) this code given below:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/></b:section>

3: Replace with this:

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/></b:section></b:if>

4: Now click on save template. You're done!

jQuery Rotate Effect For Blogger Images

How to add jquery rotate effect for  images. For this post i am using CSS with jquery. You can use this effect on side bar with any image size. Its easy to add to your blog. So i think i don't need to explain more and more so keep this simple and let's start our work.

1. Log in to blogger account
2. Click on Layout

3. Click Add Gadget and select 'HTML/Javascript
4. Paste below one of below code.

<script>

    $(function() {

        var tot = $(".img_c").length;

        var stat = deg = 10;

        var rotate = "";

        var frame, mozframe, webkitframe;

        $("img").each(function(index) {

            $(this).css({

                "transform": "rotate("+deg+"deg)",

                "-moz-transform": "rotate("+deg+"deg)",

                "-webkit-transform": "rotate("+deg+"deg)",

                "-o-transform": "rotate("+deg+"deg)"

            });

            rotate = "100% {" +

                "transform: rotate(360deg);" +

                "-moz-transform: rotate(360deg);" +

                "-webkit-transform: rotate(360deg);" +

                "-o-transform: rotate(360deg);" +

                "} ";

            var imgclass = parseInt(index+1);

            frame = " @keyframe anim" + imgclass + " { " +

                rotate + "}";

            mozframe = " @-moz-keyframes anim" + imgclass + " { " +

                rotate + "}";

            webkitframe = " @-webkit-keyframes anim" + imgclass + " { " +

                rotate + "}";

            $('<style> '+ frame + mozframe + webkitframe +

                ' .img'+imgclass+' { animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +

                                   '-moz-animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +

                                   '-webkit-animation: anim'+imgclass+' 3s ease 0s infinite alternate; }'

                +'</style>').appendTo('head');

            deg = deg + stat;

        });

    });

    </script>

    <style>

        body {

            background: #fff url('wood_pattern.png') repeat top right;

        }

        .content {

            margin: 0 auto;

            padding: 100px;

        }

        img {

            margin: 10px;

            padding: 20px;

            background: #fff;

            -moz-box-shadow: 0px 0px 3px #d3d3d3;

            -webkit-box-shadow: 0px 0px 3px #d3d3d3;

            box-shadow: 0px 0px 3px #000000;

            position: absolute;

        }

    </style>

    <br />

<div class="content">

<div class="img_c">

<img class="img1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg8qikuZOXrtkRbEY_RM1U3Gs7YUbHpmXHQtB28aqvCfPv4IAm3RKFqcT7SQftBddI3b4URcNgu8aKeoZVoMk879Bxm_7xx6xdg9TkVxqa2WUiJatCmYY0F712EWTUwDlqo0DmwWZA5gA/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg8qikuZOXrtkRbEY_RM1U3Gs7YUbHpmXHQtB28aqvCfPv4IAm3RKFqcT7SQftBddI3b4URcNgu8aKeoZVoMk879Bxm_7xx6xdg9TkVxqa2WUiJatCmYY0F712EWTUwDlqo0DmwWZA5gA/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg8qikuZOXrtkRbEY_RM1U3Gs7YUbHpmXHQtB28aqvCfPv4IAm3RKFqcT7SQftBddI3b4URcNgu8aKeoZVoMk879Bxm_7xx6xdg9TkVxqa2WUiJatCmYY0F712EWTUwDlqo0DmwWZA5gA/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg8qikuZOXrtkRbEY_RM1U3Gs7YUbHpmXHQtB28aqvCfPv4IAm3RKFqcT7SQftBddI3b4URcNgu8aKeoZVoMk879Bxm_7xx6xdg9TkVxqa2WUiJatCmYY0F712EWTUwDlqo0DmwWZA5gA/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg8qikuZOXrtkRbEY_RM1U3Gs7YUbHpmXHQtB28aqvCfPv4IAm3RKFqcT7SQftBddI3b4URcNgu8aKeoZVoMk879Bxm_7xx6xdg9TkVxqa2WUiJatCmYY0F712EWTUwDlqo0DmwWZA5gA/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg8qikuZOXrtkRbEY_RM1U3Gs7YUbHpmXHQtB28aqvCfPv4IAm3RKFqcT7SQftBddI3b4URcNgu8aKeoZVoMk879Bxm_7xx6xdg9TkVxqa2WUiJatCmYY0F712EWTUwDlqo0DmwWZA5gA/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg8qikuZOXrtkRbEY_RM1U3Gs7YUbHpmXHQtB28aqvCfPv4IAm3RKFqcT7SQftBddI3b4URcNgu8aKeoZVoMk879Bxm_7xx6xdg9TkVxqa2WUiJatCmYY0F712EWTUwDlqo0DmwWZA5gA/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg8qikuZOXrtkRbEY_RM1U3Gs7YUbHpmXHQtB28aqvCfPv4IAm3RKFqcT7SQftBddI3b4URcNgu8aKeoZVoMk879Bxm_7xx6xdg9TkVxqa2WUiJatCmYY0F712EWTUwDlqo0DmwWZA5gA/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg8qikuZOXrtkRbEY_RM1U3Gs7YUbHpmXHQtB28aqvCfPv4IAm3RKFqcT7SQftBddI3b4URcNgu8aKeoZVoMk879Bxm_7xx6xdg9TkVxqa2WUiJatCmYY0F712EWTUwDlqo0DmwWZA5gA/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg8qikuZOXrtkRbEY_RM1U3Gs7YUbHpmXHQtB28aqvCfPv4IAm3RKFqcT7SQftBddI3b4URcNgu8aKeoZVoMk879Bxm_7xx6xdg9TkVxqa2WUiJatCmYY0F712EWTUwDlqo0DmwWZA5gA/s1600/nature.jpg" /></div>

</div>

Replace red color link with your image URL.
7. Now save your HTML/Javascript'.

You are done. If you get any problem then comment us, we will respond you quickly.

Related Articles:

jQuery Slideshow For Blogger

Popup/Slideout Facebook Likebox 

How to Create Drop Down Menu  

Multi Column Footer Widget