ADD jQUERY BLOGGER SLIDER FOR IMAGES AND VIDEOS

The demand of post slider in today's world is increasing day by day, as every blogger wants it. This can be used to link the content in to your blog. The main feature of this post slider is you can add any videos (including you tube video) as a past of the slideshow, these are not images or thumbnails these are actual video's.

Our team has introduced this post slider, the slider is called anything slider. You can try another post slider. JQUERY FEATURED POST SLIDER

ADD ANYTHING SLIDER TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE



]]></b:skin>

NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

4). Paste the following code just above/before the code you have searched.

/*start slider css http://www.pcleaks.blogspot.com for info*/

/******* SET DEFAULT DIMENSIONS HERE ********/
div.anythingSlider {

width: 700px;

height: 390px;

margin: 0 auto;
}

/****** SET COLORS HERE *******/
/* Default State */
div.anythingSlider .thumbNav a.cur, div.anythingSlider .thumbNav a {
background: #777;
}
div.anythingSlider .anythingWindow {
border-top: 3px solid #777;
border-bottom: 3px solid #777;
}
/* Active State */
div.anythingSlider.activeSlider .thumbNav a.cur, div.anythingSlider.activeSlider .thumbNav a {
background-color: #7C9127;
}
div.anythingSlider.activeSlider .anythingWindow {
border-color: #7C9127;
}

/**** DO NOT CHANGE BELOW THIS LINE ****/
/* anythingSlider viewport window */
div.anythingSlider .anythingWindow {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
/* wrapper: 45px right & left padding for the arrows, 28px @ bottom for naviagation */
div.anythingSlider {
position: relative;
padding: 0 45px 28px 45px;
}
/* anythingSlider base UL */
ul.anythingBase {
background: transparent;
list-style: none;
position: absolute;
top: 0; left: 0;
margin: 0;
}
ul.anythingBase li.panel {
background: transparent;
display: block;
float: left;
padding: 0;
margin: 0;
}

/* Navigation Arrows */
div.anythingSlider .arrow {
top: 50%;
position: absolute;
display: block;
}
div.anythingSlider .arrow a {
display: block;
height: 120px;
margin-top: -60px;
width: 45px;
text-align: center;
outline: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsDRGwfhBKH0Do5bLXdIBDEOsZ1dPPa3wbnkNzUhTaPjOjs_Lm_LIuFR3VmrxkWHxhAHpPdpHcvsJrb00495rcX_-_JYj-_vgW-Xra9uErKTnsCWKogR7fthDZBKqDRzCCe3HekNE0YHw/s1600/arrows-default.png) no-repeat;
text-indent: -9999px;
}
div.anythingSlider .forward { right: 0; }
div.anythingSlider .back { left: 0; }
div.anythingSlider .forward a { background-position: 0 -40px; }
div.anythingSlider .back a { background-position: -88px -40px; }
div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: 0 -240px; }
div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: -88px -240px; }

/* Navigation Links */
div.anythingSlider .thumbNav { margin: 0; }
div.anythingSlider .thumbNav li { display: inline; }
div.anythingSlider .thumbNav a {
color: black;
font: 11px/18px Georgia, Serif;
display: inline-block;
text-decoration: none;
padding: 2px 8px;
height: 18px;
margin: 0 5px 0 0;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONfglH7WVnwHB2iCeiqgpp_1Ha0RxoH-MFjxK_jiA_fmtqcYDqiSMkDRsSwpuqFxMikFTL1dVaYlrhR4AS0snW-2WfwPoNmKfGLOa_6CSe_US-EKXzN9yMOYqS0Iapj1ZIvPnvXKpn3k/s1600/cellshade.png);
background-repeat: repeat-x;
text-align: center;
outline: 0;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
div.anythingSlider .thumbNav a:hover { background-image: none; }

/* slider autoplay right-to-left, reverse order of nav links to look better */
div.anythingSlider.rtl .thumbNav a { float: right; } /* reverse order of nav links */
div.anythingSlider.rtl .thumbNav { float: left; } /* move nav link group to left */
/* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */

/* Autoplay Start/Stop button */
div.anythingSlider .start-stop {
z-index: 10;
background: green url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONfglH7WVnwHB2iCeiqgpp_1Ha0RxoH-MFjxK_jiA_fmtqcYDqiSMkDRsSwpuqFxMikFTL1dVaYlrhR4AS0snW-2WfwPoNmKfGLOa_6CSe_US-EKXzN9yMOYqS0Iapj1ZIvPnvXKpn3k/s1600/cellshade.png) repeat-x center top;
color: white;
padding: 2px 5px;
width: 40px;
text-align: center;
text-decoration: none;
float: right;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
div.anythingSlider .start-stop.playing { background-color: red; }
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; color: #ff0 }

/*end slider css http://www.pcleaks.blogspot.com.com for info*/

Change the width and height accordingly.

5). Find the following piece of code in your blog HTML code.

</head>


6). Paste the following code just above/before the code you have searched


<!--start slider scripts-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script src='http://spiceupyourblogextras.googlecode.com/files/jquery.easing.1.2.js' type='text/javascript'/>
<script charset='utf-8' src='http://spiceupyourblogextras.googlecode.com/files/jquery.anythingslider.js' type='text/javascript'/>
<script type='text/javascript'>

var slider2 = [&#39;Recipe&#39;, &#39;Quote&#39;, &#39;Image&#39;, &#39;Quote #2&#39;, &#39;Image #2&#39;];
function formatText(index, panel) {
return slider2[index - 1];
}

$(function () {

$(&#39;#slider1&#39;).anythingSlider({
width : 800, // Override the default CSS width
easing: &#39;easeInOutExpo&#39;
});

$(&#39;#slider2&#39;).anythingSlider({
width : 600, // if resizeContent is false, this is the default width if panel size is not defined
height : 350, // if resizeContent is false, this is the default height if panel size is not defined
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
autoPlay : false, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
navigationFormatter : formatText // Format navigation labels with text
})

$(&quot;#slide-jump&quot;).click(function(){
$(&#39;#slider2&#39;).anythingSlider(4);
return false;
});

});
</script>
<!--end slider scripts info : http://www.pcleaks.blogspot.com/-->


7). Save your template and go to page elements.

8). Select add a gadget HTML/Javascript and paste the given code inside it. 


<ul id="slider1">
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
</ul>


Make changes accordingly, add video or image code. 
If you got a good experience than leave comments and Email Me for any assistance.