 |
| Demo |
How to Make Automated Carousel Slider In Blog - This tutorial I will discuss how to make the slider Carousel automatically based on the label. The working principle of this same slider as the slider automatically based on category. You just replace with your label and the slider will work in accordance with the label that you enter. Carousel slider that I made this time is very simple and just use the script without adding jCarousellite easing effects and mousewheel.
How the installation is also very easy, if you've been practicing my previous article titled makes the slider automatically based on specific categories, this tutorial was very easy, because the steps of making almost the same. Immediately following steps to make it:
1. Login to blogger with your account
2. After that select the blog you want to add this slider.
3. Log into the template >> Edit HTML
4. Precaution to avoid mistakes in the later editing, first backup your template.
5. Having all the above steps you do, put 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/AVvXsEjcIGizJP3TwnACUA6roJBssbSBTLQMfF1EHTrddi3nCI-1SrzCeNhpvLUY2k6IP4BxD1AoFY4BQng56wntHK4mmUVIka9-VgVxxioB33CjGOuxzIIVAKsBq-KIyUemnitEV-dydtU8Z6s/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQPV5arnH4gsR5AoeeVwkzLpXPnaB0Pt5gZfnNJRleF7X5-Vxdkz6zcfOheKLedAnglkLFbDwmwBbzTzRifBDu3PkF3IUWPb_UuTPg2MRuQhVKU9tv7oEQRvDxQOyDrMZdrnsGj_lDoI/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/AVvXsEhkHsKfO4Lgl7eS-BUWQkPWB9aKHFVk8AXSFX6EfAhH1hFn6-zeYAFZO4bvOvH4RIq3JzQAk_SVb-Z1hIHJVeYLX37InRGcY9lxiR9NBzdvWd34PiL5-H6Rt2eidimm_wxh1C5uKy9rri4/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDgp1QQIGP8qOFuBgqmsWiUiFHyeXw3-QTjX0TGqbzQKWCCQDK8VlyiQ-QN8pw4i-cx2lGlrn8ZpJrneQ-S24gL26_uX9aHCv8SCxBCDExfm9NqgPSh0Qrgqv4dP4AtrQDuOAI-b4TySE/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/AVvXsEhxNJQiqGBXut_tRDhQOUIfh8qExzd3QZw4VeELkahBkHVCsKXSGeAMUCN5pbj9wdNgf0f5EF_47hYc2AonTXu6IczJnV8yYztdmfu_vWk8Q9P20t0hYOztwWKPicUPAM3DU0YfjdjMpeE/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/AVvXsEjSfknGg0yvzSMOW0XyyrTJhh2Gz5VnlPwjHTITKwrca1DNN-_5b591NTvin3hyphenhyphen65Lqi69uwyTiGaoZhfa2MdO5CpFs7ElXF_6uZw_mRoDvCi3V_gc9FX_HUJCqTeDiu_gWhtvA_iQq-AQ/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}6. Next step is to position the Edit HTML, insert the following code above the </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/AVvXsEjfssZoa7XBe1QJwMSCtTxtoDW4xTaWiBYVHXwjfdJZgD6sEDNIWedX87nTeF9AA2Ggcn-hF75vDj0cPeDne2oO4SHRWFLrY-LHDe26dxaqs0KWbQ6-kr1QSaelSoV5kvVbZwNUT2k6Y5U/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>&
lt;/div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>Description:
Note the URL in red script above, it is the latest series jquery.min.js script code that I use to make this slider. If the template you've found jquery.min.js although different series, red color code above no longer need to enter. Just one jquery.min.js existing template, it is up to serial number, preferably the latest version.
While the blue color code: 15 is the number of slider displayed. And the news is that the label will be displayed on the slider (Remember the big small letter should be the same as the label you have created).
7. The next step is to call the slider to appear on our blog. Find <div id='main-wrapper'>, then place the following code on it
<b:if cond='data:blog.pageType != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write("<script src="/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .container").jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
</b:if> The above code you can also place it below or above the navigation menu or can be placed on the footer.
8. Final step, save templates and see the results
