Make a featured content slider
There are some tutorial on sliders in Simplexdesign blog like using Jquery Cycle or using Nivoslider . In this post ,Nady from Indonesia will show us another slider ,using FeatureContent Slider . This is the first guest post in my blog . Thanks all for supporting and thanks Nady for this post .This tips is applied for default Blogger templates only,because in Simplex Templates ,I modified the code so much that it's hard for you to search and add code in correct place.
Now with javascript, blogger can make automatic slider for featured posts look like wordpress, just give the name of 'Featured' on the label of each post. Before go to the tutorial, you can see demo in main slider
This tutorial uses 2 javascripts one for getting posts from a specific label , I get this script in SIMPLEX BLOGNEWS and the other for content slider , Featured Content Slider v2.4
1,The first step
Put this code or script for hack label post before </head><script>
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
numposts1 = 5;
label1 = "Featured";
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 showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();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;
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 = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="590" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
</script>
You can modify this code,according to your need
summaryPost = 140; -> the number of character in post summary
numposts1 = 5;-> number of posts
and, size your images
width="590" height="240"
2,The second step
Put this script for content slider before </body>
<script src='http://dl.dropbox.com/u/12924430/contentslider.js'></script>
<script>
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
3,The third step
Find this code <div id='main-wrapper'> and put this code thereafter.
<b:if cond='data:blog.pageType == "index"'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>
5,The fifth step
Adding style for 'featured content slider' with CSS. Put this code before ]]></b:skin>
#featured{margin-bottom:35px}
.sliderwrapper{position: relative;overflow: hidden;border: 10px solid #dedde5;border-bottom-width: 6px;height: 250px}
.sliderwrapper .contentdiv{background:#68667B;visibility: hidden;position: absolute;left: 0;top: 0;padding: 5px;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
.pagination{text-align: right;background-color:#dedde5;padding: 2px 10px 10px}
.pagination a{font-size:11px;color:#dedde5;padding: 0 5px;background:#68667B}
.pagination a:hover, .pagination a.selected{color:#68667B;background-color:#fff}
.featuredPost{width:95%;padding:5px 10px 10px;background:#68667b;background:rgba(104, 102, 123, 0.9);color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:16px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}
yup.. you have to adjust again the code, according to your template
6,The last step
Create a new post and give it the label 'Featured'. If you are using image, default size is 590x240 pixel, look at first step if you need modify.
You may also Like
Labels
Có gi hot?
Nhà ngoại cảm HỒ VĂN DŨ
Nhà ngoại cảm HỒ VĂN DŨ
NHÀ NGOẠI CẢM NGUYỄN THỊ HƯỜNG - Chuyên gia đón tiếp Vong linh tại Miền Trung
NHÀ NGOẠI CẢM NGUYỄN THỊ HƯỜNG - Chuyên gia đón tiếp Vong linh tại Miền Trung
Pride and Prejudice (1995) - 6 Mini - Vietsub - Mediafire
Pride and Prejudice (1995) - 6 Mini - Vietsub - Mediafire
Gặp chuyên gia cảm xạ Nguyễn Ngọc Sơn
Gặp chuyên gia cảm xạ Nguyễn Ngọc Sơn
Nghịch tí cho vui...
Nghịch tí cho vui...
Video nhà ngoại cảm Phan Thị Bích Hằng 2012
Video nhà ngoại cảm Phan Thị Bích Hằng 2012
The Italian Job 2003 - Kẻ Phản Bội - Mediafire - Vietsub
The Italian Job 2003 - Kẻ Phản Bội - Mediafire - Vietsub
Nhà ngoại cảm Vũ Thị Minh Nghĩa được linh hồn bác sĩ Đặng Thùy Trâm chữa bệnh
Nhà ngoại cảm Vũ Thị Minh Nghĩa được linh hồn bác sĩ Đặng Thùy Trâm chữa bệnh
A Bug's Life - 1998 - Vietsub
A Bug's Life - 1998 - Vietsub
BBC Psychic Vietnam
BBC Psychic Vietnam
0 nhận xét :
Ghi chú cho mẫu nhận xét:
- [img] ..link..[/img].
- [youtube] ...link...[/youtube].
- [nct]...link...[/nct].