I was beginning to make a slide show is very difficult because I was a beginner blogger and still do not know anything to get there eventually, after looking through om google-here also finally see the slide show together to make this tutorial was very easy and can in practice immediately. Tips This I took from my blog already kang salman http://asksalman19.blogspot.com practice and managed http://journalsendiri.blogspot.com
Here's how
Step 1
1. Login to Blogger
2. Select the Layout / Design
3. Select Edit HTML Tab
4. Check 'Expand Widget Templates'
5. Please Search Code]]></b:skin> and Place Code Here On top of the code]]></b:skin>
Step 1
1. Login to Blogger
2. Select the Layout / Design
3. Select Edit HTML Tab
4. Check 'Expand Widget Templates'
5. Please Search Code]]></b:skin> and Place Code Here On top of the code]]></b:skin>
/* Image Slideshow */
#s3slider{margin-bottom:5px; width:100%; /* important to be same as image width */height:250px; /* important to be same as image height */position:relative; /* important */word-wrap:break-word; /* fix for long text breaking sidebar float in IE */overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
#s3sliderContent{width:100%; /* important to be same as image width or wider */position:absolute; /* important */top:0; /* important */margin:0px; padding-left:0px; /* important */}
.s3sliderImage{float:left; /* important */position:relative; /* important */display:none; /* important */}
.s3sliderImage span{position:absolute; /* important */left:0; font:normal 11px 'Arial',Helvetica,sans-serif; padding:10px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); /* here you can set the opacity of box with text */-moz-opacity:0.7; /* here you can set the opacity of box with text */-khtml-opacity:0.7; /* here you can set the opacity of box with text */opacity:0.7; /* here you can set the opacity of box with text */color:#fff; display:none; /* important */top:0; /*if you puttop:0; ->the box with text will be shown at the top of the i
6. Then after that try to look for the code </head> and Put the following code, the above code </head>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var cssdropdown={disappeardelay:250,dropdownindicator:'<img src="http://img40.imageshack.us/img40/6613/arrowto.gif" border="0" />',enablereveal:[true,8],enableiframeshim:1,dropmenuobj:null,asscmenuitem:null,domsupport:document.all||document.getElementById,standardbody:null,iframeshimadded:false,revealtimers:{},getposOffset:function(d,c){var b=(c=="left")?d.offsetLeft:d.offsetTop;var a=d.offsetParent;while(a!=null){b=(c=="left")?b+a.offsetLeft:b+a.offsetTop;a=a.offsetParent}return b},css:function(b,a,c){var d=new RegExp("(^|\\s+)"+a+"($|\\s+)","ig");if(c=="check"){return d.test(b.className)}else{if(c=="remove"){b.className=b.className.replace(d,"")}else{if(c=="add"&&!d.test(b.className)){b.className+=" "+a}}}},showmenu:function(b,a){if(this.enablereveal[0]){if(!b._trueheight||b._trueheight<10){b._trueheight=b.offsetHeight}clearTimeout(this.revealtimers[b.id]);b.style.height=b._curheight=0;b.style.overflow="hidden";b.style.visibility="visible";this.revealtimers[b.id]=setInterval(function(){cssdropdown.revealmenu(b)},10)}else{b.style.visibility="visible"}this.css(this.asscmenuitem,"selected","add")},revealmenu:function(f,d){var e=f._curheight,b=f._trueheight,a=this.enablereveal[1];if(e<b){var c=Math.min(e,b);f.style.height=c+"px";f._curheight=c+Math.round((b-c)/a)+1}else{f.style.height="auto";f.style.overflow="hidden";clearInterval(this.revealtimers[f.id])}},clearbrowseredge:function(f,d){var c=0;if(d=="rightedge"){var e=document.all&&!window.opera?this.standardbody.scrollLeft+this.standardbody.clientWidth-15:window.pageXOffset+window.innerWidth-15;var b=this.dropmenuobj.offsetWidth;if(e-this.dropmenuobj.x<b){c=b-f.offsetWidth}}else{var a=document.all&&!window.opera?this.standardbody.scrollTop:window.pageYOffset;var e=document.all&&!window.opera?this.standardbody.scrollTop+this.standardbody.clientHeight-15:window.pageYOffset+window.innerHeight-18;var g=this.dropmenuobj._trueheight;if(e-this.dropmenuobj.y<g){c=g+f.offsetHeight;if((this.dropmenuobj.y-a)<g){c=this.dropmenuobj.y+f.offsetHeight-a}}}return c},dropit:function(c,b,a){if(this.dropmenuobj!=null){this.hidemenu()}this.clearhidemenu();this.dropmenuobj=document.getElementById(a);this.asscmenuitem=c;this.showmenu(this.dropmenuobj,b);this.dropmenuobj.x=this.getposOffset(c,"left");this.dropmenuobj.y=this.getposOffset(c,"top");this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(c,"rightedge")+"px";this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(c,"bottomedge")+c.offsetHeight+1+"px";this.positionshim()},positionshim:function(){if(this.iframeshimadded){if(this.dropmenuobj.style.visibility=="visible"){this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px";this.shimobject.style.height=this.dropmenuobj._trueheight+"px";this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px";this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px";this.shimobject.style.display="block"}}},hideshim:function(){if(this.iframeshimadded){this.shimobject.style.display="none"}},isContained:function(a,b){var b=window.event||b;var d=b.relatedTarget||((b.type=="mouseover")?b.fromElement:b.toElement);while(d&&d!=a){try{d=d.parentNode}catch(b){d=a}}if(d==a){return true}else{return false}},dynamichide:function(a,b){if(!this.isContained(a,b)){this.delayhidemenu()}},delayhidemenu:function(){this.delayhide=setTimeout("cssdropdown.hidemenu()",this.disappeardelay)},hidemenu:function(){this.css(this.asscmenuitem,"selected","remove");this.dropmenuobj.style.visibility="hidden";this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px";this.hideshim()},clearhidemenu:function(){if(this.delayhide!="undefined"){clearTimeout(this.delayhide)}},addEvent:function(b,c,a){if(b.addEventListener){b.addEventListener(a,c,false)}else{if(b.attachEvent){b.attachEvent("on"+a,function(){return c.call(b,window.event)})}}},startchrome:function(){if(!this.domsupport){return}this.standardbody=(document.compatMode=="CSS1Compat")?document.documentElement:document.body;for(var d=0;d<arguments.length;d++){var g=document.getElementById(arguments[d]).getElementsByTagName("a");for(var b=0;b<g.length;b++){if(g[b].getAttribute("rel")){var a=g[b].getAttribute("rel");var c=document.getElementById(a);this.addEvent(c,function(){cssdropdown.clearhidemenu()},"mouseover");this.addEvent(c,function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(c,function(){cssdropdown.delayhidemenu()},"click");try{g[b].innerHTML=g[b].innerHTML+" "+this.dropdownindicator}catch(f){}this.addEvent(g[b],function(i){if(!cssdropdown.isContained(this,i)){var h=window.event||i;cssdropdown.dropit(this,h,this.getAttribute("rel"))}},"mouseover");this.addEvent(g[b],function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(g[b],function(){cssdropdown.delayhidemenu()},"click")}}}if(this.enableiframeshim&&document.all&&!window.XDomainRequest&&!this.iframeshimadded){document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>');this.shimobject=document.getElementById("iframeshim");this.shimobject.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";this.iframeshimadded=true}}};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.s3Slider=function(h){var e=this;var l=(h.timeOut!=undefined)?h.timeOut:4000;var g=null;var d=null;var k=true;var f=false;var i=a("#"+e[0].id+"Content ."+e[0].id+"Image");var b=a("#"+e[0].id+"Content ."+e[0].id+"Image span");i.each(function(m){a(i[m]).mouseover(function(){f=true});a(i[m]).mouseout(function(){f=false;c(true)})});var c=function(m){var n=(m)?(l/2):l;n=(k)?10:n;if(i.length>0){d=setTimeout(j,n)}else{console.log("Poof..")}};var j=function(){g=(g!=null)?g:i[(i.length-1)];var m=jQuery.inArray(g,i)+1;m=(m==i.length)?0:(m-1);var n=a(e).width()*m;if(k==true){if(!f){a(i[m]).fadeIn((l/6),function(){if(a(b[m]).css("bottom")==0){a(b[m]).slideUp((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}else{a(b[m]).slideDown((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}})}}else{if(!f){if(a(b[m]).css("bottom")==0){a(b[m]).slideDown((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}else{a(b[m]).slideUp((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}}}};j()}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 3000
});
});
</script>
7. Save Template
Step 2
for this widget to work then follow these steps:
1. Login to Blogger
2. Select the Layout Design Or
3. Select Edit HTML Tab
4. Do not Forget To make your data Backupa
5. Tick expand widget templates
6. Find this Code <div id='main-wrapper'> Press Ctrl + F to facilitate the search
7. Copy the code below and paste just below code <div id='main-wrapper'>
<b:if cond='data:blog.pageType != "item"'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='http://asksalman19.blogspot.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>
<img height='245'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDEm32sdNgGBnor_DihhHzCIt2ckIx84uINdz-0ft_2Ay7jK5iC42Rysf0tOBvxqt5U6IzONf3Pera7MkYNj5rO2_H906wNYfGAkBPHhM3gkRC5a22n5Hd21Ee1yoX8DK82rr1DBPTEMnz/s1600/1.jpg'
width='450'/>
<span>Content with sentence you want the show to accompany a photo / image end with a point .</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Content with sentence you want the show to accompany a photo / image end with a point .</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Content with sentence you want the show to accompany a photo / image end with a point .</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Content with sentence you want the show to accompany a photo / image end with a point .</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Content with sentence you want the show to accompany a photo / image end with a point .</span></a></li>
<div class='clear s3sliderImage'/>
</ul>
</div>
</b:if>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='http://asksalman19.blogspot.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>
<img height='245'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDEm32sdNgGBnor_DihhHzCIt2ckIx84uINdz-0ft_2Ay7jK5iC42Rysf0tOBvxqt5U6IzONf3Pera7MkYNj5rO2_H906wNYfGAkBPHhM3gkRC5a22n5Hd21Ee1yoX8DK82rr1DBPTEMnz/s1600/1.jpg'
width='450'/>
<span>Content with sentence you want the show to accompany a photo / image end with a point .</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Content with sentence you want the show to accompany a photo / image end with a point .</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Content with sentence you want the show to accompany a photo / image end with a point .</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Content with sentence you want the show to accompany a photo / image end with a point .</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Content with sentence you want the show to accompany a photo / image end with a point .</span></a></li>
<div class='clear s3sliderImage'/>
</ul>
</div>
</b:if>
Description:
1. Change the color red with the address links to the article you
2. Replace the color green with a link images / photos
3. Meaning code width = '468 'height = '245' is the size of the widget slideshow view, width =
2. Replace the color green with a link images / photos
3. Meaning code width = '468 'height = '245' is the size of the widget slideshow view, width =
'468 ' height ='245' (set according to the size of the widget that you want)
4. <span>Fill with sentences that want to show the above photo.</span>
5. Number of Slide Show can you multiply by adding code <li> <a href='#'><img height='245'
4. <span>Fill with sentences that want to show the above photo.</span>
5. Number of Slide Show can you multiply by adding code <li> <a href='#'><img height='245'
src='#' width='468'/> <span>content with the sentence you want the show to accompany a
photo / image do not forget to end with titil or sign any other sentence.</span></a> </li>
above code </ul>
good luck
good luck