Eblogger Tricks.com: 2011/09

It is my aim to present you the best widgets and gadgets for your Blogger blog. In this post I am going to show you how to install the stylish Mootools Recent Posts Slider. Sliders are a very good way to make your template look more attactive - they are a real eyecatcher.

How to add a Mootools Recent Posts Slider to your Blogger blog

1. Login to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. Find (Ctrl + F) the ]]></b:skin> tag.

3. Copy the following code and paste it directly after the ]]></b:skin> tag.

4. Now find the following line of code:

5. Copy the following code and paste it just before said line:

<div id='featabout'>
<div id='featabout-wrapper'>
<div class='featured'>
<div class='top'/>
<div class='mid'>
<div id='featured'>
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 606px;
height: 220px;
z-index:5;
border: 1px solid #000;
overflow:hidden;
}
.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 80px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</script>
<div id='myGallery'>
<script type='text/javascript'>
//<![CDATA[
function rp(json) {
for (var i = startposts; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
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;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(Read More)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showposttitle == true) document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent);
document.write('...' + readmorelink);
}
}
}
}
//]]>
</script>
<div class='imageElement'>
<h2><script>var startposts = 0; numposts = 1; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 0; numposts = 1; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkTmNZtfI/AAAAAAAAAAY/AFA7z-uPRzo/jquery+slider1.jpg'/>
<img class='thumbnail' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkTmNZtfI/AAAAAAAAAAY/AFA7z-uPRzo/jquery+slider1.jpg'/>
</div>
<div class='imageElement'>
<h2><script>var startposts = 1; numposts = 2; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 1; numposts = 2; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkX2_Ie4I/AAAAAAAAAAg/UtcyiDMmQvM/jquery+slider2.jpg'/>
<img class='thumbnail' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkX2_Ie4I/AAAAAAAAAAg/UtcyiDMmQvM/jquery+slider2.jpg'/>
</div>
<div class='imageElement'>
<h2><script>var startposts = 2; numposts = 3; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 2; numposts = 3; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkbtD9zSI/AAAAAAAAAAo/LhX8RCn8SiA/jquery+slider3.jpg'/>
<img class='thumbnail' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkbtD9zSI/AAAAAAAAAAo/LhX8RCn8SiA/jquery+slider3.jpg'/>
</div>
<div class='imageElement'>
<h2><script>var startposts = 3; numposts = 4; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 3; numposts = 4; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://2.bp.blogspot.com/_pZaV-NlP_3s/SwYkgdPc4aI/AAAAAAAAAAw/prTy94a0Y8k/jquery+slider4.jpg'/>
<img class='thumbnail' src='http://2.bp.blogspot.com/_pZaV-NlP_3s/SwYkgdPc4aI/AAAAAAAAAAw/prTy94a0Y8k/jquery+slider4.jpg'/>
</div>
<div class='imageElement'>
<h2><script>var startposts = 4; numposts = 5; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 4; numposts = 5; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkk1JAXgI/AAAAAAAAAA4/kDXw6ZDtCu0/jquery+slider5.jpg'/>
<img class='thumbnail' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkk1JAXgI/AAAAAAAAAA4/kDXw6ZDtCu0/jquery+slider5.jpg'/>
</div>
</div>
</div>
</div>
<div class='bot'/>
</div></div></div>

Replace "http://www.ebloggertricks.com" with your blog address.

Replace images addresses with the addresses of your images.

Note: You can place the above code where you like. The placement just before <div id='main-wrapper'> is for explanation purposes only.

6. Save your template and you are done.

The result will look similar to this: