Bumerang - Yazarkafe

Blogger Slayt Alani (Etiket Bazli Otomatik)

Blogger slayt alanı eklentilerine bir yenisini daha ekliyoruz.Seçtiğiniz bir etikete göre slayt alanınıza yayınladığınız içeriklerden görüntü taşıyabilen bir slayt alanından bahsediyoruz.Örnek verecek olursak:Slayt alanını blogunuza ekledikten sonra sizin seçtiğiniz bir etiketi örneğin etiketimiz slayt olsun slayt alanında görüntülemek istediğimiz yazılara ekliyoruz.
Şimdi blogger kullanıcıları için tasarlanmış bu şık görünümlü slayt alanını blogunuza eklemeyi anlatalım.
Demo Görünüm
1-Blogger Hesabımızla giriş yapıyoruz.Her ihtimale karşı şablonumuzun yedeğini alıyoruz
2-Kumanda Paneli>Şablon>Htmlyi Düzenle>Devam Et yolunu takip ediyoruz.Widget şablonlarını genişlet kutucuğunu işaretliyoruz.
3-Html kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp buluyoruz.
4-Aşağıdaki kopdu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.
.shadow{width:950px; height:39px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLhH9Kva_na0gyQRbsPJV_DGWDRSiMAHVUMJ_q68saTUgFhPlV13OLtQucHNu0i8kPltWh80st3ojB4XRh8_5fStOzGdWRPjIfd6QtxF0FjLiaN3tgCoPTNxvwouS9sLnTBf6MPVieEOfa/s1600/shadow1.png) no-repeat center;margin:0 auto}
#featured-slider{position:relative;overflow:hidden;width:950px;height:325px;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsFPv-HmcIUgFyEu__R8yaiFATGfadz-hjSY2nAEx7agbOdX7FGQMgYv6zIWXPSjtuasBQ5XP0rKtnJ0mVG6J_eQhSstH4QHURtvMX608NmwZi5UTQuDZDl4Y8iNOuiBmAjy2IM9IVPVOn/s1600/slider-bg.png) repeat-x top;margin:0 auto;padding:0 auto}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:20px;top:10px;z-index:1;width:305px}
#featured-slider .contentdiv img{background:#fff;padding:2px;border:1px solid #ccc;width:297px;height:297px;overflow:hidden}
#featured-slider .sliderPostPhoto{position:relative;height:305px;width:305px;overflow:hidden}
#featured-slider .sliderPostInfo{position:absolute;top:0;left:345px;color:#a1a1a1;background:url();height:190px;width:540px;padding:5px 0 0}
#featured-slider .sliderPostInfo p{color:#0a0a0a;line-height:1.6em;font-size:14px;padding-top:1px}
#featured-slider .featuredPostMeta a{color:#a1a1a1}
#featured-slider .order a {display:block; width:98px; height:40px; bottom:14px; left:0px;background:url() no-repeat 0 0; position:absolute;  font-size:15px; line-height:13px; text-transform:uppercase; text-decoration:none; font-family: 'Open Sans', sans-serif; color:#fff; font-weight:700; padding:11px 0 0 6px;}
#featured-slider .order a:hover{ color:#515151;}
.featuredTitle{font:bold 24px Tahoma;color:#719429;line-height:1cm}
.featuredTitle a{color:#719429}
.featuredTitle a:hover{color:#0a0a0a}
#paginate-featured-slider{position:absolute;right:0;top:250px;z-index:1;width:595px;height:80px;overflow:hidden}
#paginate-featured-slider ul{width:595px;list-style:none}
#paginate-featured-slider .featured_thumb{float:left;margin-right:15px;width:65px;height:65px;padding:0}
#paginate-featured-slider .featured_thumb:hover{opacity:0.7}
kod içerisinde renkli olarak verdiğimiz 950px ve 325px değerlerini değiştirip slayt alanını kendinize göre boyutlandırabilirsiniz.Yine renkli olarak belirttiğim width:297px ve height:297px değerleride slayt alanında bulunan büyük resmin boyutlarını belirtir.
5-Html kodları içerisinde Ctrl+F yardımı ile</head> kodunu aratıp buluyoruz.
6-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/blogokuluslider2.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 = 400;
summaryTitle = 25;

numposts2 = 7;

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 showrecentposts1(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
  
   for (var i = 0; i < numposts2 ; 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"><div class="sliderPostPhoto"><a class="crop-foto" href="'+posturl+'"><img width="200" height="150" class="alignright" src="'+img[i]+'"/></a></div><div class="sliderPostInfo"><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">'+pcm+' Comments</a></span><p>'+removeHtmlTag(postcontent,summaryPost)+'...   <a href="'+posturl+'" class="meta-more">devamını oku... </a></p></div><p class="order"><a href="'+posturl+'"></a></p></div>';
  document.write(trtd);     
    
     j++;
 }
 
}

function showrecentposts2(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
  
   for (var i = 0; i < numposts2 ; 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 = '<ul class="featured_thumb"><a rel="'+i+'" class="toc" href="#"><img width="65" height="65" title="our product" alt="our product" class="featured_thumb" src="'+img[i]+'"/></a></ul>';     
  document.write(trtd);     
    
     j++;
 }
 
}
//]]>
</script>
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.url == data:blog.homepageUrl'>
      <div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'>
<b:widget id='HTML82' locked='false' title='blogmimarı slayt alanı' type='HTML'>
<b:includable id='main'>
<div id='featured-slider'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</ul>
</div>
</div>    
<script type='text/javascript'>
featuredcontentslider.init({
id: &quot;featured-slider&quot;, //id of main slider DIV
contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
toc: &quot;markup&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
nextprev: [&quot;&quot;, &quot;&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
revealtype: &quot;click&quot;, //Behavior of pagination links to reveal the slides: &quot;click&quot; or &quot;mouseover&quot;
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>
</b:includable>
</b:widget>
</b:section>
      </div>
</b:if>
<div class='shadow'/>
şablonumuzu kaydedip çıkıyoruz.
8-Şablonumuzu kaydedip çıktığımızda kumanda paneli>yerleşim yolunu takip ettiğimizde aşağıdaki gibi bir "blogmimarı slayt alanı" başlıklı blogger slayt alanı gadgetinin blogumuza eklenmiş olduğunu göreceğiz.Başlığı silmeyin slayt alanında görünmeyecek zaten.

Resimde de gösterdeğimiz blogger slayt alanına ait gadgette düzenle linkini tıklıyoruz.Düzenle linkine tıkladığımızda aşağıdaki gibi bir pencere açılacak.

Slayt alanımızın etiket bazlı olduğunu söylemiştik, burdaki gadget içerisine yazdığınız kelime yazılarınızda etiket olarak yazdığınız ve slayt alanında görünmesini istediğiniz yazılarda bulunması gereken kelimedir.Örnekle açıklayalım:Bir yemek blogunuz var bu yemek blogunuzda günün menüsü etiketine sahip 5 adet yazınız var.Günün menüsü etiketine sahip yazılarınızın slayt alnında görünmesini istiyorsunuz, ozaman yukarda verdiğimiz resimdeki alana günün menüsü diye yazıp kaydediyorsunuz.Blogger slayt alanı 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ı

7 yorum:

  1. Merhabalar.. hocam bunun büyük resmini nasıl ayarlayabiliriz acaba? birde sayfa kenarlarını ayarlayınca alttaki küçük resimler büyük fotonun içine kayıyor onları soldan sağa doğru nasıl ilerletebilriz acaba?

    YanıtlaSil
  2. ben yaptım harika bişey aradıgım seydi

    YanıtlaSil
  3. büyük resim  boyutlandırma için 4.adımda kodları belirttim tekrar bir göz atarsanız görürsünüz.küçük fotoları soldan sağa doğru kaydırmak için de yine 4.adımda mavi renkle belirttiğim right:0 yerine right:0 -15px değerini ekliyoruz.Burdaki -15px değerini ne kadar arttırırsanız resimler okadar fazla sağa doğru kayar.

    YanıtlaSil
  4. Eyvallah kardeşim çok sağol...

    YanıtlaSil
  5. Beniyisimiseniyisimi26 Ekim 2012 09:39

    Bütün uygulamalar ekleniyor fakat benim blog ana görüntüm kayboluyor sorunu anlamadım ve malesef başaramadım:(

    YanıtlaSil
  6. Merhabalar hocam bu verdiğiniz değerli bilgiler için çok teşekkür ederim. Slayt alanını ekledim çok güzel oldu. fakat sol tarafa kaydırmam gerekiyor. sayfanın sağ ve dışına taştı, ayrıca slayt alanında gösterilen tanıtımların üzerine tıklandığı zaman üst tarafta slayt alanının alt gölge kısmı üst tarafta görünüyor nasıl ayarlamam gerekir. Saygılarımla  

    YanıtlaSil

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