Blogger Kayan Yatay Şerit Halinde Hareketli Slayt Alanı (Film Şeridi Tarzında)

Film şeridi gibi yatay olarak hareketli bir şekilde kayan, blogger kullanıcıları için tasarlanmış etiket bazlı çalışan slayt alnını blogunuza uygulamayı anlatacağız.Bu slayt alanını uygulamadan önce bir etiket seçiyorsunuz, biz slayt etiketini seçtiğinizi varsayarak anlatıma devam edelim, slayt alanında görünmesini istediğiniz yazıların etiketlerinden bir tanesine seçtiğimiz slayt kelimesini yazıyoruz.Bu şekilde slayt alanında slayt etiketi yazdığımız yazımız görünecektir.

Adım adım blogger için kayan yatay şerit halinde hareketli slayt alanını blogunuza eklemeyi anlatalım:
DEMO GÖRÜNÜM
1-Blogger Hesabımızla Giriş Yapıyoruz.
2-Uyarı!Her ihtimale karşı şablonumuzun yedeğini almayı unutmuyoruz.
3-Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretliyoruz.
4-Kodlar içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp buluyoruz.
5-Aşşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju386ib896uqL5yqGuv90TChwv-USauB4Uz-8EOUY3KeDs65FbpN3nh7UoAjfib2yeekRrEFERJ7ufJoBrk8_31xiBGfnXTrdW4UJW9s8VluGY37Flxhut6jRuoH6x0-PgNUjjh2ecZQU/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkBiTQQLXdW3evRvSJMj207jck98vKh-Wz32TrLIJjmfGzCQ9rIixHwyfnyO6h1qR_9eP2XeyfsAaPHVSyh98nWG_6_eOGIU6Zr5RpxJyFRIPbhnDkolJdk-CV9RVuQdEBj9wOOyls7nI/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9mTkE_WWoWMT45bwVqveWfapDTHLR20JWjd6nmwhBn8jfD7JXn7zuhYbv1AffT3VhxzBM3xzf5r-aAsMam4r3kHd6Jw2cKo9ETLMVjHa_6fhAHr_v_nZunqS92rLEJuAIBc1u7xMCFdE/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtuogBhgtgmmNpj_sqmTiI24sfr4di8HWh_T7BQYvmQXL4iKT6PzY791jQfB3Y-2iN3C1owpknq-PEnHsZkTNxJYcoV0pafkr_0R9G2LD2mU6ByjDw4qbF1w_7Ni_-QppWZz_PZYGKLYI/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgixXDkb-ssX2JzXrQRCpjOLtugSlQ9gR-IhtmPpIrb_-uwrg-sIlECr99VgUvMinMA3b6W6ZhnYp17YZUKAhavwKvjg4qe3EbAfzm-Jw96F5IbQIXIfEicK9kXYJXi97_C3yqwy31xlxM/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1xeQgSlqUKiFYsojf250061V9Y-1YwDfHL0AAjgm3WGfH3JTOWJzsOkJ6eSk98F8WaRVlpOOhNKMeZKgXI85h_uePFdR-9nPxEhe3ywZUDR0ZOQ_39VZJ5nEqlsMFMqclbsycUyS6KQM/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

kod içerisinde width(genişlik), height (yükseklik) değerlerini değiştirerek sadece şablon boyutunu ayarlayabilirsiniz.
6-Html kodları içerisinde </head> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz.

<!-- Start Horizantl Slider Gadget Code From http://www.oyun04.com/ -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://blogokuluslider.googlecode.com/files/yatayslaytalani.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWbwbmKMxT0FfYu7t25KjYLFqQJDwATWd3zqYUJhFx3N98S6rPeMFvBMXgxfN6rAePdSKclh-4a7XKER66TggvwCvmcocrrmYgFlbwGpv5onknK1Huhr1A66FV7GJq8tjtQ37vN-e-xz0/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "slayt";

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 = ["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 = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
<!-- End Horizantl Slider Gadget Code From http://www.oyun04.com/ -->

kod içerisinde:
numpostsl=15 slayt alanında görüntülenecek resim sayısını belirtir.Bu değeri arttırıp azaltabiliriz.
labell="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: labell="slayt" yerine labell="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ış.
7-Son olarak yine html kodları içerisinde Ctrl+F yardımı ile  <div id='main-wrapper'> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz <div id='main-wrapper'> kodundan önceki kısma yapıştırıyotruz.
Not:Eğer kodlar içerisinde <div id='main-wrapper'> kodunu bulamazsanız; <div class='column-center-outer'> kodunu bulun ve aşağıdaki kodu kopyalayıp bu kodun bir üst satırına yapıştırın.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>    
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,    
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)    
</script>
</b:if>

kod içerisinde:
visible:5 değeri birkerede slayt alanında görüntülenen resim sayısını gösterir.Eğer 5. adımda bahsettiğimiz genişlik ayarları ile oynarsanız burdaki değeride duruma göre değiştirmeniz gerekebilir.
8-Son olarak şablonumuzu kaydedip çıkıyoruız.Eğer yukarıdaki adımları doğru olarak uygularsanız yatay slayt alanı blogunuzda yada sitenizde görünecektir.
Gördüğünüz gibi uygulamsı çok basit ve bir okadar kullanışlı olan bir eklenti, eğer takıldığınız yer olursa yorumlardan bize sorabilirsiniz.Umarım faydası olur.:)

VİDEOLU ANLATIM: