Header ads

Header ads
» » Blogger Otomatik Manşet(Slider) Eklentisi

Bloggerde etikete/kategoriye göre otomatik yayınlanan slayt manşet slider eklentisidir. Slayt alanları sitelere ve bloglara değer katar. 

Etikete göre yayın: örnek olarak seçtiğimiz etiket "slayt" olsun, eğer yazdığımız yazının etiketlerinden bir tanesini "slayt" olarak yazarsak bu yazımız slayt alanında görüntülenecektir.


Şimdi  altında küçük resimlerele, otomatik değişen ve isteğinize göre boyutlandırabileceğiniz bu slayt alanını blogunuza nasıl ekleriz?


1-Blogger Hesabımızla Giriş Yapıyoruz.
2-Uyarı!Her ihtimale karşı şablonumuzun yedeğini almayı unutmuyoruz.
3-Kumanda Paneli>Şablon>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.

#featuredContent{float:left;width:642px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:642px;height:295px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:642px;min-height:30px;height:auto!important;background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#fff;font:bold 18px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:transparent;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:680px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:43px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:transparent}
#paginate-featured-slider a img{border-top:4px solid transparent}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}

kod içerisinde width(genişlik), height (yükseklik) değerlerini değiştirerek slayt alanının boyutlarını kendinize göre 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 Slider Gadget Code From http://www.blogokulu.org/ -->
<script src='https://7ca993a21dbb7b503008af4e332a3c579989108b.googledrive.com/host/0B-nRFrrmC1zsVFpEMFJuQ3RObjQ/jquery.min.js' type='text/javascript'/>
<script src='https://7ca993a21dbb7b503008af4e332a3c579989108b.googledrive.com/host/0B-nRFrrmC1zsVFpEMFJuQ3RObjQ/contentslider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;
summaryTitle = 25;
numposts3 = 8;
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 showrecentposts3(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
      for (var i = 0; i < numposts3; 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 = '<div class="contentdiv"><a href="'+posturl+'"><img width="642" height="310" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
    document.write(trtd);
    j++;
}
}
function showrecentposts4(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
      for (var i = 0; i < numposts3; 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><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
    document.write(trtd);
    j++;
}
}
//]]>
</script>
<!-- End Slider Gadget Code From http://www.blogokulu.org/ -->

kod içerisinde:
numposts3=8 slayt alanının altında bulunan küçük resim sayısını belirtir.Bu değeri arttırıp azaltabiliriz.renkli olarak belirtiğimiz width ve height değerleride slayt alnının altında bulunan küçük resimlerin boyut değerleridir.

7-Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip açılan gadgetin içerisine aşağıdaki kodu kopyalayıp yapıştırıyoruz.



<div id="featuredContent">
<div class="sliderwrapper" id="featured-slider">
<script>
document.write("<script src=\"/feeds/posts/default/-/slayt?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id="paginate-featured-slider">
<ul><script>
document.write("<script src=\"/feeds/posts/default/-/slayt?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script> </ul>
<div class="clear">
</div>
</div>
<script type="text/javascript">
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[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>
</div>

kod içerisinde:
/feeds/posts/default/-/slayt Yukarıdaki anlatımda 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ış.
8-Gerekli etiket seçimini yaptıktan sonra eklediğimiz html/javascript gadgetini kaydedip blog kayıtlarının üzerine sürükleyip bırakıyoruz.Blogger için otomatik slayt alnımız kullanıma hazır.




Kaynak: blogokulu.org



1 yorum: