Blogger için küçük resimli Otomatik Devamını Oku Eklentisi blogunuzun düzenli görünmesini sağlayan bir eklenti. Anasayfada yazı içerisindeki resimlerin boyutunu zevkinize göre otomatik küçültüp ve yazının sadece sizin istediğiniz kadarını gösterir. Bütün yazılılarınız anasayfanızda belli bir düzen içerisinde görünür. Normalde manuel olarak yaptığınız yazının belli kısmının anasayfada görüntülenmesi işini, her yazıda tek tek "More" tıklayıp kesmenize gerek kalmaz.
ÖNİZLEME
Blogger yazılarınızda Otomatik Devamını Oku özelliğini kullanma
1. Blogger kontrol paneli > şablon > HTML'yi Düzenle
2. Kod alanı içinde herhangi bir yere tıklayın, Ctrl+F yardımı ile aşağıda bulunan kodu aratıp bulun.
<data:post.body/>
Not: Enter'a bastıktan sonra, birden çok kez bu kodu bulacaksınız ama <div class='post-body entry-content'> nin hemen altındaki ilk sıradaki aradığımız kod!.
3. ve bu kodu silip yerine aşağıdaki kodları yerleştirin.
<b:if cond='data:blog.pageType != "static_page"'> <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> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div class='readmore'> <a expr:href='data:post.url'>Devamını Oku</a> </div> </b:if> </b:if>
4. Daha Sonra şu Kodu Bulun:
</head>
5. Hemen Üzerine Aşağıdaki kodları ekleyelim:
<script type='text/javascript'> summary_noimg = 550; summary_img = 450; img_thumb_height = 150; img_thumb_width = 200; img_thumb_nosrc = "Buraya Resimsiz konularınızda görülecek resim linkinizi ekleyin"; img_alt_nosrc = "Buraya Resimsiz konularınızda görülecek resmin tanım etiketi"; </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(img.length<=1) { imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" alt="'+img_alt_nosrc+'"/></div>'; summ = summary_noimg; } 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" alt="'+img[0].alt+'"/></span>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>
Özelleştirme
● Karakter sayısını değiştirmek için mavi renkle işaretlediğim bölümleri değiştirin.
summary_noimg = 550; Resim olmadan, resimsiz Karakter sayısı.
summary_img = 450; Kücük Resimli (thumbnail) Karakter sayısı.
● Konuya eklediğiniz ilk resmin anasayfada hangi boyutlarda thumbnail (küçük resimler) istiyorsanız, kırmızı değerleri (150X200) değiştirin.
img_thumb_height = 150; küçük resmin (thumbnail) yükseklik boyutu.
img_thumb_width = 200; küçük resmin (thumbnail) genişliği.
6. Değişiklikleri kaydetmek için şablonu Kaydet butonunu tıklayınız. Bu kadar.
Not!!!: Konu 5 kasım 2014 tarihinde tekrar düzenlendi. Ve kodlar sorunsuz çalışıyor. Blogunuza bu eklentinin uygulamasının zor olduğunu biliyorum. Ama bu kodların çalışmadığı anlamına gelmez. Yorum kısmına "yapamadım, çalışmıyor, olmuyor" yazmak yerine Şablonunuzu yedekleyip yedeğinizi bana Blogger yardım sayfamdan gönderin. Ben şablonunuza bu eklentiyi uygular size geri gönderirim ve sizde "güzel bir yorum" yapabilirsiniz.
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...
ben yaptım ama olmadı
YanıtlaSilSlmlar ben blogumda uyguladım ancak çalışmıyor ve atlama aralığı eklediğimde de her hangi bir değişme olmadı. Yardımcı olurmusunuz?
YanıtlaSilSitenizde 2 tane devamını oku eklentisi javascripti üstüste eklenmiş. Ya temanızın kendi içinde varmış yada başka bi siteden alıp eklemişsiniz. Çakışma oluyo olabilir. yanlış bir </script> kapanış etiketi var. Google-analytics javascript kodunuzdan sonraki </head> 'e kadar olan bölümü kontrol edin. Tekrar deneyin.
YanıtlaSilbunun sadece devamını oku olanı var mı? yani resimlerle hiç ilgisi olmasın sadece belli karakter sayısından sonra 'devamını oku' yazısı çıksın. böyle bir şey var mı? yapılabilir mi? cevaplarsanız sevinirim..
YanıtlaSilEklentiyi resimsiz kullanmak istiyosanız; 5. Adımdaki kodların arasından aşağıda belirttiğim bölümleri siliniz.
YanıtlaSilimg_thumb_height = 150;
img_thumb_width = 200;
ve
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>';
Allah sizden razı olsun !
YanıtlaSilYalnız "Read More" yazısını nasıl özelleştirebilirim ?
Yani Devamını Oku yazısını nasıl sağa aldırabilirim ?
YanıtlaSilCan bey, Blogger kontrol paneli>şablon>HTML'yi Düzenle
YanıtlaSil]]></b:skin> Kodunu bulun ve hemen üstüne aşağıdaki style kodunu kopyalayıp yapıştırın.
.readmore{margin-bottom:15px;float:right;}
YanıtlaSilMeftun MEDE size çok teşekkür ederim. Sayenizde bloğum çok değişti :)) Her zaman paylaştığınız kodları takip edeceğim...
bendede olmuyor yanlıs bisey yaptıgımı sanmıyorum
YanıtlaSilMustafa bey konuya resim ekledim, daha iyi anlaşılması için. Lütfen konuyu tekrar inceleyip uygulayın. Eklentide problem yok. çalışacaktır. Kolay gelsin.
YanıtlaSilEklentiyi kullandım teşekkürler. Devamını Oku yazısı yerine nasıl resim ekleyebilirim acaba ?
YanıtlaSilBirsen balcı şablonunuzda <b:skin>...</b:skin> kodları arasına aşağıda verdiğim örnekteki gibi style kodları eklemelisiniz.
YanıtlaSil.readmore{margin-bottom:5px;float:right;}
.readmore a{color:#FFF;background:#646464 url(http://1.bp.blogspot.com/-Z1Ec0x2viiU/UTetZyq2Q9I/AAAAAAAAJUQ/w9cTXoBzRqI/s320/lower22.jpg) left top repeat-x;display:inline-block;font:100%/1.4em Trebuchet,Arial,Verdana,Sans-serif;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;border-bottom:3px solid #919191;padding:8px 14px;}
.readmore a:hover{color:#FFF;background:#FA7029 url(http://2.bp.blogspot.com/-k-Cl18ZNtNY/UQwllZlc3yI/AAAAAAAABgk/EeRtHnXUpLc/s000/readmore-bg.png) left -126px repeat-x;text-decoration:none;border-bottom:3px solid #FA7029;}
Eğer yapamazsanız iletişim bölümünden tam olarak nasıl bişey istediğinizi Daha ayrıntılı bir şekilde bana yazın (websiteniz, hangi resim vs.). Hazırlayıp gönderirim. Kolay gelsin.
yardımlarınız için çok teşekkürler Meftun Mede , başarılarınızın devamını diliyorum .
YanıtlaSilpaylaştığım yazıda resim olmadığı zaman otomatik bir resim göstermesi için ne yapabilirim?
YanıtlaSilUmut bey, Konuyu editledim. 5. Adımdaki kodlarınızı yenileyin. Sorduğunuz bölümü kodlara ekledim. Kolay gelsin.
SilDevamını oku linki geldi ama yazının tamamını ana sayfada gösterdikten sonra link var.Yani 200 ya da 450 karakterden sonra metni kesmedi.Kullandığım tema simple (Basit)
YanıtlaSilButonu nasıl sağ tarafa alabilirim yani direk buton hemen konun altında sol tarafta, resme yakın duruyor. Bunu sağ tarafa nasıl alabilirim ?
YanıtlaSilşablonunuzda <b:skin>...</b:skin> kodları arasına aşağıda verdiğim style kodunu eklemelisiniz.
Sil.readmore{margin-bottom:5px;float:right;}
Hangi şablon kullanıyon
YanıtlaSilMerhaba
YanıtlaSilDeniyorum deniyorum olmuyor. Güzel bir blog düzenlemesi yapıp öyle yazmaya başlayacaktım ama daha bunu bile yapamıyorum.
Yazdığınız her şeyi yaptım ama başaramadım.
Yardımcı olabilir misiniz?
Şablonunuzu yedekleyip isteğinizi detaylı bi şekilde yazarak tema yedeğinizi burdan bana gönderin. Ben ayarlayıp geri göndereyim size. 2. Seçenek Blogger temaları bölümünden kendinize devamını oku eklentisi olan zevkinize göre güzel bi tema seçin. Bloggerın kendi orjinal temalarında çok fazla özelleştirme olmuyo malesef.
Silkardeş çok güzel anlatmışsın eywallah da bi türlü olmadı nedense neyi yanlış yaptığımıda bi türlü anlayamadım
YanıtlaSilBlogger'ın kendi şablonlarından birisini kullanıyosanız özelleştirmesi zordur. Burdan kendinize devamını oku eklentisi olan güzel bi şablon seçebilirsiniz. Yada isterseniz bana burdan Şablonunuzu yedekleyip gönderebilirsiniz. Ben çözer geri gönderirim size.
SilHocam resimsiz konularda gözükecek resim linkini girdim ama resim gözükmedi yardımcı olurmusun
YanıtlaSilKonuyu düzenledim. Tekrar deneyin. Kodlar sorunsuz çalışıyor.
Silhocam saolasın calıştı
YanıtlaSilteşekkürler sorunsuz :)
YanıtlaSilben yaptım çalıştı fakat sayfamda sadece bir post görünüyor diğerleri önceki kayıtlarda görünüyor nasıl düzeltebilirim :'(
YanıtlaSilBi yerde yanlışlık var ama dışarıdan göremiyorum. Devamını oku eklentisiyle alakalı değil ama. Şablonunuzu yedekleyip bana burdan gönderin. Ben ayarlayıp geri göndereyim size. Yanlışlık varsa düzeltirim.
SilAna sayfada daha fazla konu göstermek için Blogger kontrol panelinizden › Ayarlar › Yayınlar ve yorumlar sekmesinde En fazla şu kadar göster: bölümüne istediğiniz sayısal değeri girerek ayarlayabilirsiniz.
YanıtlaSilyapamayan arkadaşlar 3.sünü silip verilen kodu yapıştırın
YanıtlaSilöncelikle teşekkürler.yararlı bir paylaşım olmuş.Ben yaptım ama etiketler uzun uzun gözükuyor ve hıc hoş bir görüntü olmuyor.o etiketleri o böleden nasıl gizleyebilirim?.sadece küçük resim özet yazı ve devamını oku yazısı olsun
YanıtlaSilMerhaba bu anlatımı yaparak devamını oku eklentisi oluşturmuştum fakat nası becerdim bilmiyorum yeniden eski haline döndürmüşüm. yeniden yapmak istiyorum ama ctrl+f yapınca bu kod bulunmuyor yok diyor.ne yapmam gerekir yardım ederseniz sevinirim.
YanıtlaSilBen tam olarak net isteğinizi anlayamadım. Devamını oku eklentisini yaptınız ama artık bu eklentiyi istemiyor, blogunuzu eski halinemi döndürmek istiyosunuz? Eğer sorun buysa; blogger kontrol panelinize gidin, Şablon sekmesinden HTML'yi Düzenle'ye tıklayarak, açılan sayfada arama yapın. Arama kutusuna "Devamını Oku" yazın ve 1. adımdaki kodları buldunuz demektir. Bunları silin ama sadece <data:post.body/> kalsın.
Sil2. adımdaki kodlarıda </head> kodunun hemen üzerinde bulacaksınız. Bunuda silerek blogunuzun ana sayfa görünümünü eski haline döndürmüş olursunuz. Eğer yapamazsanız blogger yardım sayfamdan isteğinizi ayrıntılı bi şekilde yazarak, şablonunuzu yedekleyip bana gönderin. Ben isteğinizi yapar size geri yollarım. Kolay gelsin, iyi çalışmalar.
MERHABA SAYFANIN ALTINA SIZINKI GIBI EKLENTI YAPMAK ISTIYORUM SİZİN KODLARI DENEDM AMA HATA VERDI BILGI VERIRMSNIZ..
YanıtlaSilÇok yaralı bir site yapmışsınız emeğinize sağlık. Ayrıca maillerime verdiğiniz hızlı cevaplar içinde çok teşekkür ederim.
YanıtlaSilYararlı paylaşım teşekkürler.Kullanacağım.
YanıtlaSilben de yaptım olmadı neden acaba?
YanıtlaSilYorum Gönder
Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!