Blogger Yayın Yanına Takvim Penceresi Ekleme Eklentisi

Blogger Yayın Yanına Takvim Penceresi Ekleme Eklentisi 

Blogger Eklentileri kategorisinde yayın yanına ufak bir pencere açarak tarihleri gösteren, basit bir Blogger eklentisinden bahsedeceğim.


Blogger Yayın Yanına Takvim Penceresi Demo

 Dile bağlı olarak pencere içeriğini kendi belirleme özelliği bulunan Blogger eklentisini kullanmak için öncelikle tarih ayarlarını dil tercihinize göre ayarlamanız gerekiyor.

Blogger yönetim panelinden alakalı blogun Ayarlar sekmesine >> Dil ve biçimlendirme kısmına geçerek tarihlerin gösterim şeklini belirliyoruz.

Blogger Yayın Yanına Takvim Penceresi Ekleme Eklentisi 

Blogger Yayın Yanına Takvim Penceresi Ekleme Eklentisi

1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widget şablonlarını genişlet kutucuğunu işaretliyoruz. 

2 ) Ctrl + F yardımı ile <h2 class='date-header'><span><data:post.dateHeader/></span></h2> kodunu buluyoruz. 

3 )<h2 class='date-header'><span><data:post.dateHeader/></span></h2> kodu ile aşağıdaki kodları değiştiriyoruz. Not : Bu kod iyi farklı yerde bulunabilir. Kodlar içerisinde iki kere geçiyorsa ikisini de aşağıda ki kod dizilimi ile değiştirin. 

<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

4 ) Ctrl + F yardımı ile  </head> kodunu bulup üzerine gelecek şekilde aşağıda ki Blogger Yayın Yanına Takvim Penceresi kodlarını ekliyoruz.

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivq2-8a8O2V1bqk9v3rzP5SRg61bwOgEF3uJbW0DiE4P3gcr7-jImqr7sl7e4D1uoKbk0X2aDsNVA5ZtGusK4nG3T1-Knxvi8t3FtqyFlGMJxhR_omT5-rq8MzZyrYYTtYDkQXpYibxw_J/s1600/calendar07.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>

Blogger Yayın Yanına Takvim Penceresi Eklentisi Kullanımı 

• Blogger eklentisi çoğu tema kodları ile uyumludur. Fakat bir iki temada sorun çıkartabiliyor yayın içeriği ile arasında ki mesafe de sorun yaşanır ise kırmızı ile belirtilmiş sayısal değeri değiştirerek düzeltebilirsiniz. 

Tweet