Blogger'da yazı yayın tarihinin takvim yaprağı şeklinde gösterilmesi

Blogger'ın yazıların yayınlandığı tarihi gösterdiği standart tarih başlığı biçiminin hiçte estetik bir görünüme sahip olmadığını düşünüyorum. Ancak bu biçimi değiştirmek elbette ki mümkün. Konumunu CSS özellikleri yardımıyla kendimizin belirlediği boş bir takvim yaprağı üzerine, gün, ay ve yıl bilgisini yerleştirerek, güzel görünümlü bir tarih başlığına sahip olabiliriz. Şimdi nasıl yapılır ona bakalım.

Kurulum

Eklentiyi temamıza uygulamak için yapmamız gerekenler aşağıdaki şekildedir.

• Blogger Kumanda Paneli > Ayarlar > Dil ve biçimlendirme komutlarını uyguluyoruz.
• Tarih Başlığı Biçimini aşağıdaki resimde gösterildiği gibi ayarladıktan sonra, sağ üstteki Ayarları kaydet butonuna basarak yaptığımız değişiklikleri kaydediyoruz.





• Kodlar içindeki değişiklikleri yapabilmek için Şablon > HTML’yi Düzenle > Devam Et > Widget Şablonlarını Genişlet komutlarını uyguluyoruz.
• CTRL+F tuş kombinasyonu yardımıyla <h2 class='date-header'><span><data:post.dateHeader/></span></h2> kodlarını buluyoruz.
• Bu kodların yerine aşağıda yer alan kodları ekliyoruz.

  <!-- takvim yapragi seklinde tarih basligi code-1 START -->
  <div id='Date'>
  <script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
  </div>
  <b:else/>
  <div id='Date'>
  <script>changeDate(&#39;&#39;);</script>
  </div>
  <!-- takvim yapragi seklinde tarih basligi code-1 END -->
  

• Son olarak CTRL+F tuş kombinasyonu yardımıyla </head> kodunu bulup hemen üstüne aşağıdaki kodları ekliyoruz.

  <!-- takvim yapragi seklinde tarih basligi code-2 START -->
  <script type='text/javascript'>
  //<![CDATA[
  var DateCalendar;
  function changeDate(d){
  if (d == "") {
  d = DateCalendar;
  }
  var da = d.split(' ');
  day = "<strong class='date_day'>"+da[0]+"</strong>";
  month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
  year = "<strong class='date_year'>"+da[2]+"</strong>";
  document.write(month+day+year);
  DateCalendar = d;
  }
  //]]>
  </script>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <style type='text/css'>
  /* Calendar style date
  ----------------------------------------------- */
  #Date {
  background: transparent url(http://resim-url.png) no-repeat;
  display: block;
  width:60px;
  height:60px;
  float: left;
  margin: 15px 2px 0 -108px;
  padding: 0 0 8px 0px;
  border: 0;
  text-transform: uppercase;
  }
  .date_month {
  display: block;
  font-size: 15px;
  font-weight:bold;
  margin-top:-1px;
  text-align:center;
  color:#ffffff; /* Month's color */
  }
  .date_day {
  display: block;
  font-size: 28px;
  font-weight:bold;
  margin-top:-8px;
  text-align:center;
  color:#282828; /* Day's color */
  }
  .date_year {
  display: block;
  font-size: 10px;
  margin-top:-8px;
  text-align:center;
  color:#282828; /* Year's color */
  }
  </style>
  </b:if>
  <!-- takvim yapragi seklinde tarih basligi code-2 END -->
  

Ayarlar

http://resim-url.png buraya kullanmak istediğimiz resmin URL bilgisi yazılıyor.

Takvim yaprağının konumunu değiştirmek için margin: 15px 2px 0 -108px; satırında yer alan -108px değerini değiştirebilirsiniz.

Kullandığımız temaya bağlı olarak <h2 class='date-header'><span><data:post.dateHeader/></span></h2> kodundan tema kodları içinde iki tane olabilir. Bu durumda değişikliği her ikisi içinde yapıyoruz.

Bu eklenti ile birlikte kullanabileceğiniz bazı örnek resimleri aşağıda bulabilirsiniz.