Make Automatic Carousel Slider Based On Label

  Make Automatic Carousel Slider Based On Label

In this Tutorial I'll cover how to create an automated Carousel slider based on the label. The working principle of this slider is the same as the slider automatically based on category. You can change your label and this slider will work according to the labels you enter. Carousel Slider I created this very simple and only use the jCarousellite script without the added effects of easing and mousewheel.

DEMO

How to Setting is very easy, if you've been practicing my previous article entitled making the slider automatically based on specific categories, this tutorial is very easy, because the manufacturing steps are almost the same. Just below the steps to create it:

1. Login to blogger with your account
2. After that select the blog you want to adda slider.
3. Go toEdit HTMLtemplates>>,thentick theexpandwidgettemplates
4. Just in case that doesn't happen error in editing later, backup your template.
5. After allthe above steps you do,place the following code above the code]] ></b: skin>:

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicE6VwAfG8nnJOVbb3I53PGlMMl39TVYu_HTdlI1_ME2_H2J5xxWsA40tdsR4HA2PX6XqpsPTJYcjiRQvQTR3yujLVaebHXtbSEr6ynFfXjrAh-HIV6juwpT5_aoZKemd4pBIUjJVl26c/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYsO5AOS9fefLY7pJIzvsz1vAVS8akzoP69O2ESm7kZ3rPsRMOJfiEGFxO3noOARSC8-gTGggcWkJfnio4I75jVQA7aCawL5F5d7mNTxDH2tiRM1kjN9XvgLDpUsg50z9LHGLw2fnIkcY/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_9K3KOqVgarzca1NwHXLy1op9LNfAwgXjWN9hhabHxSBUS8bzjJKNx01r1rC48509MDrW46LX6vPXRkyqAUxqppaOgtlRzcCiYnlQ90ajI0qVlbvm0NbGmi6ho7aeUveSuSB6nHChHTA/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiruaQUEYC3LM0VlK7DFn_krEih1jwMnQ0apxTfff1BfQ80t4QryJy5xtLvo9-Z20877uNL1xVj4sqT1ewwWxRzmzZbPZ-DWEXdsFwRLNnCEMvJMhztl10TqCVJddPHX9-HGGfyJ2H5Izs/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhel7Ff1S9uu930tgSu3ZW6c29-M2PYtFYxLUVmLLTIdQu5luWF-2GTEf8lFJygiVSNHzlxecr1Ue5cEUZW1WaOVGjn5q87NN9X4yXev8RgOvmM9nq9l-XFKGtLsrb_vA9gvIe9_W0PdwE/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZG619AwReZN0fKE7_T0KYsLf2-ftA2qjJ1kaFDJgbzsXrzdx2BtjQ9uVd2_vYfz2QN1Xc1IXMTjddaSxruQ6n-GNPaIBTzF2gwGwB1JWR17qjxwzeg57zE-YNA-o55vCBp0K2PfkFmK8/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

 

Note the blue color code above, it is the width and height sliders on a demo I made, please adjust the size of your template. 

 

6. The next step is still in a position to EditHTML, 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='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicNJqR7UD1sQTTJfmhgq0SF2hvNw8ytDyzLVY9x4jLF_iV_ONJepyckAmgLHk7Nf1YXCUnmyVnPxmK5xNf3C0JPq4ml_bBgPomiq9VOsnk9tcK0MHzKYJMwcOIWJVK6d20XoeRQ6JGAhI/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "news";

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 = ["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 = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

 

Description:

Note the URL of script in red above, it is the newest series jQuery.min.js script code that I use to make the slider. If You are already on the template are different, although jQuery.min.js series code red color above no longer need you enter. Simply a template the jQuery.min.js, it is up to the series, the most recent version if possible.

While the code Blue: 15 is the number of the slider that appears. And the news is shown on the label of a slider later (remember the big small letter must be the same with the label you have created).

 

7. The next step is to call the slider that appears in our blogs. Search the code < div id = ' main-wrapper ' >, then place the following code in it:

 

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;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>

The above code could also put you under or above the navigation menu you or it could be placed above the footer.

 

8.  The last step, save templates and see the result. If you follow the steps above correctly, the Carousel slider it would appear on your blog.

Very easy to do, just follow the steps above and read carefully do not rush, if there is a less obvious please leave a message in the comment box below. It was a short tutorial about how to create automatic Carousel slider based on category or label this time, good luck and may be useful.

 

Source:  http://www.maskolis.com/