blogger devamını oku eklentisi etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
blogger devamını oku eklentisi etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Blogger Devamini Oku Bölümünü Css ile Özelleştirme

| | Comments

Blogger yakın bir zamanda devanımı oku özelliğini standart hale getirmişti. Bu konu ile ilgili Blogger Atlama Aralığı Ekle - Standart Devamını Oku Özelliği başlıklı bir yazı yayımlamıştım. Devamını oku özelliğini nasıl kullanacağınızın detayları bu yazımda bulunmaktadır.

Blogger kullanıcılarından iletişim formum vasıtasıyla çeşitli istekler almaktayım. Bunlar bazı eklentilerin blogger entegrasyonu, blogger tema çevirisi ve bazı sorunların çözüm yöntemleri gibi çeşitli istekler diyebilirim.

İletişim fomundan istekte bulunan herkese elimden geldiğince yardımcı olmaya çalışıyorum. İstekleri belirli bir sıra düzenine koyarak gerçekleştiriyorum. Bu isteklerden bir tanesi de Blogger'in devamını oku özelliğinin nasıl özelleştirilebileceği yönünde olduğundan basit bir css yöntemi ile herkesin kolayca blogunda uygulayabileceği bir anlatım yapmaya çalışacağım.

Blogger Atlama Aralığı Ekle -Standart Devamını Oku Özelliği

| | Comments

Blogger'in 10 Yıl kutlamalarının devam ettiği şu günlerde Blogger kullancılarına yeni özellikler katmaya devam ediyor. Çoğu blogger kullanıcısının özellikle istediği yazılara devamını oku özelliği artık blogger tarafından standart olarak destekleniyor.

Daha önce Javascript kodları ile otomatik devamını oku özelliği kazandırabiliyorduk. Veya kendimiz yazıyı hazırlarken elle kendimiz devamını oku kodunu html olarak ekliyorduk. Artık bunlara gerek kalmadı diyebilirim.

Bu özelliği kullanabilmeniz için bloggere draft panelinden giriş yapmalısınız. Draft Blogger ile ilgili daha önce burada bilgi vermiştim.

Blogger'e Otomatik Devamını Oku Özelliği Eklentisi

| | Comments

Daha önce TamBirBlog'da Blogger Otomatik Devamını Oku Bağlantısı-2 adı altında yayınlanan eklentiyi bazı blogger kullanıcılarından gelen istek üzerine biraz daha kullanışlı hale getirmeye çalıştım.

Devamını oku kısmının arka planına css kodları ile kullanışlı bir arkaplan atadım. Şimdi bazıları çıkıp biz kendimiz direk resim ile de yapabilirdik diyebilirler. Ama resim ile eklendiğinde w3 doğrulamasında hata olarak görebiliyor. En temizi css kodları ile arkaplan (backround)belirlemek.

Otomatik Devamını Oku Eklentisinin Kurulum Aşamaları

1. Css kodlarınızın en altına aşağıdaki kodları ekleyin.

/* Devamını oku */
.links {
display: block;
width: 130px;
height: 33px;
margin-top: 20px;
padding-top: 7px;
background: url(http://i30.tinypic.com/papo5.gif) no-repeat right top;
text-align: center;
text-transform: uppercase;
font-size: 10px;
color: #F3F4F4;
}
/* -------------------------------- */


Arkaplanda kullandığım resmi değiştirmek isterseniz. Üstteki http://i30.tinypic.com/papo5.gif resim dosyasının yerine kendi hazırladığınız resmin bağlantısını verebilirsiniz.

2. Tema kodları arasında </head&gt; kodunun hemen üstüne aşağıdaki kodları yerleştiriyoruz.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://tm52.weebly.com/uploads/1/3/6/1/1361393/summary-post.js' type='text/javascript'/>


Yukarıdaki kodda bulunan summary-post javascript dosyasını buraya sağ tıklayıp farklı kaydet diyerek summary-post.js dosyasını bilgisayarınıza indirin. Ardından kendi googlepages sayfanıza veya alternatif bir hosta yükleyip yukarıda bulunan http://tm52.weebly.com/uploads/1/3/6/1/1361393/summary-post.js bağlantı linki ile değiştirin.

3. Son aşama olarak temanızın kodları arasında <data:post.body/> kodunu bulup aşağıdaki kod ile değiştirin.


<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url' class='links'> Devamını oku "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>


Yukarıdaki aşamalar tarafımdan test edilerek yayınlanmıştır. Bütün tarayıcılarda sorunsuz çalışmaktadır.

Bu yazı hazırlanırken yararlanılan kaynaklar : TamBirBlog (Blogger Otomatik Devamını Oku Bağlantısı-2)