Blogspot'a "Devamını Göster" Eklentisi Eklemek

Merhaba arkadaşlar bu yazımda sizlere Blogspot için Devamını Oku Eklentisini Eklemeyi ve Yayınılarımızda resim olmadığı zaman, Anasayfamız da yazımızın önüne otomatik resim koymayı Blogumuza nasıl ekleyeceğimizi anlatacağım.

İlk olarak Blogumuzun Kontrol Panelinden/Şablon 'a geliyoruz ve sonrasında Yedekle/Geri Yükle'ye tıklıyoruz, burdan "Tam Şablonu indir" diyoruz ve şablonumuzun yedeğini almış oluyoruz.

Not: Yapacağınız işlemler için muhakkak yedek almanızı tavsiye ederim zira, zarar ziyan olmasın.

                     Otomatik Thumbnail Eklentisi için;

Not: Resimsiz Yazıya Otomatik Resim Gösterme (Sadece Anasayfa da Çıkıyor)

* Yedeğimizi aldığımıza göre bir sonraki aşamamızda HTML' yi düzenle diyoruz

* Ctrl+F ile "</head>" bu kodu buluyoruz, arama yaparken tırnak işaretinin arasında kalan kodları yazın ve aşağıdaki kodları, bulduğumuz kodun bir üst satırına yapıştırın.


Kodları Göster

<script type='text/javascript'>var thumbnail_mode = "no-float" ; summary_noimg = 400; summary_img = 400; img_thumb_height = 120; img_thumb_width = 120; </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"); if(img.length<=0) { imgtag = '<span style="float:left;margin-right:5px;"><img src="https://lh3.googleusercontent.com/-AWMpVJJr2jM/UuRbwz9m3DI/AAAAAAAAASw/0w6yWlm1XZE/w275-h266-no/mn3x.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; var summ = summary_noimg; } if(img.length>=1) { imgtag = '<span style="float:left;margin-right:5px;"><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> </div>

Not: Arkadaşlar eğer diyorsanız ki "Ben otomatik resim koymayacağım sadece devamını oku eklentisi olsun" ki cazip bir bakış açısı, yapmanızı tavsiye edeceğim şey şudur, yine yukarıda ki işlemleri harfiyen yapın yaptıktan sonra yukarı da verilen kodlar arasından aşağıda ki tırnak içerisinde olan kodları silin. Bu işlem şu demek oluyor; sadece "Devamını Oku Eklentisi" eklerseniz yazıyı kafasına göre bölmüş ve ardından gelen "Devamını Oku" yazısı ile karşılaşırsınız, fakat siz yazının miktarını ayarlamak isteyebilirsiniz bunu için Otomatik Thumbnail Eklentisini de ekleyin. Tüm işlemileri bitirdikten sonra Otomatik Thumbnail eklentisi için eklediğiniz kodlar arasından aşağıda ki kodları silin ve şablonu kaydedin. 

"if(img.length<=0) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="https://lh4.googleusercontent.com/-STEFMbvwAXQ/Ux5Bu1IhINI/AAAAAAAAAsQ/Tn_u6EujGx4/w275-h266-no/mn3x.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}"

* Şablonu ön izleme yapıyoruz eğer bir sıkıntı yoksa devam ediyoruz. 

                     Devamını Oku Eklentisi için;

 * Aynı şekilde CTRL+F diyerek aşağıdaki kodu buluyoruz.

<data:post.body/>

* Evet bahsettiğim yerdeki kodu bulduysak bu kodu siliyoruz ve aşağıdaki kodu bunun yerine yapıştırıyoruz.

<!-- Oto devamını oku başlangıç -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Devamını oku...</a>
</b:if>
</b:if>
<!-- Oto devamını oku bitiş -->

* Tüm işlemleri sorunsuz yaptıysanız kodlar çalışacaktır. Fakat sizlere tavsiyem şablonu önizle diyerek muhakkak ön izleme yapın direkt kaydetmeyin.

Not: Buraya dikkat! Eğer, "<data:post.body/>" bu koddan birden fazla bulursanız, tüm bulduğunuz kodları yukarıda ki kodlarla değiştirin. Aksi halde eklenti çalışmayacaktır bilginize...

* Düzenlemek isteyebileceğiniz şeyler;

Yazının miktarını ayarlamak için ise ilk eklediğimiz kodların içinde şu kodları bulup istediğiniz yazı miktarını ayarlayabilirsiniz;

sumary_noimg = Yazıda resim olmadığı zaman belirlenecek yazı miktarı
sumary_img = Yazıda resim varken gösterilecek yazı miktarı

Bu belirleyeceğiniz yazı miktarları yazının ana sayfadaki gösterilecek özet kısmını oluşturmaktadır, burada ki rakamları kafanıza göre değiştirerek kendi isteğinize uygun bir özet görünümü elde edebilirsiniz;

* Resim eklemediğiniz yazılarınızdaki resmin, ana sayfada hangi boyutlarla görüneceğini ise aşağıdaki kodlar belirler;

img_thumb_height = 120;
img_thumb_width = 120;

* Eğer yazınızda resim yoksa, yazınızın ana sayfadaki görünecek resmi belirleyen link ise aşağıdaki linkimizdir. Bu linki istediğiniz bir resmin linkiyle değiştirebilirsiniz. Sizlere verdiğim kodlardaki örnek resim linki ise;

https://lh4.googleusercontent.com/-STEFMbvwAXQ/Ux5Bu1IhINI/AAAAAAAAAsQ/Tn_u6EujGx4/w275-h266-no/mn3x.jpg

1. Not: Bu resim sadece anasayfa da görünecektir.
2. Not: Burda anlatılanları değiştirmek tamamen sizin hayal gücünüze kalmıştır, istediğiniz herşeyi değiştirmek sizin elinizde.

Hadi hayırlı olsun eklentiniz artık hazırdır. İlerleyen zamanlarda sadece Devamını Oku Eklentisi Eklemeyi de Anlatacağım artık dilediğinizi kullanmak size kalmış...

Takıldığınız bir yer olursa yorum sekmesinden yorum bırakabilirsiniz en kısa sürede yardımcı olurum...İyi Çalışmalar...