24 Mart 2017: Cuma
Gölge

Bloggerda Takvim Yapımı

Bu yazı 3 sene [3 seneden daha eski de olabilir] veya daha önce yayınlanmış olduğundan; görülen linklerde, resimlerde veya kodlarda hata olması çok olası. Herhangi bir hata ile karşılaşmanız durumunda bana buradan bildirebilirsiniz. Anlayışınız için teşekkür eder, keyifli okumalar dileriz :) Enes İLHAN
Blogger İpuçları 29 Ağustos 2010 17 8.395  
Bu Kişisel Blog'da 550 kategori'de yazıya yazılmış adet değerli yorumlarınız bulunmaktadır..

Bloggerda belki de şimdiye kadar ki yapılan işlerden en zahmetli olanı herhalde Arşive Takvim eklemektir. Benim şimdiye kadar 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 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ı Genişlet tikinin seçili olmadığından emin oluyoruz. Bakın dikkat edin bu sefer bu tiki işaretlemiyoruz ! Bu işlemden 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 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.

Enes ILHAN

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 Yapılmış

Bir Cevap Yazın

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