Blogger'da Devamını Oku Yazısını Resimli Yapma


Blog tasarımıyla ve eklentilerle ilgili özellikle yeni başlayan bloggerlardan bir sürü mail alıyorum, elimden geldiğince tüm maillere yardımcı olmaya çalışıyorum ancak sık sorulan soruları artık herkesin okuyabilmesi için blogdan anlatmaya karar verdim. Blogger kullanan takipçilerimin bana en çok sorduğu sorulardan biri, devamını oku yazısı nasıl çıkıyor, onun yerine nasıl resim eklerim. Aslında ikisi de çok basit şeyler, bilmeyenler için ayrıntılı nasıl yapıldığını anlatacağım ve blogunuzda kullanabileceğiniz yaptığım birkaç devamını oku resmini paylaşacağım.


Öncelikle devamını oku yazısı daha derli toplu bir anasayfa için gerekli, insanlar anasayfanızda özellikle bol görselli yazılarınızı görmek istemeyebilir, ilgilenenler zaten devamını oku'ya tıklayıp yazıyı okuyacakır. Ayrıca sitenizi yavaşlatmaması açısından da devamını oku yazısı gerekli, bol görselli birden çok yazı sitenizin açılma hızını düşürecektir. Bu sebeplerden dolayı tüm blog yazarlarının kullanması gereken bir eklenti. Genel olarak anasayfanızda yazının konu hakkında bilgi içeren kısmı olmalı sonra da devamını oku yani gerçek adıyla atlama aralığı eklenmeli. Onu da şu şekilde yapıyoruz:


Blogunuzda yazı yazdığınız panelde bu şekilde bir simge var. Yazınızı bölmek istediğiniz yere gelip buna tıklayabilirsiniz veya görünmesini istediğiniz kısmı yazıp bu simgeye tıkladıktan sonra kalan kısmını yazabilirsiniz, bu işlem bu kadar basit.

Bu şekilde yaptığınızda devamını oku yazı şeklinde gözükecektir. Ben yazı değil de resim şeklinde gözüksün istiyorum diyorsanız da:

  • Blog kontrol panelinize girin.
  • Şablon kısmından HTML'yi düzenle'ye basın.
  • Ctrl+F ile <data:post.jumpText/> kodunu aratın.
  • Bu kod yerine <img src='Buton Resminin Linki'/> kodunu yapıştırın. Buton resminin linki yazan yere de koymak istediğiniz görselin linkini ekleyin. 

Bu yolları izleyerek devamını oku yazısı yerine istediğiniz resmi ekleyebilirsiniz. Benim hazırladığım birkaç devamını oku resmini sizlerle paylaşıyorum, sağ tıklayıp resim url'sini kopyala derseniz ve anlattığım şekilde koda yapıştırırsanız sorunsuzca eklenecektir. Anlamadığınız kısımları yorum bırakarak sorabilirsiniz, kolay gelsin :)






90 yorum

  1. ooo çok güzel bir paylaşım olurr balköpüğü :)
    bu arada tekrar tebriklerr.
    paylaşımları bekliyoruzzz :)

    sevgiler,
    kibele keyfi

    YanıtlaSil
    Yanıtlar
    1. Çok teşekkür ederim canıım elimden geldiğince yazacağım :)
      Çok sevgiler

      Sil
    2. ctrl+f ile arattığımda çıkmadı :(

      Sil
    3. canım o zaman widget şablonlarını genişlet seçeneğine tıkla o şekilde arat, normalde o aşaması da var ama bloggerın kod paneli değişmiş artık çıkmıyordu belki sende eski hali vardır hala.

      Sil
  2. pekiiiii :) son zamanların popüler konusu olan blogvinden takip edilme işi nasıl ayarlanacak ve de bu gadget nasıl eklenecek bununla ilgili de bilgi verirseniz ben havalara uçarım mutluluktan :)

    YanıtlaSil
    Yanıtlar
    1. Canım bloglovin'e kayıt olduktan sonra anasayfada sağ üst kısımdaki kategorinden Bloglovin Button'a tıklıyorsun, istediğini seçip get this icon diyorsun ve blogunu seçiyorsun. Sana bir kod verecek o kodu da blogunda yerleşim kısmına gelip sağ kısma gadget ekle diyeceksin HTML/JavaScript'i seçip kodu yapıştıracaksın, hepsi bu :)

      Sil
    2. ay sen harikasın yaaaaa :)

      Sil
  3. Bloglovin'e geçişte bizi izleyenler de otomatik geçecek mi? Burada 82, bloglovin de 25 takipçim var :(

    YanıtlaSil
    Yanıtlar
    1. Maalesef otomatik olarak geçmiyor, simgeyi bloguna ekleyip insanlara takip ettirmen gerekli :)

      Sil
    2. çok saçma! :( ilgin için teşekkürler.

      Sil
  4. aa ben bunu bilmiyordum çok güzel bir paylaşım olmuş canım ellerine sağlık :D hemen yaptım! :)

    YanıtlaSil
  5. Çok teşekkür ederim hemen denedim :)

    YanıtlaSil
  6. paylaşımın için çok teşekkürler ama ben yapamadım :(
    html düzenle bölümünde kısım yok..
    ne yapabilirim??

    YanıtlaSil
    Yanıtlar
    1. Rica ederim canım, nasıl yani html'yi düzenleye tıklayıp ctrl+f ye basacaksın arama kutucuğu çıkacak, kodu orada aratacaksın

      Sil
    2. ctrl+f ye basıyorum kopyalayıp enter a basıyorum ama hiçbir yerde görünmüyor..

      Sil
  7. aynen benimde öyle genişlet kısmınıda göremedim :(

    YanıtlaSil
    Yanıtlar
    1. Aynen benimde oyle iki secenekte yok :(

      Sil
    2. bende aynı sorunla karşılaştım yaaa ne genişlet kısımı var nede ctrl+f de arattıgımda çıkıyor .hep diyorki eşleşen bulunamadı :(

      Sil
  8. şahane olmuş :) teşekkürler hemen uyguladım :)

    YanıtlaSil
  9. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  10. hemen yaptım yine çok faydalı oldu :)

    YanıtlaSil
  11. Ben ne zamandır bunu nasıl yapıcağımı arıyodum yaa gerçekten çok teşekkürler :)

    YanıtlaSil
  12. Paylaşımın için teşekkürler, ben daha önce eklemiştim. Şimdi senin hazırladıklarından birini eklemek istiyorum,daha sevimli ama resme link verebilmek için, resmi nereye koymam gerektiğini bilmiyorum.

    YanıtlaSil
  13. paylaşımmm için teşekkürlerr :)yaptım çok güzel oldu

    YanıtlaSil
  14. Cok guzel bir paylasim olmus gercekten , ayrica blogunuzada bayildimmmmm :)

    YanıtlaSil
  15. Ben de senin hazırladıklarından birini koyup blogumun görüntüsünü de ona uyarlayınca göze güzel görünür gibi oldu.Sayende biraz hazıra konduk galiba.Çok teşekkürler. (:

    YanıtlaSil
  16. ben de bunu arıyordum, teşekkürler :)


    smrdmr.blogspot.com

    YanıtlaSil
  17. Tam aradığım şeydi,teşekkürler :)

    YanıtlaSil
  18. ben yeni blog sahibiyim devamı yazısını değiştirmek değil sadece boyutunu büyütmek istiyorum nasıl yapabilirim ayrıca blogumu ziyaret ederseniz çok sevinirim

    http://kavininkahvesi.blogspot.com/

    YanıtlaSil
  19. Çok güzel bir yazı olmuş ama bloguma ben de uygulayamadım :(

    http://berryandcherryinferry.blogspot.com/

    YanıtlaSil
  20. Çok kolaymış bu yöntem. Başka bir yerde bir sürü evresi vardı. Çok teşekkürler (:

    YanıtlaSil
  21. aramada çıkmıyor ne yapmam lazım

    YanıtlaSil
  22. Çok teşekkürler :) gerçekten çok faydalı bir paylaşım olmuş. ilgiyle takip ediyorum blogunu :) Sevgiler.. :)
    http://whiteglaze.blogspot.com

    YanıtlaSil
  23. canım ben ctrl+f yapıp bu kodu bulamadım :/

    YanıtlaSil
  24. nasıl işime yaradı anlatamam:) süpeeer, çoook teşekkürler:)

    YanıtlaSil
  25. çok teşekkür ederim çok yararlı konular var. Bunu da ne zamandır arıyodum zaten :)

    YanıtlaSil
  26. ben de hemen uyguladım teşekkürler yalnız sayfanın ortasına getiremedim bi türlü, htmlde center kodunu kullandım ama olmadı, neyse öyle kalsın artık napiyim :))

    YanıtlaSil
  27. dünden beri bunu yapmak için uğraşıyordum ınternette araştırdıklarımı uyguladğımda sonuç alamamıştım sonunda sizin anlatımınızla yapabildim. Gerçekten çok çok teşekkür ederim.

    YanıtlaSil
  28. Harika bir paylaşım, gayet anlaşılır olmuş, çok çok teşekkür ederim, denedim ve çok beğendim..

    YanıtlaSil
  29. benim sitem www.zeynep-camci.blogspot.com , ben temayı düzetlmek istiyorum ve bir konunun tüm herşeyi açıkca gözüküyor..ben bunu otomatik olarak kısaltmak istiyorum .. tüm konuları açarkene böyle uğraşmak yerine ototmatik nasıl yapabiliriz ?

    YanıtlaSil
  30. Merhaba. Google'da ararken burda buldum kendimi =) Çok teşekkür ederim gerçekten çok kolay ve yararlı bir paylaşım olmuş. Ama ben bu resmin solda değil de, ortada olmasını istesem nasıl bir kod kullanmam gerekiyor? Yardımcı olursan çok sevinirim. Teşekkürler =)

    YanıtlaSil
  31. Bunu nasıl sağa yaslayabiliriz? <p align yaptım resme ama alttaki gri çubuğun üzerine geldir YARDIM

    YanıtlaSil
  32. valla çok sağol canım ama yapamadım bir türlü :(

    YanıtlaSil
  33. O kadar güzel açıklayarak anlatmışsın ki hiç bir problem yaşamadan yaptım. Teşekkür ederim.

    YanıtlaSil
  34. Google araştırmalarım sonucunda sana geldiiim :) hemen uyguladım. Ayrıca düşündüğümden çok daha kolaymış :) Bu tarz paylaşımlarda bulunursan çok sevinirim. Çoook teşekkürler :)

    YanıtlaSil
  35. Hayırlı birşey olmuş ama aradığım değil ;)

    YanıtlaSil
  36. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  37. Teşekkür ederim faydalı bi yazı olmuş..
    http://altunelmc.blogspot.com.tr/

    YanıtlaSil
  38. hocammm herşey çok güzelde o devamını oku resmini nasıl ortalıycaz ? sol tarafta gözüküyor seninki gibi ortalamak istiyorumda

    YanıtlaSil
  39. Emeğiniz için teşekkürler çok aydınlatıcı bir yazı olmuş.
    Ben de hemen birini kullandım izninizle :)
    ojembordo.blogspot.com.tr

    YanıtlaSil
  40. Yazı için çok teşekkürler.Blogumda Devamını oku resimlerinizi paylaştım.Bilginiz olsun :))) Alıntı yaptığımı da belirttim tabiki :) Umarım kızmazsınız :))
    http://beyazbegonvil.blogspot.com.tr/

    YanıtlaSil
  41. Çok teşekkürler, harika bir yazı. ^w^

    YanıtlaSil
  42. Kesinlikle çok güzel bir paylaşım olmuş.. Blogumada cukk oturdu.Çok teşekkürler..

    YanıtlaSil
  43. Bişey sormak istiyorum peki bunu nasıl ortalayabiliriz.?
    http://turuncuhane.blogspot.com.tr/ bir bakarmısınız ..

    YanıtlaSil
  44. ben epey uzun zamandan beri bunu yapmayı araştırıyordum canım. bugün yazını okudum ancak kodunu aratınca hiçbir şey çıkmadı. Lütfen yardımcı olabilir misin bana? Teşekkürler... ☺

    YanıtlaSil
  45. ellerinize, emeğinize sağlık =) ingilizce kaynak daha çoktur diye düşünüp sabahtan beri ingilizce olarak arıyordum, meğer siz çoktan anlatmışsınız =) butonumu hazırlayayım hemen deneyeceğim blogumda =)

    YanıtlaSil
    Yanıtlar
    1. Blogumun tasarımına uygun olarak kendi butonumu oluşturdum ama onun için nasıl link oluşturabilirim? Yardımcı olabilirseniz çok sevinirim. Teşekkürler.

      Sil
    2. Yaptım yaptımm =) tinypic.com'a yükleyince oluyormuş =) Şimdilik sadece nasıl ortalayabileceğimi öğrenmem gerekiyor o kadar =) görmek isterseniz blog adresim http://nailartinwonderland.blogspot.com.tr/

      Sil
  46. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  47. Paylaşımınız için çok teşekkürler işime çok yaradı. :)
    peki devamını oku'yu ortalamak için ne yapmalıyız ?

    YanıtlaSil
  48. uzun zamandır bunu arıyordum ama bloguma uygulayamadım :( aratınca o ko çıkmadıı. Acaba hazır şablon kullandığım için olabilir mi? Btemplates'ten hazır bir şablon kullanıyorum onda olabilir mii sorun ?

    YanıtlaSil
  49. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  50. Paylaşım için çok teşekkürler. Blog yazmaya yeni başladım ve bu yazı çok faydalı oldu. Sitenin tasarımına bayıldım bu arada. Başarılarının devamını dilerim.

    YanıtlaSil
  51. merhaba ben paylaştıklarından birini eklemek istedim lakin bir terslik oldu şuan şablonda ne senin kodu bulabiliyorum nede yeniden ekleyebiliyorum ne yapabilirim :( Yardımcı olursan çook sevinirim..

    YanıtlaSil
  52. Merhaba Merve ben aradım ama bulamadım ne yapmam gerek benim blogumda mı bir sorun var acaba??:/

    YanıtlaSil
  53. Birde şu yukarı çık butonu nasıl yapılıyor onu da anlatırsan çok mutlu olurum teşekkürler..

    YanıtlaSil
  54. güzel bir paylaşım.. yaklaşık 2 ay bunu denedim.. ama sonrasında eklediğim resim gitti yerine ünlem işareti geldi:D sitem böyle de havalı ama yine de bu sorunu çözecek bilgin var mı?? .. siteme gelip bakabilirsin.. efsanevifilmizle.blogspot.com

    YanıtlaSil
  55. Bu konuda çok yardımcı oldun teşekkürler :)
    Başka "devamını oku" görselleri de beklediğimi belirtmek isterim :D

    YanıtlaSil
  56. Olmadı üstelik yedeğini aldığını düşündüğüm şablonumu dün silmişim şimdi öyle hatalı kaldı devamını oku kısmı ne yapacağım?

    YanıtlaSil
  57. blogda yeni olduğum için yana yana arıyodum. Bulduklarım da bi türlü olmadı. Ama bu yöntem şahaneymiş. Teşekkürler.. bu arada bende beklerim http://esyspage.blogspot.com.tr/

    YanıtlaSil
  58. blogda yeni olduğum için yana yana arıyodum. Bulduklarım da bi türlü olmadı. Ama bu yöntem şahaneymiş. Teşekkürler.. bu arada bende beklerim http://esyspage.blogspot.com.tr/

    YanıtlaSil
  59. faydalı bir yazı teşekkür ederim...

    YanıtlaSil
  60. ctrl f ile aratıyorum ama kod çıkmıyor yukarıda bir yorumda widget şablonunu genişletmesini önermişsiniz denedim yine olmadı sorun ne olabilir?

    YanıtlaSil
  61. yukarda bi çok insanın yaşadığı problem gibi bende kodu bulamadım şablonda .rica etsem problem hakkında çözüm öneriniz varsa söyleyebilir misiniz :)

    YanıtlaSil
  62. en kısa ve kolay anlatım. tebrikler.

    YanıtlaSil
  63. Sabahtan beri şunu arıyordum ya çok teşekkürler çok faydalı bir yazı olmuş ^^

    YanıtlaSil
  64. bu kadar güzel anlatılır çok teşekkürler kolayca uyguladım

    YanıtlaSil
  65. Ben hala bunu ekleyemedim ama olsun :) Acemiyim şuan ama bana destek olup takip ederseniz çok sevinirim :)

    http://narcicegibeuty.blogspot.com.tr/

    YanıtlaSil
  66. ben yapamıyorum her turlu yolu denedim olmadı ya nasıl yapılıyor yapıştırıyorum ama kabul etmiyor :(

    YanıtlaSil
  67. Teşekkür ederim.Çok güzel durdu.

    YanıtlaSil

♥ Güzel yorumlarınız için çok teşekkürler ^_^ ♥