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> 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)
