Blogger, blog şablonu özel tema tasarımı yapılmış gibi sol tarafta ölçekli resim, sağ tarafta devamını oku, yazı uzunluk ayarı, hatta yazılarınızı her iki yana yaslayan (justify) yazı biçimi ile özelleştirin. Devamını oku yazı linkine resim dahi ekleyebilirsiniz. Blogger yazının devamını oku biçimini atlama aralığı kullanarak yaptığımızı biliyorsunuz. Yazılarınızı ister atlama aralığı ile kesin isterseniz kesmeyin ekleyeceğiniz kodlar ile yapacağınız ayarlar, Ana Sayfa da görülecek olan tüm yazı ve resimler otomatik biçimlendirilmiş olarak muntazam sıra ve düzende görülecektir.
Tüm bu işlemleri yapabileceğiniz uzun bir yazı hazırladım. Kodları sağlıklı bir şekilde eklediğiniz de, Blogger temanız tıpkı özel temalar gibi görülecek. Kodları şablona eklemek için ilgili adımları takip etmeniz yeterli olacaktır.
Kod:1
</head>
Bulduğunuz etiketin hemen üstüne aşağıdaki kodları ekleyin.
Kod:2
<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Şimdi bu etiketi bulun. Bu etiket genelde birkaç tane olabilir. Test blogları ile yaptığım kontrolde “ hasJumpLink “ etiketinin hemen üst kısmında olan kod olarak çalıştı. Birkaç deneme ile çalışan kodu bulabilirsiniz. Temalarda farklılık gösterebilir.
Kod:3
<data:post.body/>
Bu etiketi bulduktan sonra, etiketi silerek aşağıdaki kodları yapıştırın ve kaydedin. Tüm işlemler doğru yapıldı ise eklenti doğru çalışacaktır.
Kod:4
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='readmore' expr:href='data:post.url'>Devamını oku »</a>
</b:if>
</b:if>
Blogger Eklentinin Özelleştirilmesi :
1. Eklediğimiz kodlarda resim Genişlik x Yükseklik ve Yazı uzunluğunu belirleyebilirsiniz.
Kod 2 içindeki satırları bulun.
→ var thumbnail_mode = “yes”; ⇒ Ana Sayfa yazınızdaki resmi “yes” göster “no” gösterme
→ summary_noimg = 430; ⇒ Yazıda resim yok ise yazının uzunluğunu belirler.
→ summary_img = 340; ⇒ Yazıda resim varsa, yazının uzunluğunu belirler.
→ img_thumb_height = 200; ⇒ Resmin yüksekliğini belirler.
→ img_thumb_width = 200; ⇒ Resmin uzunluğunu belirler.
Devamını Oku isminin özelleştirilmesi :
Yukarıda yaptığımız işlemlerden sonra Devamını Oku » ismini CSS kod yardımı ile özelleştirelim. Aşağıdaki kodu şablonda bulun.
Kod:5
]]></b:skin>
Bulduğunuz bu etiketin hemen üstüne aşağıdaki kodları ekleyin.
Kod:6
.more{
float:right;
color:#000;
font-size:13px;
}
CSS kodunun özelleştirilmesi :
→ float:right; ⇒ Devamını Oku ismini sağ tarafta gösteriyor. Sol tarafta olmasını istiyor iseniz kod’u şu şekilde değiştirin. Devamını Oku ismi sol tarafta görülür.
→ float:left;
→ color:#000; ⇒ Devamını Oku ismi siyah renkte görülür. Siz on altılık renk kodlarından birini kullanmak isterseniz buradan bakarak kodu alabilirsiniz. Bazı temalarda renkler Blogger şablon css ekleme kısmındaki sekmede yapacağınız ayarlar ile çalışmaktadır.
→ font-size:13px; ⇒ Devamını Oku isminin font büyüklüğüdür. Rakamları değiştirin.
Devamını oku ismi çift görülürse neler yapılabilir :
→ Kod8 de verdiğim kod ile şablonda arama yapın. Kod7 deki gibi kodları bulacaksınız.
Bu kodları sildiğiniz de çift görülen Devamını Oku isminin biri kalkacaktır. Ancak bu kodların ileride lazım olacağını düşünerek ben farklı bir yol izliyorum. Kod7 sadece bilgi amaçlı verilmiştir. İsterseniz silebilirsiniz.
Kod:7
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
→ Yukarıdaki kodu silmediğinizi düşünerek ikinci Devamını Oku ismini gizleme yapacağız.
Aşağıdaki etiketi bulun.
Kod:8
<b:if cond='data:post.hasJumpLink'>
→ Bu etiketin hemen üst kısmına aşağıdaki etiketi ekleyin ve şablonu kaydedin. Şablon hata kodu verecektir.
Kod:9
<b:if cond='data:blog.pageType == "item"'>
→ Kod7 de en alttaki “ </b:if> “ etiketini, aşağıdan kopyalayın ve hemen altına ekleyerek şablonu kaydedin. Blog hatası düzelecektir. Sonuç için ilk resmi inceleyin.
Kod:10
</b:if>
→ Blog Ana Sayfa da yazınızın kesilerek devamını oku kısmına kadar olan alıntı yazınızı sağa ve sola yaslamaya yarayan ( justify ) kodunu kullanmak isteyen arkadaşlar içindir. Uygulamayı kullanmak isteyen arkadaşlar kod5 yazan penceredeki kodu bulsun ve hemen üst kısmına aşağıdaki kodu ekleyerek blog’u kaydetsin. Yazılar artık sağa sola yaslanmış olarak çıkacaktır.
Kod:11
.post-body{
text-align:justify;
text-justify:inter-word;
}
Ayrıca bakınız ⇒ Blogger yazının devamını oku ismini resimli yapmak için link. Blogger’un kendine ait temasını özelleştirebileceğiniz birçok eklentiye sahipsiniz. Yazı hakkında sorunlarınızı yorumlarda paylaşın.
==> Duyarlı Devamını Oku eklentisi için inceleyin.
