Bloggerda Takvim Yapımı

Bloggerda belki de şimdiye kadar ki yapılan işlerden en zahmetli olanı herhalde Arşive Takvim eklemektir. Benim şimdiye kadar beylikdüzü escort ki gördüğüm en zahmetli eklenti bu oldu. Eğer sizde bu işlemi yani arşive takvim eklemeyi gerçekten istiyorsanız ben de gerçekten isteyenler için bu işlemi Ataşehir escort hemen anlatmaya koyulayım 🙂 Gerçekten bu işlemi yapmak isteyener yazının devamını okusun 🙂 Hazırsak hemen başlayalım: Şimdi ilk önce Blogger panelimize gidip HTML’yi Düzenle kısmına giderek Widget Şablonlarını Ataköy escort Genişlet tikinin seçili olmadığından emin oluyoruz. Bakın dikkat edin bu sefer bu tiki işaretlemiyoruz ! Bu işlemden anadolu yakası escort sonra blogunuzda Arşiv öğesinin ekli olduğundan emin olun eğer Arşiv gadgeti ekli değilse ekleyin. Eğer blogunuzda arşiv gadgeti varsa avrupa yakası escort muhtemelen şöyle bir kod satırı olacaktır:

<b:widget id='BlogArchive1' locked='false' title='Blog Arşivi' type='BlogArchive'>

Bu kodu aşağıdaki kodla değiştiriyoruz:

<b:widget id='BlogArchive1' locked='false' title='Blog Arşivi' type='BlogArchive'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
<b:includable id='toggle' var='interval'>
  <!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
 <div id='bloggerCalendarList'>
  <ul>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
 </div>

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>

</caption>
<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->

<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>

</div>

<script  type='text/javascript'> initCal();</script>

</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
  Blog arşivi öğesini yapılandırın - Arşiv öğesini düzenleyin - Düz Liste - Önce Yeniler - Herhangi Bir Ay/Yıl Biçimini Seçin
</b:includable>
<b:includable id='interval' var='intervalData'>
  Blog arşivi öğesini yapılandırın - Arşiv öğesini düzenleyin - Düz Liste - Önce Yeniler - Herhangi Bir Ay/Yıl Biçimini Seçin
</b:includable>
</b:widget>

Hemen bir Önizleme yapın ve eğer baktınız ki hata vermiyor şablonu kaydedin. Kaydettikten sonra aşağıdaki kodu </b:skin> kodundan sonra yapıştırın:

<script type='text/javascript'>
//<![CDATA[

var bcLoadingImage = "http://konfor.enesilhan.net/tema/style/yukleniyor.gif";
var bcLoadingMessage = " Yükleniyor....";
var bcArchiveNavText = "Arşive Git";
var bcArchiveNavPrev = '&#9668;';
var bcArchiveNavNext = '&#9658;';
var headDays = ["Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi"];
var headInitial = ["Pz","Pt","Sa","Ça","Pe","Cu","Ct"];

// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();

//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
   document.getElementById('calLoadingStatus').style.display = 'block';
   document.getElementById('calendarDisplay').innerHTML = '';
  }
function closeStatus(){
   document.getElementById('calLoadingStatus').style.display = 'none';
  }
function bcLoadStatus(){
   cls = document.getElementById('calLoadingStatus');
   img = document.createElement('img');
   img.src = bcLoadingImage;
   img.style.verticalAlign = 'middle';
   cls.appendChild(img);
   txt = document.createTextNode(bcLoadingMessage);
   cls.appendChild(txt);
  }
function callArchive(mth,yr,nav){
// Check for Leap Years
  if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
      fill[2] = '29';
   }
  else {
      fill[2] = '28';
   }
   calMonth = mth;
   calYear = yr;
   if(mth.charAt(0) == 0){
      calMonth = mth.substring(1);
      }
   callmth = mth;
   bcNavAll = document.getElementById('bcFootAll');
   bcNavPrev = document.getElementById('bcFootPrev');
   bcNavNext = document.getElementById('bcFootNext');
   bcSelect = document.getElementById('bcSelection');
   a = document.createElement('a');
   at = document.createTextNode(bcArchiveNavText);
   a.href = bcNav[nav];
   a.appendChild(at);
   bcNavAll.innerHTML = '';
   bcNavAll.appendChild(a);
   bcNavPrev.innerHTML = '';
   bcNavNext.innerHTML = '';
   if(nav <  bcNav.length -1){
      a = document.createElement('a');
      a.innerHTML = bcArchiveNavPrev;
      bcp = parseInt(nav,10) + 1;
      a.href = bcNav[bcp];
      a.title = 'Previous Archive';
      prevSplit = bcList[bcp].split(',');
      a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
      bcNavPrev.appendChild(a);
      }
   if(nav > 0){
      a = document.createElement('a');
      a.innerHTML = bcArchiveNavNext;
      bcn = parseInt(nav,10) - 1;
      a.href = bcNav[bcn];
      a.title = 'Next Archive';
      nextSplit = bcList[bcn].split(',');
      a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
      bcNavNext.appendChild(a);
     }
   script = document.createElement('script');
   script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
   document.getElementsByTagName('head')[0].appendChild(script);
}

function cReadArchive(root){
// Check for Leap Years
  if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
      fill[2] = '29';
   }
  else {
      fill[2] = '28';
   }
    closeStatus();
    document.getElementById('lastRow').style.display = 'none';
    calDis = document.getElementById('calendarDisplay');
    var feed = root.feed;
    var total = feed.openSearch$totalResults.$t;
    var entries = feed.entry || [];
    var fillDate = new Array();
    var fillTitles = new Array();
    fillTitles.length = 32;
    var ul = document.createElement('ul');
    ul.id = 'calendarUl';
    for (var i = 0; i < feed.entry.length; ++i) {
      var entry = feed.entry[i];
      var link = entry.link[0].href;
      var title = entry.title.$t;
      var author = entry.author[0].name.$t;
      var date = entry.published.$t;
      var summary = entry.summary.$t;
      isPublished = date.split('T')[0].split('-')[2];
      if(isPublished.charAt(0) == '0'){
         isPublished = isPublished.substring(1);
         }
      fillDate.push(isPublished);
      if (fillTitles[isPublished]){
          fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
          }
      else {
          fillTitles[isPublished] = title;
          }
      li = document.createElement('li');
      li.style.listType = 'none';
      li.innerHTML = '<a href="'+link+'">'+title+'</a>';
      ul.appendChild(li);

      }
   calDis.appendChild(ul);
   var val1 = parseInt(calDay, 10)
   var valxx = parseInt(calMonth, 10);
   var val2 = valxx - 1;
   var val3 = parseInt(calYear, 10);
   var firstCalDay = new Date(val3,val2,1);
   var val0 = firstCalDay.getDay();
   startIndex = val0 + 1;
  var dayCount = 1;
  for (x =1; x < 38; x++){
      var cell = document.getElementById('cell'+x);
      if( x < startIndex){
          cell.innerHTML = ' ';
          cell.className = 'firstCell';
         }
      if( x >= startIndex){
          cell.innerHTML = dayCount;
          cell.className = 'filledCell';
          for(p = 0; p < fillDate.length; p++){
              if(dayCount == fillDate[p]){
                  if(fillDate[p].length == 1){
                     fillURL = '0'+fillDate[p];
                     }
                  else {
                     fillURL = fillDate[p];
                     }
                  cell.className = 'highlightCell';
                  cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,''')+'">'+dayCount+'</a>';
                 }
              }
          if( dayCount > fill[valxx]){
             cell.innerHTML = ' ';
             cell.className = 'emptyCell';
             }
          dayCount++;
         }
      }
    visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
    if(visTotal >35){
        document.getElementById('lastRow').style.display = '';
       }
  }

function initCal(){
   document.getElementById('blogger_calendar').style.display = 'block';
   var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
   var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
   document.getElementById('bloggerCalendarList').style.display = 'none';
   calHead = document.getElementById('bcHead');
   tr = document.createElement('tr');
   for(t = 0; t < 7; t++){
       th = document.createElement('th');
       th.abbr = headDays[t];
       scope = 'col';
       th.title = headDays[t];
       th.innerHTML = headInitial[t];
       tr.appendChild(th);
      }
   calHead.appendChild(tr);
  for (x = 0; x <bcInit.length;x++){
     var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
     var stripMonth = bcInit[x].href.split('_')[1];
     bcList.push(stripMonth + ','+ stripYear + ',' + x);
     bcNav.push(bcInit[x].href);
     }
  var sel = document.createElement('select');
  sel.id = 'bcSelection';
  sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
  q = 0;
  for (r = 0; r <bcList.length; r++){
       var selText = bcInit[r].innerHTML;
       var selCount = bcCount[r].innerHTML.split('> (')[1];
       var selValue = bcList[r];
       sel.options[q] = new Option(selText + ' ('+selCount,selValue);
       q++
       }
   document.getElementById('bcaption').appendChild(sel);
   var m = bcList[0].split(',')[0];
   var y = bcList[0].split(',')[1];
   callArchive(m,y,'0');
 }

function timezoneSet(root){
   var feed = root.feed;
   var updated = feed.updated.$t;
   var id = feed.id.$t;
   bcBlogId = id.split('blog-')[1];
   upLength = updated.length;
   if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
   else {timeOffset = updated.substring(upLength-6,upLength);}
   timeOffset = encodeURIComponent(timeOffset);
}

//]]>
</script>
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'></script>

Bu işlemi de tamamladıktan sonra tekrar kaydedin. Şimdi arşiv öğesinin ayarlarını yapmanız gerekiyor. Bunun için Yerleşim>Sayfa Öğeleri bölümüne gidin ve yan sütundan arşiv öğesinin altındaki Düzenleye tıklayın. Başlık olarak istediğinizi girebilirsiniz. Stilin Düz Liste olması gerekiyor. Önce En Eski Yazıları Gösterin seçili olmadığından emin olun. Arşiv Frekansı Aylık olmalı. Tarih Biçimini kafanıza göre seçebilirsiniz.
Şimdi Değişiklikleri Kaydete tıklayın. Daha sonra blogunuza gidip takvimin  bir önizlemesini yapabilirsiniz. Önizlemeyi yaptığınızda yolunmuş tavuk gibi bir görüntü göreceksiniz. Eğer bu yolunmuş tavuğu ford görünümlü şahin yapmak istiyorsanız </b:skin> kodundan önce şu kodları yapıştırın:

/* Calendar
----------------------------------------------- */
/* div that holds calendar */
#blogger_calendar { margin:0 0 0 10px;padding:3px;1px solid #000;background:#FFF ; width:96%;}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:0; background:#ffffff; padding:0;margin:0 0 0}
/* The Archive Select Menu */
#bcaption select {background:#ffffff; color:#000000; border:1 solid #D8D8D8; text-align:center; width: 99%; font-family:Tahoma;}
/* The Heading Section */
table#bcalendar thead {background:#B5D3DD ;color:#ffffff;}
/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; border:1px solid #D8D8D8; font-family:Tahoma; font-weight:normal;}
/* The calendar Table */
table#bcalendar {border:0 solid #000;border-top:0; margin:0px 0 0px;width:95%;}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; border:1px solid #D8D8D8;}
/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold; color:#0788C3;}
/* First Row Empty Cells */
td.firstCell {visibility:visible;}
/* Cells that have a day in them */
td.filledCell {background:#fff;}
/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}
/* Cells with a Link Entry in them */
td.highlightCell {background:#B5D3DD;border:1px solid #BDBDBD!important}
/* Table Navigation */
table#bcNavigation {width:95%;background:#FFFFFF; -moz-border-radius: 2px;
-webkit-border-radius: 2px; border:1 solid #D8D8D8; color:#fff;}
table#bcNavigation a {color:#0788C3;text-decoration:none;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important; list-style:circle;}
ul#calendarUl li a{ color:#0788C3; list-style:circle;}

Eveet artık sizinde şaşalı bir takviminiz var 🙂 CSS kodlarınızı kendi şablon renklerine uyumlu hale getirebilirsiniz. Renk kodlarını bulma aracı olarak önerim İnstaneyeDropper‘dır. Bu adresten indirebilirsiniz. Bu zahmetli işlemde mutlaka yapamadağınız yer yada sormak istedikleriniz mutlaka olacaktır. O yüzden ben üniversiteye gitmeden sorularınızı sorun gidince böyle çok ilgilenemeyeceğim 🙂

Bu yazıdan önce yazmış olduğum "Blogger Özlü Sözler Eklentisi" başlıklı yazımı da okumanızı tavsiye ederim.

Bu Yazıya Emoji İle Tepki Ver?

  • Beğen
  • Muhteşem
  • Hahaha
  • İnanılmaz
  • Üzgün
  • Kızgın

Herkese Merhabalar, ben Enes İLHAN. Gaziantep'te doğdum, Adana'da Büro Yönetimi ve Yönetici Asistanlığı bölümünü okudum ve 2012'de mezun oldum. Askerliğimi uzun dönem olarak, { acemiliği Ankara/Mamak'ta , usta birliğini ise Hatay/İskenderun'da } yapıp bitirmiş bulunmaktayım. Şimdi ise hayata atılmanın çabası içerisine girmiş bulunmakta olup iş bulma derdindeyim.

17 yorum

  1. Tolga Aşk   •  

    Eline sağlık Enes kardeşim.

  2. Enver Arslan   •  

    Enes herkes merak ediyordu anlatman iyi olmuş teşekkürler 🙂

  3. bidunyabilgi   •  

    Eline sağlık kardeş teşekkürler

  4. Enes İLHAN   •  

    @bidunyabilgi
    Rica ederim de bu eklenti Blogcuya oluyormu ki teşekkür etmişsin ?

  5. YAKUP ÇETİN   •  

    İyi günler kardeş sormam gerken birşey var. Söyleki bu takvimin altında ayın eklenen içerikleri sıralanıyorya ben bunu istemiyorum çok fazla kayıt olduğu için uzunca bir liste oluşuyor.

    Bu konuda bir çalışma yapabilirmiyiz.

  6. Enes İLHAN   •  

    @YAKUP ÇETİN
    @YAKUP ÇETİN
    Evet bu olayı ufak bir css kodu ile halletmek mümkün. <-/b:skin>{ – tre yok}
    kodundan önceki css koduna şu kodu eklerseniz sorun düzelecektir:
    #calendarDisplay{display:none;}

  7. Ali Beşbudak   •  

    kodunu değiştirdiğimde hata veriyor :S. Kaç kere denedim ama olmadı =(

  8. Enes İLHAN   •  

    @Ali Beşbudak
    Kod görünmüyor. – işareti koyarak yazarsan görüp ona göre fikir verebilirim.

  9. Ali Beşbudak   •  

    type='BlogArchive'> bu kodu değiştirdiğimde hata alıyorum.

  10. memurvadisi   •  

    eyvallah hocam bir deneyelim bakalım

  11. !ツ-ㄨ™Nette-Bilgi™ ㄨ-ツ!   •  

    kardeş http://www.nettebilgi.com adresime yapıyorum hata falan da vermiyor ama takvim falanda gözükmüyor aynısını yaptım nedendir acaba bir yardımcı olsan

  12. ozbuyucusu   •  

    Ben bunu uyguladım ancak;takvimin altında yazılar da görünüyor?onları nasıl kaldırabilirim?

  13. ozbuyucusu   •  

    Yakup ÇETİN'e attığın çözümü görmemişim.Teşekkür ederim.

  14. Enes İLHAN   •  

    Rica ederim inşallah işinize yaramıştır.

  15. Godik   •  

    hocam yaptım fakat takvim gözükmüyor sebebi ne acaba?

  16. Salih Onar   •  

    Hiçbir hata yapmadım fakat takvim gözükmiyor yardım eder misiniz?..

  17. Yakup Çetin   •  

    eskiden eklemiştim ama şuan ekleyemiyorum stil ve js bölümlerinde bir sıkıntı yokta <b:widget id=’BlogArchive1′ bölümünde bir sıkıntı var bX-Rfwc3p hata kodu yazıyor ve blogger’da da hata açıklaması yok malesef bu konuda yardımcı olabilirmisin kardeşim. 

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Güvenlik Sorusu ? * Time limit is exhausted. Please reload the CAPTCHA.