Adding some CSS and JavaScripts in Template
Live DEMO.
1) Go to your Layout > Edit HTML and click “Download full template” to download template’s backup.2) In your template, find ]]></b:skin> and just ABOVE it, paste this code:
<!--Anything Slider CSS Starts -->
/*
anythingSlider v1.0
By Chris Coyier: http://css-tricks.com
with major improvements by Doug Neiner: http://pixelgraphics.us/
based on work by Remy Sharp: http://jqueryfordesigners.com/
*/
{ margin: 0; padding: 0; }
.anythingSlider { width: 740px; height: 260px; position: relative; margin: 0 -20px 0px; }
.anythingSlider .wrapper { width: 660px; overflow: auto; height: 241px; margin: 0 40px; position: absolute; }
.anythingSlider .wrapper ul { width: 99999px; list-style: none; position: absolute; top: 0; left: 0; background: #f4f4f4; border-top: 3px solid #e0a213; border-bottom: 3px solid #e0a213; margin: 0; }
.anythingSlider ul li { float: left; padding: 10px 10px ; height: 317px; width: 660px; margin: 0; }
.anythingSlider .arrow { display: block; height: 200px; width: 67px; background: url(http://3.bp.blogspot.com/_L3S3cG5x4ys/SyLAydSxA7I/AAAAAAAABK8/Or2L74HqhdM/s400/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 35px; cursor: pointer; }
.anythingSlider .forward { background-position: 0 0; right: -20px; }
.anythingSlider .back { background-position: -67px 0; left: -20px; }
.anythingSlider .forward:hover { background-position: 0 -200px; }
.anythingSlider .back:hover { background-position: -67px -200px; }
#thumbNav { margin: 0 40px; width: 660px; border-top: 3px solid #e0a213; position: relative; top: 240px; text-align: center; }
#thumbNav a { color: black; font: 11px/18px Trebuchet MS, Serif; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; background: #c58b04 url(http://1.bp.blogspot.com/_L3S3cG5x4ys/SyLAx9khT3I/AAAAAAAABK0/GeKJRxZIkgM/s400/cellshade.png) repeat-x; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#thumbNav a:hover { background-image: none; }
#thumbNav a.cur { background: #e0a213; }
#start-stop { background: green; background-image: url(http://1.bp.blogspot.com/_L3S3cG5x4ys/SyLAx9khT3I/AAAAAAAABK0/GeKJRxZIkgM/s400/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 242px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#start-stop.playing { background-color: red; }
#start-stop:hover { background-image: none; }
<!-- Anything Slider CSS Ends -->
3) Now find </head>, and just ABOVE it, paste these lines:
<script type='text/javascript'>
function formatText(index, panel) {
return index "";
}
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Auto-Slide", // Start text
stopText: "Stop", // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
});
$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6);
});
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script src='http://sites.google.com/site/tipsotrickscom/home/tests/jquery.easing.1.2.js' type='text/javascript'/>
<script charset='utf-8' src='http://sites.google.com/site/tipsotrickscom/home/tests/jquery.anythingslider.js' type='text/javascript'/>
Adding the Widget and it’s contents
4) This part is the easiest. Go to Layout > Page Elements and click “Add a Gadget” wherever you want to put the slider. (usually just below navigation menu).5) Choose “HTML/JavaScript” from the gadgets list and paste the code below in the content area.
<div class="anythingSlider">
<div class="wrapper">
<ul>
<li>Slide # 1 Content here...</li>
<li>Slide # 2 Content here...</li>
<li>Slide # 3 Content here...</li>
</ul>
</div>
</div>
All your content goes in between those <li> and </li> tags.
You can add many <li> </li> tags as you want.
6) Save it the gadget and preview your Blog.
It Easy.Try It Back.View Live DEMO.
A am confused and have a problem where to add what! Your post is not clear.
ReplyDeleteHi!
ReplyDeleteThanks for the turorial! However, I have followed step by step your instructions, and the images and videos linked are displayed one under the other. Any idea on why is that happening?
Thanks!
ReplyDeleteThank you very nice information !!
شركة نقل اثاث بسيهات
ارخص شركة نقل عفش بالخبر
شركة نقل اثاث بالقطيف
ارخص شركة نقل عفش بالدمام