The Slider Automatically For Online Store Templates

I have a friend who is asking to be made via email an automatic slider for the online store dikelolanya. Business selling goods or services by making use of internet facilities now again ngetrend, and request to make a template online store, but also a lot of kok susah banget ya? I won't go into it now, I will try to meet the demand by creating a Featured Slider is simple with the addition of paginated incomprehensible thumbnail under summary or summary of the article. The principle of work of this slider is similar to the slider on the template Johny Confused, here is my only modification background and add a logo at the bottom of the image of shopping center.

DEMO

Well get on with it in the way of its production:

The first step

1. We should make a widget below the header to put the slider later. Login to blogger with your account
2. After signing in to the dashboard, select blogs that want to set a slider.
3. Then select the template >> Edit the HTM, don't forget the check first box expand widget templates.
4. Backup first just in case if template error occurred in later edits. Then insert the following code above ]] > </b:skin>
   view plainprint?

   1. /* Slide Content 
   2. ----------------------------------------------- */  
   3. slide-wrapper {.padding:0 auto;margin:0 auto;width:auto;float: left;  
   4. word-wrap: break-word; overflow: hidden;}   
   5. . slide {color: # 666666;line-height: 1.3 em;}  
   6. slide ul {...list-style:none;margin:0 0 0;padding:0 0 0;}  
   7. slide li {.margin:0;padding-top:0;  
   8. padding-right:0;padding-bottom:.25em;  
   9. padding-left:0px;text-indent:0px;line-height:1.3 em;}  
   10. slide {widget..margin:0px 0px 6px 0px;}  
5. Then to call the widget that appears in layout, place the following code in the < div id = ' main-wrapper ' >
   
   view plainprint?

   1. < b:if = cond' the data: url = blog. = data: homepageUrl ' blog.>  
   2. < div id =' slide-wrapper '>  
   3. < b:section class =' slide show ' id =' slide ' preferred =' yes '/>  
   4. </div>
   5. </b:if>
6. Then save the template, now you get into a layout first, see what is on the bottom of the header, there is one empty widget like in the picture below?

If You are already on the template, there is one empty column lies underneath the header like the image above, the first step is to leave it, directly on the second step

The second step

1. Still in a position to Edit HTML code below input above ]] > </b:skin>
   
   . shadow {width:950px; height: 39px; background: # 9a315a72b7a608febd4b756a82f413e1042a269e74867f03a3c90f87786b29ae65538058991

   fb6234653d34dd921d5932c7c704d51cb53efa001de92b84352b22a0ea90eb65fa941ec90d9

   3d29f4e07c3d3b93e7972dca8b0d3930c0d24e483ecbab135567ceb713235dd1f582b8a9ec

   7758d05be90634092eb986211876ee43e26d405fcf5fe83bdece54dc364a32a2c53fab5e727

   34b9a3ad7683acb4bbbf3d360e68b4a60c7a7125c5fd6256be7cb8e1de738609c5f89b4c10

   7e20797eeee0d71dd98fab0466ee783a41a47c1f3827f81900b4285feb1447b5e12e9156394

   efa07f558a5f08ca34d6bd2615c7baacf6257a4f7f7460e569ae9155e90dda83bb0f32bbe6fac5

   ff1ed5652cc48a449b4579c9a34ee3ec7b5032b3774ec11ec4173cbdc103346580074445031

   dc74224316839c86b190400735d261c64c5975a449c297b4f317695efc22dc9a7182a78ff4b3

   2487999f689581769a63c0ab0256b288c8649ad0819d3320838507f0bbc20a24c0ad231fcb1

   76ad068542489e07032ce154375992b818b773e576f6fb4f7d9732ca3097d16fd683d0125d20

   76384fdf8c39e26769d144bb04b08bfce77ae03009e41f6bd8b2ee321846ab47b17194868f8e

   ea525d4228a46ed508916ac67ed0c59ee028161e607a161e61a0 url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWJgkQgsMzxmqzQa6eHLAsEWxC_5nWGoiphpaoTFNhEGL7xqQCPTiZbqnAMoQgFyC_mPyCdd2P5odSIOubrqK2f4wBABaR1FKJSdng1HUkDkWGRzSpUe401xgvNObdv_i4AFxLgxsjztB2/s1600/shadow1.png) no-repeat center; margin: 0 auto}
   # featured slider {position: relative; overflow: hidden; width:950px; height:325px; background: # fcfcfc url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhywWl9mODlXdKGH1e7gtZ2lgiYxKXNvZnIg3QuDlJfbp1tfz-OELfuuWGkoGkdzOBDoe_I6w5qld7bsD9ZAch-Hq4C6yM8prn8NX-RnkykfToVo2kZBObA_110CAZ-CtRm8Ufl77wq4ZR1/s1600/slider-bg.png) repeat-x top; margin: 0 auto; padding: 0 auto}
   #featured-slider .contentdiv{visibility:hidden;position:absolute;left:20px;top:10px;z-index:1;width:305px}
   #featured-slider .contentdiv img{background:#fff;padding:2px;border:1px solid #ccc;width:297px;height:297px;overflow:hidden}
   #featured-slider .sliderPostPhoto{position:relative;height:305px;width:305px;overflow:hidden}
   #featured-slider .sliderPostInfo{position:absolute;top:0;left:345px;color:#a1a1a1;background:url();height:190px;

   width:540px;padding:5px 0 0}
   #featured-slider .sliderPostInfo p{color:#0a0a0a;line-height:1.6em;font-size:14px;padding-top:1px}
   #featured-slider .featuredPostMeta a{color:#a1a1a1}
   #featured-slider .order a {display:block; width:98px; height:40px; bottom:14px; left:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWzwH_Us4M7_otQB9oRT1D-NtEwIrtXnGx1a2mFke9eV-8IMkKbfOSjuARX2H3h1We2yipMTc_v7W0KlBNbS_i-ldf3_YWOxUjiEy1706Lq6B5aPJuMBHy2jicPAQ5vIwFCiW4XuH7xAEV/s1600/order.png) no-repeat 0 0; position:absolute; font-size:15px; line-height:13px; text-transform:uppercase; text-decoration:none; font-family: 'Open Sans', sans-serif; color:#fff; font-weight:700; padding:11px 0 0 6px;}
   #featured-slider .order a:hover{ color:#515151;}
   .featuredTitle{font:bold 24px Tahoma;color:#719429;line-height:1cm}
   .featuredTitle a{color:#719429}
   .featuredTitle a:hover{color:#0a0a0a}
   #paginate-featured-slider{position:absolute;right:0;top:250px;z-index:1;width:595px;height:80px;overflow:hidden}
   #paginate-featured-slider ul{width:595px;list-style:none}
   #paginate-featured-slider .featured_thumb{float:left;margin-right:15px;width:65px;height:65px;padding:0}
   #paginate-featured-slider .featured_thumb:hover{opacity:0.7}
   Ukuran 950px diatas menunjukkan lebar slider, dan 325px adalah tinggi slider. Silahkan sesuaikan dengan ukuran template Anda.
2. Setelah langkah diatas, masukkan kode berikut diatas kode </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/slider.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 = 400;
   summaryTitle = 25;
   
   numposts2 = 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 showrecentposts1(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img = new Array();
    
     for (var i = 0; i < numposts2 ; 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 daystr = day+ ' ' + m + ' ' + y ;
   
   var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a class="crop-foto" href="'+posturl+'"><img width="200" height="150" class="alignright" src="'+img[i]+'"/></a></div><div class="sliderPostInfo"><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">'+pcm+' Comments</a></span><p>'+removeHtmlTag(postcontent,summaryPost)+'... <a href="'+posturl+'" class="meta-more">View Detail </a></p></div><p class="order"><a href="'+posturl+'">order!</a></p></div>';
   document.write(trtd);
   
   j++;
   }
   
   }
   
   function showrecentposts2(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img = new Array();
    
     for (var i = 0; i < numposts2 ; 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 ("\" + 5 ", b); 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 daystr = day + ' ' + ' ' + m + y;
   
   var trtd = ' < ul class = "featured_thumb" >< a rel = "' + i + '" class = "toc" href = "#" >< img width = "66" height = "65" title = "our product" alt = "our product" class = "featured_thumb" src = "' + img [i] + '" >/</a></ul> ';
   document.write (trtd);
   
   j++;
   }
   
   }
   //]]>
   </script>
   Take note of the color code Red above if your template already exists at jQuery.min.js though different series, you don't need to include the script color Red again. Pretty one jQuery min for one template. If there are two, are likely to clash and slidernya no way.
3. The next note on the script code is the first step to number 5 above, replace all the code below:
   
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <div id='slide-wrapper'>
   <b:section class='slide' id='slide' preferred='yes'>
   <b:widget id='HTML82' locked='false' title='feature content slider' type='HTML'>
   <b:includable id='main'>
   <div id='featured-slider'>
   <script>
   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
   </script>
   <div id='paginate-featured-slider'>
   <ul>
   <script>
   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
   </script>
   </ul>
   </div>
   </div>
   <script type='text/javascript'>
   featuredcontentslider.init({
   id: &quot;featured-slider&quot;, //id of main slider DIV
   contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
   toc: & quot; & quot; markup,//Valid values: & quot; # increment & quot;, & quot; the markup & quot;, [& quot; and & quot; label1, label2 & quot; & quot;, etc]
   nextprev: [& quot; & quot;, & quot; and & quot;],//labels for & quot; prev & quot; and & quot; next & quot; links. Set to & quot; & quot; to hide.
   revealtype: click & & quot; quot;,//Behavior of the pagination links to reveal the slides: & quot; click & quot; or & quot; and & quot; mouseover
   enablefade: [true, 0.2],//[true/false, fadedegree]
   autorotate: [0, 5000],//[true/false, pausetime]
   onChange: function (previndex, curindex)//event handler fired whenever {script changes slide
   //previndex holds index of last slide viewed b4 current (1 = 1st slide, 2nd = 2nd etc)
   //curindex holds index of currently shown slide (1 = 1st slide, 2nd = 2nd etc)
   }
   })
   </script>
   </b:includable>
   </b:widget>
   </b:section>
   </div>
   </b:if>
   < div class = ' shadow '/>
4. After that save the template and into the layout will look like in the picture below:
   
   
   
   
   
5. Then click Edit on the widget featured content slider, after a new window open insert or type a label that would like to display on the slider, see figure below:
   
   
   
   
   From the picture above I put Electronic label that will appear on the slider, you can replace the appropriate desires.
   
6. Last save, and look at the blog You've plugged attract slider.

First Yes make much for tutorial featured slider simple to shop online, sorry if my writing desultory because more sad, certainly among the many friends who follow the news in the media a lot of victims who have not found due to the fall of the Sukhoi aircraft, although none of my family who participated in the flight, but I am concerned with the number of occurrences of the aircraft crashed in the country, why don't ya? Beside that, I am also sad today my Adsense got banned ... lebay banget somprettt duuhhh. If there is still a lack of clarity in the explanation above, leave a message in the comment box. Good luck and hopefully useful