Make Automatic Carousel Slider Version 2

Actually been a long time ago I was asked by a blogger friend Ronny Dee to make slider tutorial like Carousel on template Mas Paper 2. This time I will make a tutorial but just wear a simple carousel slider I've ever created in the previous tutorial, here I am just modifying the CSS code, so it looks its just similar to the Carousel slider template Mas Paper 2. But if viewed at a glance, it is precisely this slider is more akin to the existing Carousel slider at the top (bottom navigation) front page site detik.com.

DEMO

How to make it similar to the Automatic Carousel slider version 1, here I simply change the CSS code and adding timestamp above the title of the post. Just below the steps to make it:

1. First you must log into your blogger account with You
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. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   #carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
   #carousel h5{color:#555;margin:2px}
   #carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
   #carousel .thumb{float:left;margin-right:5px;}
   #carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxW9PB_eMMDGfFndShe0QSUg9DBZBJNVUzy8d4P_quHRFlJqyLSF1huAvfDiecdXYxuJRXNtghgP_TX6aegrLlvwLNErAYl7JPo5qwQZtjdvijq70-UzXXl9tExYJUyJjs8Cu3xXiI16Ba/s1600/previous.png) center;z-index:100;cursor:pointer;}
   #carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGmpYPp9r9bKjOMPosRQiLM-EQlIFstG1gKfcsI9VuDuv813AKytSYGojHB7eO-HyEB1kkEG_wp6vfTwHsqCokAD_UxGCiLnssFxJ72W3jb15C49Gw2lVxpBrEbkpd3quKr0z2whQkPCsO/s1600/next.png) center;z-index:100;cursor:pointer;}
   #carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
   #carousel ul{width:100000px;position:relative;margin-top:10px}
   #carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
   #carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
   # carousel ul li a. slider_title: hover {color: # 1b5d97}
   # carousel a img {display: block; background: # 9a315a72b7a608febd4b756a82f413e1042a269e74867f03a3c90f87786b29ae65538058991fb6234653

   d34dd921d5932c7c704d51cb53efa001de92b84352b22a0ea90eb65fa941ec90d93d29f4e07c3d3b93e7972

   dca8b0d3930c0d24e483ecbab135567ceb713235dd1f582b8a9ec7758d05be90634092eb986211876ee43

   e26d405fcf5fe83bdece54dc364a32a2c53fab5e72734b9a3ad7683acb4bbbf3d360e68b4a60c7a7125c5fd6

   256be7cb8e1de738609c5f89b4c107e20797eeee0d71dd98fab0466ee783a41a47c1f3827f81900b4285feb

   1447b5e12e9156394efa07f558a5f08ca34d6bd2615c7baacf6257a4f7f7460e569ae9155e90dda83bb0f32b

   be6fac5ff1ed5652cc48a449b4579c9a34ee3ec7b5032b3774ec11ec4173cbdc103346580074445031dc742

   24316839c86b190400735d261c64c5975a449c297b4f317695efc22dc9a7182a78ff4b32487999f6895817

   69a63c0ab0256b288c8649ad0819d3320838507f0bbc20a24c0ad231fcb176ad068542489e07032ce1543

   75992b818b773e576f6fb4f7d9732ca3097d16fd683d0125d2076384fdf8c39e26769d144bb04b08bfce77a

   e03009e41f6bd8b2ee321846ab47b17194868f8eea525d4228a46ed508916ac67ed0c59ee028161e607a1

   61e61a0; margin-top: 0}
   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/carousellite.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 = 140;
   summaryTitle = 25;
   numposts1 = 12;
   
   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 (' <ul> ');
   for (var i = 0; i < numposts1; 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 = ["January","February","March","April","May","June","July","August","September",

   "October","November","December"];
   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 daystr = day+ ' ' + m + ' ' + y ;
   var trtd = ' < li class = "car" >< div class = "thumb" >< a href = "' + >< + '" posturl img width = "100" height = "90" class = "alignnone" src = "' + img [i] + '"/> </a></div><h5>'+daystr+'</h5> < a class = "slider_title" href = "' + '" posturl + > ' + </a></li> + ' posttitle ';
   
   document.write (trtd);
   j++;
   }
   document.write (' </ul> ');
   }
   //]]>
   </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 : 12 is the amount slider is displayed. While the numbers 100 and 90 is the length and width of the image that is 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 on it:
   < b:if cond = ' data: blog. PageType.page_displayform! = & quot; item & quot; '>
   < div id = ' carousel ' >
   < div id = ' previous_button '/>
   < div class = ' container ' >
   <script>

   document.write (& quot; & amp; lt; script src = \&quot;/feeds/posts/default/-/sport? max-results = & quot; + numposts1 + & amp; quot; & orderby = published & amp; alt = json-in-script & callback = showrecentposts\&quot; & gt; & lt;/script & gt \; & quot;);

   </script>
   < div class = ' clear '/>
   </div>
   < div id = ' next_button '/>
   </div>
   < script type = ' text/javascript ' >
   (function ($) {$ (document). ready (function () {
   $ (& quot; # carousel. container & quot;). jCarouselLite ({
   auto: 4000,
   scroll: 1,
   speed: 800,
   visible: 5,
   start: 0,
   circular: true,
   btnPrev: & quot; previous_button & quot; #,
   btnNext quot;: & # next_button & quot;
       });
   })}) (jQuery)
   </script>
   </b:if>
   Note the code in red above, sport is the label that is displayed on the slider's future (remember the big small letter must be the same with the label you have created). If you want to display the latest posts or articles on a slider, just delete the code /-/sport. The above code could also put you under or above the navigation menu or You can also put above the footer.
8. The final step, save templates and see the result. If you follow the steps above correctly, Carousel slider it would appear on your blog.

This last tutorial create automatic Carousel slider version 2, as usual if anyone is unclear please leave a message in the comment box. Good luck and hopefully useful