Blogger Yatay Slider (Etiket destekli manşet eklentisi)

Blogunuzda etiket bazlı manşet uygulaması ekler. Belirttiğiniz kategoriye göre içerikler sayfa başında slider olarak kayar.

Blogger kontrol panelinizdeyken sırasıyla " Şablon » HTMLyi düzenle " tıklayın. CTRL ve F kombinasyonu'nu kullanarak sayfada " ]]></b:skin> " aratın ve bu kodun üstüne aşağıda verilen kodu ekleyin.;

#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/AVvXsEj-Qi1-d5sLGdSP0Yxr1OZiUY_UT8pM4gF5ZUBuduEVHF39sHG0aBRlMpATuoi_PeG6A4JEvfjiSQqkOdqvKmccB_wPeAFKGCVXuN6PNPzlQNe8ApyouWwjixkg8yBtHgVZNXJ7N6X7VnI/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkJd5pxIfVx4srMwQd5w5d2aZxI9y3VSJf5E0zs0f9KARn2zuaf1a6x7MSsmGeLGihyVKA7g7_tntpvCWe0WL7TyeUzudQLP0zjZNSvqNOxVpnsGMmWxhH5E7hwDcyTctf-Psx4Bzj1Og/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/AVvXsEjJjSzuG9Ufq6UeIoEd9a-4VcfqFgkiEu7GKqXBy1rMQymtcMp60uF1duGFRvvo16LWVkI0WXsHKh1fVlWxQz5Rfl-tedxQYDXkfN-XDze3Bz-MX3zmnqeJRR5eoWc3W47mqh4wa6-D3kk/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPf97DYooa0J0t_tUDgrgvlqXCgvLUZsbykXKxD6CEIlLL1cvOrcRUgNBLnRTutl7xnWjsW5DQbNPcZjOoZ9LuX48Q1mDBG6g8j6GvHLM4degSq1KL2ShO8v-69OBncR78kFU_sR_yZ4Y/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/AVvXsEghk5QtWzVjcKa5KTFJAiOVTg4mxT4YQ4KdkvxWhMSDNH4PO8WzBCmuO4_KVHKGWUR2PMooSxwmItH_zj6UgRu2kxwGQ9yeH3dPBpOkyEkZeoibMDMxknC9csiT9OKhj3hfib-_qPag3Ng/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/AVvXsEiQnEq4SgDoM6csI7tcVeeOGbxIZ9RirJcjEmNcDuy5cfKH_LOeD4IqQpo5Mex_0C7Mpbo8B7mExlub3h5uBU2jYRX9SFF4WMBFYAZiRKwQ_JY_IdQRsz0K8NdSgYb39EPb_JAZ2Of2J-4/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.
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.

<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/AVvXsEgvJmZnj8Fm0M6HJQY1AO-MATVuDEhPN0fbTXt-1IJ0i2UJSXWM3ArKcjPxHG-IVT4NdcVjB1f6WA2UvA1R5fhB35kxLZuettRHbf0XjUNWBkCewoWo8EDHY3Ryjm7EgmCL3bHaIx3UB74/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>

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.