Blogger Yatay Slayt Alanı OLuşturmak

Merhaba ArkadaşLar Bugun bloğunuza yatay slayt eklemeyi anlatacağım.

İlk olarak Aşağıdaki Kodu Buluyoruz

]]></b:skin>

Daha Sonra Kodu Bulduktan Sonra Aşağıdaki Kodları ]]></b:skin> Kodundan Öceki Kısma Yapıştırıyoruz...

#carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfBipWGx-Vxsr0e9fX_Ncr8jcM0Q3SkDb_bw7e833Hrz6rCDa9K84UgoperqGv320xaBUQ0m0mUd5aFRUpBajRgP_iESuVRdh2lx0sFbUFim2o_KxWufHxC1Zryz9Cmx4UccVB9WZbEogM/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7A_MF_1D6E-6dCM9ATU5vvPRN1HmptU6Mavbi2JiqDisOO1Q0BSRY5s65yhhdQsoC9bbLHao2RlJOCisbPt3II6ScTJkArrXluQZXfwtBznGs_BgUEk94mOgmM-H3G3ZRHyLU70Xul3pZ/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}

Daha Sonra </head> Kodunu Buluyoruz.Aşağıdaki Kodları Kopyalayıp Bulduğumuz </head> Kodundan Önceki Kısma Yapıştırıyoruz...

aBold = true;

summaryPost = 140;
summaryTitle = 25;
numposts1 = 12;

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 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
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="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div>
<h5>
'+daystr+'</h5>
<a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>
';

document.write(trtd);
j++;
}
document.write('</ul>
');
}
//]]>
</script> {

Kod İçerisinde:
numpostsl=12 slayt alanında görüntülenecek resim sayısını belirtir.Bu değeri arttırıp azaltabiliriz.
renkli olarak verdiğimiz width ve height değerleri slayt alanında görüntülenecek resimlerin boyutunu belirtir.

Son olarak <div id='main-wrapper'> Kodunu Bulun Ve Aşağıdaki Kodları Bulduğumuz Kodun Hemen Üzerine Yapıştırıyoruz...
Eğer Kodlar İçerisinde <div id='main-wrapper'> Kodunu Bulamazsanız <div class='column-center-outer'> Kodunu Bulun Ve Aynı işlemi Gerçekleştirin..

Kod İçerisinde:
visible:5 değeri birkerede slayt alanında görüntülenen resim sayısını gösterir.
"slayt" Yukarıdaki anlatımda yatay slayt alanının etiket bazlı çalıştığını söylemiştik, slayt alanında görüntülenmesini istediğimiz yazılar için etiketi burdan belirliyoruz.Örnek: "slayt" yerine "resim" yazdığımızı varsayalım:slayt alanında görünmesini istediğimiz yazımızın etiketlerinden bir tanesini "resim" olarak girdiğimiz zaman, yazımız slayt alanında görüntülenecektir, eğer yazıyı slayt alanından kaldırmak istersek yayınladığımız yazıdaki "resim" etiketini silmemiz yeterli olacaktır.Burdaki etiket seçimi size kalmış.

Blogger Yatay Slayt Alanı OLuşturmak

Yorum Gönder

Blogger film teması

Webdelisi Blogger Teması

Made with Love by

Contact form