Bumerang - Yazarkafe

Blogger JQuery Slayt Alanı Ekle (Otomatik)

Blogger kullanıcıları için tasarladığımız yep yeni bir slayt alanı ile daha karşınızdayız.Amacımız bloglarınızın daha şık, görsel olarak daha orjinal ve güzel görünmesini sağlayacak eklentileri sizlerle paylaşmak.Bu amaç doğrultusunda sizlerin de desteği ile emin adımlarla ilerlemeye devam ediyoruz.Slayt alanlarının sitelerde ve bloglardaki etkisinden daha önce bir çok kere bahsetmiştim o yüzden tekraretme gereği duymasamda kısaca, yazılarınızın tıklanma oranlarını etkilemesi mevzusu diyelim geçelim.
Bu slayt alanı da daha önceden verdiğimiz yatay kayan slayt alanı ile aynı mantıkla çalışıyor, tıpkı yatay kayan slayt alanındaki gibi etiket bazlı.Seçtiğiniz bir etiketi yazınıza koyduğunuzda yazınız slayt alanında görüntüleniyor.Etiket meselesini bir örnekle açıklamaya çalışalım;Örnek olarak seçtiğimiz etiket "slayt" olsun, eğer yazdığımız yazının etiketlerinden birtanesini "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 ekliyebileceğinizi 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>Ş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:407px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQXu3WFor9M2m_qdssG6KNL_fPfdaqh3_2zlAdbURHp1TRaLLeER1HDSRM4b0iDaDHiviYyUPS7tr-U7cZpEw4Me9aNPgIQZjOuWop3zARkGOjdJX8VF18w0MgnDy0k40iybIZumZciKh/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px 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:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#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='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://blogokulusite.googlecode.com/svn/blogokulu_slider2.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 = 100;
summaryTitle = 25;

numposts3 = 5;

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="407" height="240" 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=5 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.
PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

21 yorum:

  1. http://televizyondakidizi.blogspot.com/  yatay olmadı dikey oldu bende sorun nedir acaaba

    YanıtlaSil
  2. Benim Sitede Büyümüyor Genişliyor Ama Büyümüyor. 
    http://garipbiseyler.blogspot.com/

    YanıtlaSil
  3. 5 . maddede verdiğimiz kod içerisinde koyu renkle belirttiğimiz height değerini arttırısan yüksekliği artar.

    YanıtlaSil
  4. bende gayet iyi odu teşekkürler.
    http://parlakteneke.com  sadece yazı sayfalarında gösteriliyor sidebarda.

    YanıtlaSil
  5. dikey büyüyor ama yatay büyümüyor

    YanıtlaSil
  6. etiket bazlı olmasa çok güzel, malum bazen etiketi değiştiriyoruz yada eklemiyoruz bazende çok fazla etiketleme oluyor vs.

    YanıtlaSil
  7. üstadım yine ben. Ben slaytı çok beğendim. İşime yaramayan bir sitemde denedim çok güzel durdu. Lakin ben alttaki küçük resimlere tıklayınca da o konuya gitsin istiyorum. Bu nasıl mümkün olur acaba? Bu da olsa tadından yenmeyecek inanın. Sitem hakkında yorum yapın lütfen hocam. Herhangi bir yazımın altına yorum yapın. Daha bir ay olmadı kuralı. Hocalarımdan destek isterim.   sanalbilgic.blogspot.com

    YanıtlaSil
  8. maus ile resmin üzerine gelince zaten büyük resim direk olarak çıkıyor büyük resme tıklayıncada bağlantılı yazıya gidiyor.siten de güzel,emeğine sağlık, hayırlı olsun...

    YanıtlaSil
  9. Sayın hocam siteme yaptığınız yorum için teşekkür ederim. O hamilelik linkini orada unutmuşum hocam :)
    Hamilelik ile teknolojinin ne alakası var demişsiniz ya hocam. Güya ben mynet tarzı mns.tr tarzı bir site düşünmüştüm. Tam öyle de değil de ona benzer yani. Kategorilerim var hocam. Sağlık, teknoloji, genel şeklinde. Yine de olmaz diyorsanız oturup bir daha düşüneceğim.

    YanıtlaSil
  10. güzel,büyük düşünmüssün ama seo açısından belli bir alanda yoğunlaşıp seçtiğin kelimeleri arama motorlarında üst sıralara çıkarmak, daha iyi olur.ama yapabilirim dersen senin düşüncelerinde güzel gerçekten.yardımcı olabileceğim bir konu olursa adresi biliyorsun:)

    YanıtlaSil
  11. yükseklik ve genişlil ayarlanmıyor

    YanıtlaSil
  12. Slm ben umut her şey oluyor fakaatt resimle eşleşmiyor yani paragraf büyük resim küçük bakın : http://gunesnews.blogspot.com/ lütfen nasıl yapcağımı söylermisiniz :)

    YanıtlaSil
  13.  resimlerin pikselinin büyük olması gerekiyor.Şöyleki bloggera resim ekliyorsun, normalde resim büyük ama küçük,orta,çok büyük gibi seçeneklerle resmi boyutlandırabiliyorsun resmin orjinali büyük olmasına rağmen blogda küçük görünmesi gibi.resimlerinin piksellerinin orjinal halinin büyük olması gerekli yani.Sen slayt alanını çok büyük yapmışssın 600px falan yapsan ideal olur, senin çok büyük olmuş biraz küçültmeni tavsiye ederim.

    YanıtlaSil
  14. ustekı resımler gozukmuyor neden acaba kucuk resımler var sadece 

    YanıtlaSil
  15. bu slayt kac kez farklı temalardada yukledım calısmadı bırınde sadece kucuk resımler cıkıyordu slayt kod içinde 2 tane var 2 sınıde degıstım ama goruntu yok malesef

    YanıtlaSil
  16. Bu kodu daha önce s.orunsuz kullanıyordum ama ne hikmetse büyük resimler görünmez oldu sadece alttaki küçük resimler görünüyor . Bir arkadaş daha aynı sorunla ilgili yorum yapmış  yardımcı olursanız seviniriz

    YanıtlaSil
  17. kayıtların ustune degılde asagılara ekleyebılecegımız slayt varmı gadget olarak    
    etıket bazlı 

    YanıtlaSil
  18. kayıtların ustune degılde asagılara ekleyebılecegımız slayt varmı gadget olarak    etıket bazlı 

    YanıtlaSil
  19. İyi günler herşeyi yazdığınız gibi yaptım ama ustekı resımler gozukmuyor neden acaba kucuk resımler var sadece, yani slaytta büyük resimler görünmüyor nedeni ne olabilir?

    YanıtlaSil
  20. Bende de sadece alttaki ufak resimler çıktı üstteki büyük dönmesi gereken resim yok

    YanıtlaSil
  21. demosunda da aynı sorun var heralde .js  linklerinden biri patlak verdi

    YanıtlaSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...