make a slider for recent posts (part 2)

in previous post ,I told you about first step of making slider for recent posts in blogger .And we finished making slider effect after first step .


Now we move to step 2 .

step 2 : Use javascript to get information for slider

in this step ,we will add some javascript in the code of slider effect to get information on recent posts from blog feed and show this on slider .
Slider above has two parts ,left and right, The part in the left show the post title ,post summary ,image in background . The right part show only title of posts .
To understand what is written in this post ,I suggest you read the part 1
In the code of slider ,right after the code of CSS ,insert this code

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = true;

summaryPost = 70; //
summaryTitle = 25; //

numposts = 5; //
home_page = "http://your_blog_url/";

label8 = "Feature";
tLabel8 = "Feature";
Title8 = "Feature";

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 class="slides-nav">');
for (var i = 0; i < numposts; 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 = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";

posttitle = (aBold) ? ""+posttitle+"" : posttitle;

var trtd = ' <li id="post-'+i+'" class="clearfix"> <a href="#main-post-'+i+'" class=""><img height="150px" width="150px" class="post_thumbnail thumbnail thumbnail post_thumbnail" alt="This is a Full-Width Post Without Sidebars" src="'+img[i]+'"/>'+posttitle+'<br/> '+m+','+day+','+y+' </a> </li> ';



document.write(trtd);

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

function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul class="clearfix" style="position: relative;">');
for (var i = 0; i < numposts; 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 = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";

posttitle = (aBold) ? ""+posttitle+"" : posttitle;

var trtd = '<li style="background: transparent url('+img[i]+')" id="main-post-'+i+'"><div class="entry"><h2 class="post-title"><a href="'+posturl+'">'+posttitle+'</a></h2> <p>'+removeHtmlTag(postcontent,summaryPost)+'</p></div></li> ';



document.write(trtd);

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


</script>

this code contain three function , removeHtmlTag,showrecentposts and showrecentposts1
removehtmltag is function for creating post summary .
showrecentposts is function for creating the left part of slider
and showrecentposts1 is the function for creating the right part of slider .
you may notice some variables at the beginning of the code
summaryPost = 70; //
summaryTitle = 25; //

numposts = 5; //
home_page = "http://your_blog_url/";

label8 = "Feature";
tLabel8 = "Feature";
Title8 = "Feature";

summarypost =70 mean the maximum length of post summary is 70 letters
summarytitle =25 mean the maximum length of post title in slider is 25 letters
numposts = 5 mean the number of posts in slider is 5 maximum
home_page is the variable for url of your blog .
value of label8,tlabel8 and title8 variables are the label of your blog in which you want to show posts in .

in the code of slider ,replace this
<ul class="clearfix" style="position: relative;">

<li id="main-post-1" style="background: transparent url(URL-Image1) " >
<div class="entry"><h2 class="post-title"><a href="link to entry1">title of entry 1</a></h2>
<p>post summary of entry 1</p></div>
</li>
<li id="main-post-2" style="background: transparent url(URL-Image2) " >
<div class="entry"><h2 class="post-title"><a href="link to entry2">title of entry 2</a></h2>
<p>post summary of entry 2</p></div>
</li>
<li id="main-post-3" style="background: transparent url(URL-Image3) " >
<div class="entry"><h2 class="post-title"><a href="link to entry3">title of entry 3</a></h2>
<p>post summary of entry 3</p></div>
</li>
<li id="main-post-4" style="background: transparent url(URL-Image4) " >
<div class="entry"><h2 class="post-title"><a href="link to entry4">title of entry 4</a></h2>
<p>post summary of entry 4</p></div>
</li>
<li id="main-post-5" style="background: transparent url(URL-Image5) " >
<div class="entry"><h2 class="post-title"><a href="link to entry5">title of entry 5</a></h2>
<p>post summary of entry 5</p></div>
</li>

</ul>

by this one :

<script language="JavaScript">
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label8+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>

and find this code :
<ul class="slides-nav">

<li class="clearfix" id="post-1"> <a class="" href="#main-post-1"><img width="150px" height="150px" src="thumbnail of post 1" class="thumbnail"/>title of post 1</li>

<li class="clearfix" id="post-2"> <a class="" href="#main-post-2"><img width="150px" height="150px" src="thumbnail of post 2" class="thumbnail"/>title of post 2</li>

<li class="clearfix" id="post-3"> <a class="" href="#main-post-3"><img width="150px" height="150px" src="thumbnail of post 3" class="thumbnail"/>title of post 3</li>

<li class="clearfix" id="post-4"> <a class="" href="#main-post-4"><img width="150px" height="150px" src="thumbnail of post 4" class="thumbnail"/>title of post 4</li>

<li class="clearfix" id="post-5"> <a class="" href="#main-post-5"><img width="150px" height="150px" src="thumbnail of post 5" class="thumbnail"/>title of post 5</li>

</ul>


replace it by :
<script language="JavaScript">
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label8+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>

Ok,save widget and you are done .
in operating ,the code will get the information of recent posts and write it out in HTML tags format. After that ,the code of slider effect will put all HTML tags it got on slider .

The erotic photo-art. UK Male.

The art-works of the photographer from United Kingdom Phil Wood. Natural beauty of a nude man's body in a black-and-white photo.

























































































































































Website: http://holdmycoat.deviantart.com/

The erotic photo-art. Greg Gorman.

The art-works of American photographer Greg Gorman. Classics male nude photos. Stylish black-and-white pictures.





























































































































































Website: http://www.gormanphotography.com/

make a slider for recent posts (part 1)

In my template Simplex Darkness ,I used slider effect for recent posts like this :


To make a slider in blogspot ,I follow some steps bellow

step 1 : Using jquery and javascript to make slider effect in blogspot
step 2 : Use javascript to get information on recent posts such as title ,images ,post summary
and show them all in slider .

in this post ,I will show you the first step of making slider for recent posts .

Step 1: make slider effect for blogspot

Look at the slider ,you will see it has two parts . The part in the left show the post summary and image ,part on the right show the title of posts .
in the page element ,create a HTML/Javascript widget
At first ,we need to styling the slider by CSS .So paste this CSS code into widget content .

<style>

body {

color:#333333;

font-family:arial,helvetica,sans-serif;

font-size:9pt;

line-height:1.4em;

text-align:left;

}

/* ---------[ Slideshow ]--------- */

#home-top {
width:950px;
background:#fff;
margin:0 auto;
padding:15px 15px 5px;
overflow:hidden;
border-bottom:1px solid #ddd;
}

#slideshow {
width: 940px;
margin: 0 0 10px;
padding:0;
background:#000;
height:250px;
overflow:hidden;
border:5px solid #000;
}

#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}

/* ---------[ Slideshow Slides ]--------- */

#slideshow .slides {
width:540px;
overflow: hidden;
float:left;
color:#fff;
}

#slideshow .slides ul {
float:left;
overflow: hidden;
width:540px;
height:250px;
}

#slideshow .slides li {
display:none;
left:-99999em;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li {
margin: 0;
padding: 0;
list-style-type: none;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li .entry {
width:530px;
padding: 5px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

#slideshow .slides li .entry p {
margin: 0;
}

#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active {
font-size:12pt;
line-height: 1.1em;
margin:0;
color:#fff !important;
margin: 0;
letter-spacing:0;
}

/* ---------[ Slideshow Navigation ]--------- */

#slideshow ul.slides-nav {
height:250px;
width:395px;
margin:0;
padding: 0;
float:right;
overflow:hidden;
}

#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
}

#slideshow .slides-nav li a {
width:375px;
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:10px;
list-style-type:none;
display:block;
height:30px;
color:#999;
font-size:8pt;
overflow:hidden;
background: #1A1A1A;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:250px;
left:0;
opacity:1;
position:absolute;
top:0;
width:540px;
z-index:6;

}



.js #slideshow .slides-nav li.on a {
background: #292929 url(http://i604.photobucket.com/albums/tt130/metalner/simplex-darkness/featbg.gif) top left no-repeat;
color:#fff;
}

.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#fff;
}

#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: 0 10px 0 0;
border:0;
padding:1px;
background:#999;
width:28px;
height:28px;
}

.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#fff !important;
}
</style>

because this slider effect is based on jquery plugin named Cycle , so after CSS code above ,we need to including Jquery framework and Cycle plugin . To do this ,just add this code after CSS section :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://wp-genius.solostreamsites.com/wp-content/themes/wp-genius-dev/js/jquery.cycle.js" type="text/javascript"></script>

you can download two javascript files from url 's above and upload them to your hosting .

Now we start the main code for slider :

<div id="home-top" class="clearfix">
<div id="slideshow" class="clearfix">

<!--code of the left part : image ,title and post summary -->

<div class="slides">
<ul class="clearfix" style="position: relative;">

<li id="main-post-1" style="background: transparent url(URL-Image1) " >
<div class="entry"><h2 class="post-title"><a href="link to entry1">title of entry 1</a></h2>
<p>post summary of entry 1</p></div>
</li>
<li id="main-post-2" style="background: transparent url(URL-Image2) " >
<div class="entry"><h2 class="post-title"><a href="link to entry2">title of entry 2</a></h2>
<p>post summary of entry 2</p></div>
</li>
<li id="main-post-3" style="background: transparent url(URL-Image3) " >
<div class="entry"><h2 class="post-title"><a href="link to entry3">title of entry 3</a></h2>
<p>post summary of entry 3</p></div>
</li>
<li id="main-post-4" style="background: transparent url(URL-Image4) " >
<div class="entry"><h2 class="post-title"><a href="link to entry4">title of entry 4</a></h2>
<p>post summary of entry 4</p></div>
</li>
<li id="main-post-5" style="background: transparent url(URL-Image5) " >
<div class="entry"><h2 class="post-title"><a href="link to entry5">title of entry 5</a></h2>
<p>post summary of entry 5</p></div>
</li>

</ul>
</div>

it's the code for the left part of slider : it will show the image ,title ,post summary.
And here is the code for the right part ,this part will show only title of posts . Paste this code right after the code above .

<ul class="slides-nav">

<li class="clearfix" id="post-1"> <a class="" href="#main-post-1"><img width="150px" height="150px" src="thumbnail of post 1" class="thumbnail"/>title of post 1</li>

<li class="clearfix" id="post-2"> <a class="" href="#main-post-2"><img width="150px" height="150px" src="thumbnail of post 2" class="thumbnail"/>title of post 2</li>

<li class="clearfix" id="post-3"> <a class="" href="#main-post-3"><img width="150px" height="150px" src="thumbnail of post 3" class="thumbnail"/>title of post 3</li>

<li class="clearfix" id="post-4"> <a class="" href="#main-post-4"><img width="150px" height="150px" src="thumbnail of post 4" class="thumbnail"/>title of post 4</li>

<li class="clearfix" id="post-5"> <a class="" href="#main-post-5"><img width="150px" height="150px" src="thumbnail of post 5" class="thumbnail"/>title of post 5</li>

</ul>

</div>
</div>

look at the code of left part and right part above , you can see each href attribute of <a> tag in the right part refer to id of <li> tag in the left part ,for example ,in the left we have
<li id="main-post-1"....... >
and in the right we have
<a href="#main-post-1"......>
this mean when we click on the link in the right part ,it will show the content we need in the left part . The right work as control panel for the left part .
all the code of slider effect can't work if we don't initialize its variables .
Now ,right after
<script src="http://wp-genius.solostreamsites.com/wp-content/themes/wp-genius-dev/js/jquery.cycle.js" type="text/javascript"></script> :

add this code :

<script type="text/javascript">

$slideshow = {
context: false,
tabs: false,
timeout: 7000,      // time before next slide appears (in ms)
slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
tabSpeed: 1000,      // time it takes to slide in each slide (in ms)
fx: 'fade',   // the slide effect to use

init: function() {
 // set the context to help speed up selectors/improve performance
 this.context = $('#slideshow');

 // set tabs to current hard coded navigation items
 this.tabs = $('ul.slides-nav li', this.context);

 // remove hard coded navigation items from DOM
 // because they aren't hooked up to jQuery cycle
 this.tabs.remove();

 // prepare slideshow and jQuery cycle tabs
 this.prepareSlideshow();
},

prepareSlideshow: function() {
 // initialise the jquery cycle plugin -
 // for information on the options set below go to:
 // http://malsup.com/jquery/cycle/options.html
 $('div.slides > ul', $slideshow.context).cycle({
     fx: $slideshow.fx,
     timeout: $slideshow.timeout,
     speed: $slideshow.slideSpeed,
     fastOnEvent: $slideshow.tabSpeed,
     pager: $('ul.slides-nav', $slideshow.context),
     pagerAnchorBuilder: $slideshow.prepareTabs,
     before: $slideshow.activateTab,
     pauseOnPagerHover: true,
     pause: true
 });     
},

prepareTabs: function(i, slide) {
 // return markup from hardcoded tabs for use as jQuery cycle tabs
 // (attaches necessary jQuery cycle events to tabs)
 return $slideshow.tabs.eq(i);
},

activateTab: function(currentSlide, nextSlide) {
 // get the active tab
 var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);

 // if there is an active tab
 if(activeTab.length) {
     // remove active styling from all other tabs
     $slideshow.tabs.removeClass('on');

     // add active styling to active button
     activeTab.parent().addClass('on');
 }     
}     
};


$(function() {
// add a 'js' class to the body
$('body').addClass('js');

// initialise the slideshow when the DOM is ready
$slideshow.init();
});  

</script>

ok . Save widget and check out the slider for its operation
In the next post ,I will tell you how to use this slider for showing recent post like what I did
Please subscribe this blog for receive update .

The art-works of Alan Pepin.

Painting and drawing of the American artist and illustrator Alan Pepin.

Cowboy Muscle

















Locker Room


















Gentleman Gene












Nude Sketches

















Website: http://www.alanpepin.com/

Erotic drawing. David Alan Crumpler.

The art-works of American artist David Alan Crumpler. Nude and semi-nude athletes in black-and-white drawing.

















































































































Website: http://www.muscleart.org/

Simplex Next - template for blog

P/s: there are some errors in Simplex Next template that cause it can't show feature posts in right way . I fixed it and provided new download link . Click on download and check it out
I would like to introduce to you my new template .It's named Simplex Next , a template in blog style . I think it can be used for tech blog or blog on auto industry .


Live demo | Download

There are a translated version of this template in Portuguese . It also contain an install instruction in Portuguese . You can Download it here
Gabriel Silveira.from Brazil is the person who translated this template . Thanks you so much,Gabriel .

Install instruction
1,Download template file and unzip . You get a template file in xml format and a folder of images .
2,Upload all images to a image hosting service . I recommend Photobucket
3,Open xml template file in your word editor .I recommend Notepad++ for editing template file . Notepad++ is a very useful program for editing ,and it's free . You can get it here
4,Find this code :


Change the blog url to your blog url . I marked an arrow to where need to change .
5, Save template . And upload it to your blogger.
6,You can add widgets to this template . It's widget ready
7,To make your post showed in feature post ,add a label "Feature" to your post in Labels for this post text box
Hope you enjoy it .