Sevgili arkadaşlar Blog düzenlemeyle ilgili yazılarımıza devam ediyoruz. Bu yazımda sizlere bloğunuza “Atlama Aralığı” ekleme ve “Devamını Oku” eklentisinin nasıl yapıldığını anlatmaya çalışacağım.
Atlama aralığı özelliği
ile de çok uzun olan bir metnin tamamı yerine sadece istediğiniz kısmının ana
sayfada görünmesini sağlayabilirsiniz. Dilerseniz önce “Atlama Aralığı” nasıl
eklenir onu anlatayım. Bunun için imleci makalemizin ana sayfada görünmesini
istemediğimiz kısmının başına getirdikten
sonra resimde gördüğünüz gibi Atlama
Aralığı Ekleme butonunu tıklıyoruz. Bu butona tıkladığımızda kesik çizgilerden
oluşan bir satır ekleniyor. Eklenen bu satırın üst kısmında kalan kısımlar ana
sayfamızda görünürken altında kalan kısımlar ise görünmüyorlar.
Şimdi de bloğumuzu daha
şık daha gösterecek olan “Devamını Oku” eklentisi nasıl yapılır onu anlatalım. Ekleyeceğimiz kodlar sayesinde ana sayfada
görülen tüm yayınlarımız belirli bir düzen içerisinde görülecektir. Kodları doğru
bir şekilde eklediğimizde sonuç çok güzel oluyor.
Öncelikle
blogger temanızın bir yedeğini alın.
Kumanda Paneli → Şablon →
HTML’yi Düzenle
butonlarını sırasıyla tıklayarak kodlarınızın bulunduğu sayfayı açın. Ctrl+F
yardımı ile aşağıdaki kodu bulun.
</head> |
<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>
|
<data:post.body/> |
<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='more' expr:href='data:post.url'>Devamını oku »</a>
</b:if>
</b:if>
|