3 Kasım 2013

Blogger Arşiv Widgetini Değiştirme

Yayın: Xtreal Blog - 04:01


Blogger için dikkat çekici düzenlemeler yapmak bizim her zaman yararımıza olmuştur. Bloggerın bize sunduğu en basit hali ile arşiv widgeti yine blogger olanakları ile görsel olarak değiştirilebilir. Blogger esnek yapısı sayesinde istediğimiz gibi düzenleme yapabildiğimizi unutmamalıyız. Blogger arşiv widgetini değiştirmek için yapmamız geren bir kaç küçük ekleme bulunuyor.

Öncelikle eklentimizi eklemeye başlanmadan önce herhangi bir aksilik durumuna karşılık şablonumuzun yedeğini almayı unutmamalıyız. Şablonumuzun yedeğini nasıl alacağımıza Buradaki yazımızdan ulaşabilirsiniz.

Blogger arşiv widgetini nasıl değiştireceğimiz konusuna geri dönersek bunun için yapmamız geren ilk şey öncelikle arşiv widgetimizde bir kaç küçük düzenleme yapmak. Arşiv widgetimizi widget ekle diyerek blogumuza ekliyoruz. Sonrasında eklediğimiz arşiv widgetini widgeti düzenle diyerek açıyoruz. Arşiv stilini düz liste olarak seçiyoruz.



 Yukarıdaki resimde görüldüğü arşiv widgetimizin ayarlarını yaptıktan sonra kaydediyoruz. Eklediğimiz arşiv eidgetimizi nasıl özelleştireceğimize gelirsek;

Blogger Kontrol Paneli > Şablon > Html'yi düzenle yolunu takip ederek şablonumuzun kodlarının bulunduğu alana gidiyoruz. Daha sonra widget'e atla sekmesinden Arşiv widgetimizi bularak tıklıyoruz. Daha sonra aşağıda kodu buluyoruz.

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

Dikkat etmemiz gereken nokta arşiv widgetimizin BlogArhive1 olarak değilde BlogArhive2 ve ya BlogArhive3 gibi bir idye sahip olabiliyor olmasıdır. Sonrasında bulduğumuz bu kodu aşağıdaki kod ile değiştiriyoruz.


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

<b:includable id="main">

<b:if cond="data:title">

</b:if></b:includable></b:widget><br />

<h2>

<data:title></data:title></h2>

<div class="widget-content">

<div id="ArchiveList">

<div expr:id="data:widget.instanceId + &quot;_ArchiveList&quot;">

<b:if cond="data:style == &quot;HIERARCHY&quot;">

<b:include data="data" name="interval">

</b:include></b:if>

<b:if cond="data:style == &quot;FLAT&quot;">

<b:include data="data" name="flat">

</b:include></b:if>

<b:if cond="data:style == &quot;MENU&quot;">

<b:include data="data" name="menu">

</b:include></b:if>

</div>

</div>

<b:include name="quickedit">

</b:include></div>

<b:includable id="toggle" var="interval">

</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" href="http://www.blogger.com/blogger.g?blogID=2358009003949149968"><data:i .name=""></data:i></a> (<data:i .post-count="">)

</data:i></li>

</b:loop>

</ul>

</div>

<div id="blogger_calendar" style="display: none;">

<br />

<table id="bcalendar"><caption id="bcaption">

</caption>

<thead id="bcHead"></thead>

<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">&lt;

/td&gt;</td><td id="cell35"></td></tr>

<tr id="lastRow"><td id="cell36"></td><td id="cell37"></td></tr>

</tbody>

</table>

<table id="bcNavigation"><tbody>

<tr>

<td id="bcFootPrev"></td>

<td id="bcFootAll"></td>

<td id="bcFootNext"></td>

</tr>

</tbody></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>

</div>

</b:includable>

<b:includable id="posts" var="posts">

</b:includable>

<b:includable id="menu" var="data">

</b:includable>

<b:includable id="interval" var="intervalData">

</b:includable>

Daha sonra </head> kodunu bularak hemen üzerine aşağıdaki kodları yerleştiryoruz.


<script type='text/javascript'> 

//<![CDATA[ 

var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhcBhNKUKPGVdT6Twd1Il_yzlqGBpDM_r3e_Vkmqg1KvmuH227lSE1kBir5CueeXOgD8kKPFTz59ww9nMXg6Y1G_V4CkhLf3rG3Esvp-Y8nGvHwhrnX04vzZmIIxxXUHsl62cPcsn0W9E/s1600/horizontal-loading.gif"; 

var bcLoadingMessage = " Loading...."; 

var bcArchiveNavText = "Tüm Arşive Bak"; 

var bcArchiveNavPrev = '◄'; 

var bcArchiveNavNext = '►'; 

var headDays = ["Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi"];

var headInitial = ["Pzr","Pzts","Sa","Çar","Per","Cuma","Cmrts"]; 

// 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]; 

      for (var j = 0; j < entry.link.length; ++j) { 

       if (entry.link[j].rel == "alternate") { 

       var link = entry.link[j].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>

Son olarak ise ]]></b:skin> kodunu bulduktan sonra hemen üzerine aşağıdaki kodları yerleştiriyoruz.

#calendarDisplay {display:none;}

#blogger_calendar { margin:0px auto 0px 0px;width:100%;}

#bcaption {border:1px solid #C7C7C7;padding:2px;margin:10px 0 0;background:#fff;font:bold 100% Tahoma, Arial, Sans-serif}

#bcaption select {background:#ffff;border:0 solid #C7C7C7;color:#0080ff;font-weight:bold;text-align:center;}

table#bcalendar thead {}

table#bcalendar thead tr th {width:20px;text-align:center;padding:3px; border:1px solid #C7C7C7; font:bold 100% Tahoma, Arial, Sans-serif;background:#fff;color:#0080ff;}

table#bcalendar {border:1px solid #C7C7C7;border-top:0; margin:0px 0 0px;width:100%;background:#fff}

table#bcalendar tbody tr td {cursor:pointer; text-align:center; border-radius:4px; padding:3px;border:1px solid #C7C7C7; color:#666;font:bold 100% Tahoma, Arial, Sans-serif;}

table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:none;}

table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;}

td.firstCell {visibility:visible;}

td.filledCell {  background:#fff;}

td.filledCell:hover {  background:#dddddd;}

td.emptyCell {visibility:hidden;}

td.highlightCell {background:#53A9FF;border:1px solid #C7C7C7}

td.highlightCell:hover {background:#72B9FF;border:1px solid #C7C7C7}

table#bcNavigation  {width:100%;background:#fff;border:1px solid #C7C7C7;border-top:0;color:#0080ff;font:bold 100% Tahoma, Arial, Sans-serif;}

table#bcNavigation a:link {text-decoration:none;color:#0080ff}

table#bcNavigation a:hover{text-decoration:underline;}

td#bcFootPrev {width:10px;}

td#bcFootAll{text-align:center;}

td#bcFootNext {width:10px;}

ul#calendarUl {margin:5px auto 0!important;}

ul#calendarUl li a:link {}

#calLoadingStatus img {display: block;width: 80px;margin: 10px auto;}

Tüm kodlarımızı ekledikten sonra şablonumuzu kaydediyoruz ve blogger arşiv widgetimizin değiştiğini görüyoruz.

0 yorum:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)

© 2013 iPRESS. All rights resevered. Designed by Templateism