jquery sliderın tasarımını özelleştirmek

Slayta farklı bölümler ekleyebilmeniz ve genel ayarla yapabilmeniz için bu yardım notunu oluşturduk,
sarı ve açık yeşille renklendirdiğimiz bölümler yardım notları daha sonra isterseniz bu bölümleri silebilirsiniz.

Kırmızı ile renklendirdiğimiz bölümler RSS yayınlarınızdan içeriği çeken bölümler.

startposts = 0; vesstartposts = 0; etiketleri hangi yazıların gösterileceğini belirler siz yazıların karışık gösterilmesini isterseniz buradaki yazı başlangıcı ve sonunu değiştirererek istediğiniz yazıları gösterebilirsiniz.

Örnek: ben blog'umdaki 5 yazıyı göstermesini istersem etikeleri şu şekilde değiştirmem gerekir.

startposts = 4;

numposts = 5;

Yine kodların içerisinde bulunan bu etiket home_page = "http://interaktifblog.blogspot.com/feeds/posts/default"; bölümde hangi blogun yazılarını gösteriliceğini belirler ... bu bölümde bulunan http://interaktifblog.blogspot.com/feeds/posts/default linki değiştirek istediğiniz blog'un rss yayınından içerik çekebilirsiniz.

Ayrıca bu özelliği kullanarak her bölümde farklı blogların yazılarını gösterebilme imaknınız da bulunuyor.

Açık mavi ile renklendirdiğim bölüm tablonun boyutlarını belirliyor burada ki width uzunluk height yüksekliği belirler hemen karşılarındaki değerlerle oyanayarak uzunluğu azaltabilir veya çoğaltabilirsiniz.

yine koyu maviyle renkelendirdiğim bölümde görselelrin boyutlarını belirliyor aynı şeklde burada buluan değerlerle oynayarak görsellerin ebatlarını belirlemek elinizde.

summaryPost = 190; adlı etikette bölümlerdeki yazıların uzunluğunu belirler yazıların daha kısa veya daha uzun gösterilmesini buradaki değerle oynayarak belirleyebilirsiniz.

<div id='slider-container'>
<div id='slider'>



<div class='feature'>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRJKXt9ELG0ACFEadI4k8V9xDPTEani-19nfoKtFvl-aocvz5GA7sJ89zJGmBqz57xpxoLwLa9Kbdm1lNaAgHzziru5vbpmuixBQNz8GkuU2lTs3_fxvXco6JwD_faboDCj3vlK6I9efcV/";
showRandomImg = true;
tablewidth = 540;
tableheight = 210;
cellspacing = 0;
borderColor = "#68C4F4";
bgTD = " ";
imgwidth = 210;
imgheight = 180;
fntsize = 20;
acolor = "#fff";
aBold = true;
icon = " ";
text = "Yorum";
showPostDate = true;
summaryPost = 190;
summaryFontsize = 12;
summaryColor = "#fff";
icon2 = " ";
startposts = 0;
numposts = 1;
home_page = "http://interaktifblog.blogspot.com/feeds/posts/default";
</script>
<script type='text/javascript'>
//<![CDATA[
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) {
document.write('<table width="'+tablewidth+'" border=0 bordercolor="#FF0000" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'" align="center">');
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

for (var i = startposts; 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') ? '<font color="'+acolor+'">'+pcm+' '+text+'</font>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Ocak","Subat","Mart","Nisan","Mayis","Haziran","Temmuz","Agustos","Eylul","Ekim","Kasim","Aralik"];

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) ? '<font color="'+acolor+'"> - '+day+ ' ' + m + ' ' + y + '</font>' : "";

posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;

var trtd = '<tr><td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td><td style="background:'+bgTD+'" valign="top">'+icon+'<a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br /> '+cmtext+ ' ' + daystr + '<div style="color:'+summaryColor+'; margin-top:2px; border-top:1px '+borderColor+' solid; font-size:'+summaryFontsize+'px;">'+icon2+removeHtmlTag(postcontent,summaryPost)+'... <br /><br /><a href="'+posturl+'" class="more-link">More Link</a></div></td></tr>';

if(summaryPost == 0) { trtd = '<tr><td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td><td style="background:'+bgTD+'" valign="top">'+icon+'<a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br /> '+cmtext+ ' ' + daystr + '</td></tr>'; }

document.write(trtd);

j++;
}

document.write('</table>');
}
document.write("<script src=\""+home_page+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

//]]>
</script>
</div>

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRJKXt9ELG0ACFEadI4k8V9xDPTEani-19nfoKtFvl-aocvz5GA7sJ89zJGmBqz57xpxoLwLa9Kbdm1lNaAgHzziru5vbpmuixBQNz8GkuU2lTs3_fxvXco6JwD_faboDCj3vlK6I9efcV/";

showRandomImg = true;

tablewidth = 540;

tableheight = 210;

cellspacing = 0;

borderColor = "#68C4F4";

bgTD = " ";

imgwidth = 210;

imgheight = 180;

fntsize = 20;

acolor = "#fff";

aBold = true;

icon = " ";

text = "Yorum";

showPostDate = true;

summaryPost = 190;

summaryFontsize = 12;

summaryColor = "#fff";

icon2 = " ";

startposts = 1;

numposts = 2;

home_page = "http://interaktifblog.blogspot.com/feeds/posts/default";

</script>