Make Automatic Image Slider

Exspost Blog - This answers the question of utorial friend debbie irlando manurung aka Zondim, asking to be made a slider tutorial on Johnny Handsome Banget. The Template that is used on a blog that I'll share later, only now more hectic mass nguli so that later when it's spare time aja. There are some templates that will be my share but this time I've made simple, with minimal use of javascript, yes that is definitely more lightly than usual. Okay back to the tutorials which I will make, this time I will discuss about how to create a simple automatic image slider that will display your latest post.

DEMO

This Slider only wear innerfade jquery and jquery cycle plugin to transfer content slider softens (bener not ya ...?), understanding jquery Innerfade roughly like this:

InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

Source: medienfreunde.com

Wah even confused myself I mas/mbak knowing I can 6 United Kingdom first time school, just go on the way of its production:

1. Login to blogger with your account
2. After that select the blog that you want to add this slider.
3. Go to template >> Edit HTML, then tick the expand widget templates
4. Just in case if an error in editing later, you should backup your template first.
5. After all the above steps you do, place the following code above the code ]] > </b:skin> :
   
   # featuredSlider {background: # eee; float: left; margin: 0; padding: 0 0 10px; width:640px; position: relative; color: # 666; border-bottom: solid # c3c3c3 "1px"}
   # featuredSlider. featured-thumb {float: left; margin: 10px; padding: 0px;}
   # container {featuredSlider. height:226px; margin: 0 10px 0 0; overflow: hidden; position: relative;}
   . featuredTitle {padding-top: 10px; font: 16px Oswald; text-shadow: "1px" "1px" # ccc "1px";}
   . featuredTitle a {color: # f7441a}
   . featuredTitle a:hover{color: # 000}
   . navigation {position: relative; bottom: 23px; float: right; overflow: hidden;}
   ul. pagination {list-style-type: none; margin: 0 auto; padding: 0;}
   ul. pagination a {float: left; margin: 0 5px; display: inline; }
   ul. pagination a {display: block; width: 12px; padding-top: 12px; height: 0; overflow: hidden; background-image: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir1bsUIqtlc4ahgqEkoyqEDv41aUkKiUo_0WFZpN-sFb88p_PeUHWVllpsAbkRA5r0WOoOFWqahxcfHOnqiwdedsoFDhhG5wfzuLvivcy9SDK9gbizOalRu8mo52t6FpoiyeClL6GpDVI/s1600/slider+pagination.png); background-position: 0 0; background-repeat: no-repeat; }
   ul. pagination a:hover {background-position: 0-12px;}
   ul. pagination a:hover {background-position: 0-12px;}
   ul. pagination a. activeSlide {background-position: 0-12px}
   a. readmore {float: left; border: solid # 444 "1px"; background: # 585858 url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU1souyceHUJKmhmOBnlaA0D5N8o0gRgeAYT9nAcVsd-8IAXNlLR1frZU5eVGWQpliJCBQ-iJkPmc02AdLclx1FzZarBUE3pH-QO3QY0wzOtULH3u8VAoaCHo38efj95eWaGzlPdKVQRE/s1600/fade.png) repeat-x top; display: block;;font: bold 12px Arial; text-shadow: "1px"-0-"1px" # 333; margin: 10px 0 0 0; padding: 4px 10px; color: # eee;-webkit-border-radius: 3px;-moz-border-radius: 3px;
   border-radius: 3px;-webkit-box-shadow: 0px 0px "1px" "1px" rgba (0, 0, 0, 0.5);-moz-box-shadow: 0px 0px "1px" "1px" rgba (0, 0, 0, 0.5); box-shadow: 0px 0px "1px" "1px" rgba (0, 0, 0, 0.5);}
   a. readmore: hover {color: # ff0}
   Take note of the color code Blue , it is the width and height sliders on the demo I've made, please adjust the size of your template.
6. The next step is still in a position to Edit HTML, insert the following code above the code </head> :
   
   < script src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type = ' text/javascript '/>
   <script src='https://masolis-javascript.googlecode.com/svn/trunk/jquery.innerfade.js' type='text/javascript'/>
   <script src='https://masolis-javascript.googlecode.com/svn/trunk/cycle.js' type='text/javascript'/>
   <script type='text/javascript'>
   //<![CDATA[
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOrY7GGrFKMuSnnpoMrbu8dU8I_V0kExL-LsKta6GeluJV1dZjO8BNM6Wuquhd6tesw5jPwdVNIw_LPJByUCvBi2zoYyR5q7eP43JkoCSpk3Efik4oBld1x1iqhhHCiu7Gh-EauHlXis8/s1600/no+image.jpg";
   showRandomImg = true;
   aBold = true;
   summaryPost = 150;
   summaryTitle = 25;
   numposts = 7;
   
   function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
   
   function showrecentposts(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img = new Array();
   document.write('<div class="slides">')
   if (numposts <= json.feed.entry.length) {
   maxpost = numposts;
   }
   else
          {
   maxpost=json.feed.entry.length;
     }
     for (var i = 0; i < maxpost; i++) {
       var entry = json.feed.entry[i];
       var posttitle = entry.title.$t;
   var pcm;
       var posturl;
       if (i == json.feed.entry.length) break;
       for (var k = 0; k < entry.link.length; k++) {
         if (entry.link[k].rel == 'alternate') {
           posturl = entry.link[k].href;
           break;
         }
       }
   
   for (var k = 0; k < entry.link.length; k++) {
         if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
           pcm = entry.link[k].title.split(" ")[0];
           break;
         }
       }
   
       if ("content" in entry) {
         var postcontent = entry.content.$t;}
       else
       if ("summary" in entry) {
         var postcontent = entry.summary.$t;}
       else var postcontent = "";
      
       postdate = entry.published.$t;
   
   if(j>imgr.length-1) j=0;
   img[i] = imgr[j];
   
   s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
   
   if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
   
   //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   
   
   var month = [1,2,3,4,5,6,7,8,9,10,11,12];
   var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   
   var day = postdate.split("-")[2].substring(0,2);
   var m = postdate.split("-")[1];
   var y = postdate.split("-")[0];
   
   for(var u2=0;u2<month.length;u2++){
   if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
   }
   }
   
   var trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';
   document.write(trtd);
   
   
   j++;
   }
   document.write('</div>')
   }
   
   //]]>
   </script>

   Description:
   

   Note the URL of the script color Red above, it is the script code jQuery.min.js recent series that I used to create this slider. If You are already on the template, there is aQuery.min.js even though the series is different, the code in red above, You no longer need to enter. Pretty one jQuery.min.js is on the template, it's up to how many series, if you can the latest version.

   Color code Blue : 7 is the amount slider is displayed. While the number 340 and 212 is a long and wide image that exists in the slider.
7. The next step is to call the slider that appears in our blog. Search code < div id = ' main ' wrapper->, and then place the following code below:
   < b:if cond = ' data: blog. PageType.page_displayform! = & quot; item & quot; '>
   < div id = ' featuredSlider ' >
   < div class = ' container ' >
   <script>
   document.write (& quot; & amp; lt; script src = \&quot;/feeds/posts/default/-/sport? max-results = & quot; + & quot; numposts + & amp; orderby = published & amp; alt = json-in-script & callback = showrecentposts\&quot; & gt; & lt;/script & gt \; & quot;);
   </script>
   < div class = ' navigation ' >
   < ul class = ' pagination '/> <script>
   $ (& # 39;.slides & # 39 cycle ({;).
   fx: & # 39 & # 39; fade;
   speed: slow & # 39 & # 39;;;
   timeout: 3000,
   pager: & # 39;.pagination & # 39;
   });
   </script>
   </div> </div> <!--end. container-->
   </div>
   </b:if>
   If you want to display the slider per category or label stayed just above code is added:
   

   /feeds/posts/default? max-results

   Into:
   

   /feeds/posts/default/-/your label? max-results

   Please replace "your label" with the category that you want to display on the slider.
8. Lastly, save templates and see the result.

That last image Slider tutorial create automatic joss really existed at Johnny Handsome Banget, if still unclear please leave a message in the comment box. Congratulations Suhoor and hopefully useful.