How to add automatic updated latest post slider in blogger

1. You must login to blogger
2. Select the blog that you want to add slider.
3. Go to the template >> Edit HTML and check the expand widget templates.
4. And then place this following codes above ]]></b:skin>  (in case if the above code was not found by searching by control + F key then please do it manually)

 

#carousel{width:1000px;height:175px;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/AVvXsEjw9doGyIY4oWxD7IJe0KcHuOl5BosnlUTkHBdpay4I_XLDcV31AC1p41oyNm1QS4_3NUbyFDMFCDfCDc10faUj8G3IEgZHVkNq80VFW5fduPy00Xk64o6kW9y6GhKA-NxAbXbY5vgDeK0/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHMmj_DbaxuOUYKSggNGTsslMDKs4g7GHYiHdEw_LFXm0OwoO7y5fAEMvoNc-L5or0LsuSmeNjKeIA7rPkdF4VoV-wVmssyV3lNstY15LFrAC1_N3Swkp20t5gpdfW1hsCL-WPUgAuBMs/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/AVvXsEiIsymy21bBgubSzECtWUrCEtarRVg5Y1InLdscnEmLrwMDEWwhPFSZPLhxKhyphenhyphenuBR_XfR-lC-jyxspLWKJ5bJQJPm2VajbIC3DiDZDd5fZIuP2_x19K4lmYKbPoAx0KPWD6fAIGJHC4Vl4/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis_Nplxil2-9UAnERq8wGx2CzKxdRfPwrcfsM0oD7zU5BSw9K4_3pn5HRB_hZ43EiBQt5PF9u574RhYICIjA965RUajDpu9AmSmZZKJd-FX0vxrZ0up7bT4-KBBvj6g-6MTcrA3m4Y6o4/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/AVvXsEgW5F_So9ZR7hJZszP1saHLD22RjuMri3ioV-91imOC4pRqD2PqCkktWo0qGrvLU-N6zRnvt_QyPCd_XDqbA_eaOVNOEi5rWDwMvBN2TbVmFQJRRrycCdlrJejMq0k7zveROS6SNSoo31I/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/AVvXsEgsN3RRImxF4U7YXHNrFhECI1X6niEwsY6EhAl2KuwhyCNW8r1Rq042juI91L72uqHuEM8s6KYH7wq2RGEGCgJ__4sgXw7dMuZnqTW4jvzso-3DmhUwncLtdH0pV_05-eVzz0BSVuAZF_k/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}

Here the 1000 and 175 are the size of the thumbnail and can be altered by you...

Still in Edit HTML, add this following code above </head>  Tag :

<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/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwTDV97Z58iO0XoM1pEJ24DYen4UPXJL2lVlZ39AfH00RccuXcrPIODt1FgV9bG_LS_kpPyFuuX90a4GcMaUhz1fOgyji8MixsihZ2qpMxr-q5j0PRNS_h0ijIgxKr6RRvS6VJL96RgLM/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>


In above script there is  sumthing called "news" you replace it by the name of the label which you want to display


Place this following code above <div id='main-wrapper'>:

<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>


Hence this tutorial is compleated

The scripts used are taken from online sources

Author : admin

Share this

Related Posts