How add slider that slide with category
in previous posts i already discuses this but some user have problem with that so i decide to posts this again with modification lets see how we can add this slider that slide with category that you will use you have to add below code and need to made little change in this code and your slider will ready in your blog lets we install this gadget in your blog
- Login to blogger with your account
- Then click the Layout > select Edit HTML check expand widget templates
- Do not forget to backup your template first by clicking Download Full Template.
- 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}
- 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
- 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.
- 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>
- 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>
- 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.
0 comments for "How add slider that slide with category"