How add slider that slide with category

1. Login to blogger with your account
2. Then click the Layout > select Edit HTML check expand widget templates
3. Do not forget to backup your template first by clicking Download Full Template.
4. Place the following code in the code ]]> </ b: skin>
   
   
   

   # Featured {margin-bottom: 8px}
   . sliderwrapper {position: relative; overflow: hidden; height: 240px}
   . sliderwrapper. contentdiv {visibility: hidden; position: absolute; left: 0; top: 0; padding: 0px; height : 100%;}
   . pagination {text-align: left; padding: 8px 0px}
   . pagination a {font-size: 11px; color: # fff; padding: 3px 6px; background: # 1b75d6}
   . pagination a: hover, . pagination a.selected {color: # dedde5; background-color: # 535 352}
   . featuredPost {width: 360px; padding: 10px 10px
   a {color: # fff}
   . featuredPost a: hover {color: # dedde5}
   . featuredPost h2 {margin: 0; font-size: 12px; line-height: 1}
   . featuredPost span {font-size: 10px}
   . featuredPost p {font-size: 11px}

Step Two

1. Still in the position of the Edit HTML. Now place the following code in the code </ head>
   
   
   

   <script>
   / / <! [CDATA [
   / * Script from: http://simplexdesign.blogspot.com/ * /
   imgr = new Array ();
   imgr [0] =
   = True;
   aBold = true;
   summaryPost = 100; numposts1 = 5; label1 = "mysteries"; function removeHtmlTag (strx, chop) {var s = strx.split ("<"); for (var s} showrecentposts1 function (json) {j = (showRandomImg)? Math.floor ((imgr.length +1) * Math.random ()): 0; img = new Array (); 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 ("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, cb-5); if ((a! = - 1) && (b! = -1) && (c! = -1) && (d! = "")) img [i] = d; var month = [1,2,3,4,5,6, 7,8,9,10,11,12]; 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 href="'+posturl+'"> <img width = "370" height = "240" class = "alignnone" src = "'+ img [i] +'" /> </ a> <div class="sliderPostInfo"> </ div> </ div> class="featuredPost"> <h2> < a  
   
   
2. Notice the code that I gave bold label1 = "mystery"; it is a label or category to be displayed on the slider, here I choose the label of mystery. You'll only replace with the desired label. Note also the code img width = "370" height = "240"   is the width and height of the slider, please adjust your template.
3. After that, place the following code before the code </ body> (put on top only)
   
   
   

   <Script "Slider1", / / id of play slider DIV contentsource: ["inline", ""], / / Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "# increment ", / / Valid values:" # increment "," markup ", [" label1 "," label2 ", etc] NextPrev: ["Previous", "Next"], / / labels for "prev" and "next" links. Set to "" to hide. enablefade: [true, 0.5], / / [true / false, fadedegree] autorotate: [true, 6000], / / [true / false, pausetime] onChange: function (previndex, curindex) { / / event handler fired Whenever the 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>
   
   
   
4. The final step, namely to call for the slider on the front you find the code <div id='main-wrapper'> if you want a slider appears on the main-wrapper  and put the following code below:
   
   
   

   <b:if cond='data:blog.pageType == "index"'>
   <div id='featured'>
   <div class='sliderwrapper' id='slider1'>
   <script>
   document.write (" <script class = 'pagination' id = 'paginate-Slider1'> </ div> </ div> </ b: if>
   
5. The final step Save / store the template, making image sliders are finished by a certain category.

Noteworthy here is the code label1 = "mysteries" in the second step the first point, the mystery is a label that is displayed in the slider. You can replace it with the desired label or category.