5 Temmuz 2015 Pazar

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?
Selam :)

Blog Tavsiyeleri yazı dizimin üçüncü yazısı ile karşınızdayım.Bildiğiniz gibi bir blogda ilk göze çarpan şey görselliktir.Blog görselliğimizi zenginleştirmek adına yapabileceğimiz birtakım şeyler var.Bunlardan biri de anasayfada yazılarımızı bir bütün olarak değil de bir devamını oku butonu yardımıyla bölerek yayınlamak.Bu hem okuyucunun ilgilenmediği yazıyı okumak zorunda kalmasını engeller hem de görsel olarak daha iyi bir görüntü sunar.Peki dümdüz devamını oku yazıları yerine nasıl resimli butonlar ekleyebiliriz?Merak ediyorsanız okumaya devam edin...

.
.
.
1.ADIM

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

İlk olarak herzaman ki gibi Photoscape programımızı açıyoruz.Ana ekranda gösterdiğim "Sayfa" butonuna tıklayarak yeni bir çalışma sayfası açıyoruz.

2.ADIM

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Karşımıza gelen ekranda ok ile gösterdiğim "Boyut" butonuna tıklayarak istediğimiz sayfa boyutu ölçülerini giriyoruz.

3.ADIM

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Örneğin ben 350*80 ölçülerini girdim.Benim blog sayfam için ideal bir boyut.Fakat siz kendi sayfa boyutlarınıza göre istediğiniz ölçüleri girebilirsiniz.

4.ADIM

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Ölçüleri girdikten sonra "Düzenle" butonuna tıklayarak sayfamızı düzenlemeye başlıyoruz.

5.ADIM

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Açılan sayfada göstermiş olduğum kısımda öncelikle "Nesne" bölümüne girip ardından "T" simgesine tıklayarak metin düzenleme ekranını açıyoruz.Burada yazımızı dilediğimiz font,renk ve büyüklükte ayarladıktan sonra "TAMAM" diyerek yazımızı sayfada istediğimiz konuma yerleştiriyoruz.

6.ADIM

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Daha sonra yine "Nesne" bölümündeki manzara resimli butona tıklayarak resimlerimizin bulunduğu klasörü açıyoruz.Buradan butonumuza eklemek istediğimiz resimleri seçtikten sonra yine "" diyerek resimlerimizi sayfa üzerinde istediğimiz yere yerleştiriyoruz.

7.ADIM

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Örneğin ben bu şekilde bir buton tasarladım.Butonumuzu hazırladıktan sonra sağ alt kısımdaki "Kaydet" butonuna tıklayarak yaptığımız çalışmayı kaydediyoruz.

8.ADIM

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Şimdi bize hazırladığımız bu resmin url adresi lazım.Fakat bilgisayarda kaydettiğimiz herhangi bir resmin url adresi olmadığından önce bu resmi internete yükleyip ardından url adresini alıyoruz.Bunun için önce hizliresim.com adresine girip göstermiş olduğum "Dosyaları Seç" butonuna tıklayarak kaydettiğimiz resmi seçiyoruz.Ardından "YÜKLE" butonuna tıklayarak resmimizi internet ortamına yüklüyoruz.

9.ADIM

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?
Resmimizi yükledikten sonra karşımıza gelen bu ekranda ok ile gösterdiğim kısmı kopyalıyoruz.

10.ADIM

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?
Ardından blog kontrol panelimize giriyoruz.Buradan "Şablon" butonuna tıklıyoruz.

11.ADIM

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Karşımıza gelen ekranda ok ile gösterdiğim "HTML'yi Düzenle" butonuna tıklayarak kodların yer aldığı bölümü açıyoruz.

12.ADIM

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Bu ekranda önce kodların yanındaki herhangi bir boş alana tıklıyoruz.Ardından Ctrl+F yaparak ok ile gösterdiğim kısımdaki kutucuğa <data:post.jumpText/> yazarak aratıyoruz.Karşımıza gelen kod yerine <img src='Buton Resminin Linki'/> kodunu yapıştırıyoruz. 'Buton Resminin Linki' yazan yere az önce kopyalamış 
olduğumuz resmin url adresini yapıştırıyoruz.Ardından "Şablonu Kaydet" diyoruz ve
 butonumuz hazır!


Ben de sizler için hazırlamış olduğum birkaç örnek butonu paylaşıyorum.Anlattığım şekilde hepsini kullanabilirsiniz.

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Blog Tavsiyeleri: Resimli Devamını Oku Butonu Nasıl Yapılır?

Google'da arama yaparak farklı butonlar da bulabilirsiniz ancak ben size kendiniz nasıl yapabilirsiniz bunu göstermek istedim.Çünkü bu sayede tamamen kendi tasarımlarınızı oluşturup kullanabilirsiniz.Umarım bu yazı sizler için faydalı olmuştur.Aklınıza takılan bir yer varsa yorumlar kısmından bana iletebilirsiniz.Bir sonraki yazıda görüşmek üzere...

Sevgiler




26 yorum:

  1. Teşekkürler ama ben çoğu kez denedim resim çıkmıyor ve devamını oku yazısıda çıkmıyor bikaç kez denedim yine olmadı ne yapmalıyıımmm?

    YanıtlaSil
    Yanıtlar
    1. Tüm adımları doğru yaptığınız takdirde sorunsuz çalışacaktır diye düşünüyorum ben bir problem yaşamadım :)

      Sil
  2. Ellerine sağlık canım, çoğu ihtiyacı olan kişiye yardımcı güzel bir bilgi.. :)

    YanıtlaSil
    Yanıtlar
    1. Teşekkür ederım umarım faydalı olur :)

      Sil
  3. Merhabaa :) Seni bu gönderimde mim'ledi ^-^ http://sizleriizliyorum.blogspot.com.tr/2015/07/ben-7-yl-sonra-mim-1.html Girip bakarsan seviniriim :))

    YanıtlaSil
  4. Merhabalar çok güzel anlatmışsınız, benim gibi yeni bir bloggera faydalı olacak, teşekkürler :)

    YanıtlaSil
    Yanıtlar
    1. Faydalı olmasına sevindim ben teşekkür ederim :)

      Sil
  5. Blog dünyasına yeni katıldım arkadaşlıklar kurmaya geldim bloguma beklerim :) cileklireccel.blogspot.com

    YanıtlaSil
    Yanıtlar
    1. Hoşgeldiniz :) Takibe aldım sizi :)

      Sil
  6. paylaşım için çok teşekkür ederim ama benim html de kodu bulmuyor. Sorunun neden kaynaklandığını biliyormusunuz ?

    YanıtlaSil
    Yanıtlar
    1. Merhaba,
      Ctrl+F yaptıktan sonra açılan kutucuğa bir de data:post.hasJumpLink yazarak aratmayı deneyebilirsiniz.Bu kodu bulduktan sonra altındaki 2. satırda 'data:post.title' kodundan sonra son adımda anlattığım gibi resmin kodunu yapıştırırsanız sorun kalmayacaktır :)

      Sil
  7. Faydalı bir paylaşım olmuş, belki yaparım.

    YanıtlaSil
  8. Yanıtlar
    1. Ctrl+F yaptıktan sonra açılan kutucuğa bir de data:post.hasJumpLink yazarak aratmayı deneyebilirsiniz.Bu kodu bulduktan sonra altındaki 2. satırda 'data:post.title' kodundan sonra son adımda anlattığım gibi resmin kodunu yapıştırırsanız sorun kalmayacaktır :)

      Sil
  9. emeğine sağlık tatlım çok güzel bir yazı olmuş ;) iade-i ziyaret :D

    YanıtlaSil
  10. Çok faydalı bir yazı olmuş ellerine saglikk^^

    YanıtlaSil
  11. Çok faydalı olmuş teşekkürler. Blogunu takibe aldım bende beklerim sevgiler :) http://betulunsirlari.blogspot.com.tr/

    YanıtlaSil
    Yanıtlar
    1. Merhaba hoşgeldiniz :) Takibe aldım bile :)

      Sil
  12. merhaba ilk yazdığınız kodu da 'data:post.hasJumpLink' kodunu da denememe rağmen kodu bulamadım yardımcı olursanız sevinirim :)

    YanıtlaSil
  13. çok teşekkürler .
    bayanların anlatması daha bir anlaşılır oluyor :) başka sitelerde anlamak zor .
    cok güzel adım adım yazmışsın .
    bir sorum olacak. peki resimleri hangi siteden indiriyorsun ?
    ücretsiz resim kullanım hakkı olan siteler varmı ??


    YanıtlaSil
  14. Yazı için çok teşekkürler :) Benim yazım kayboldu da...
    Sevgiler!

    YanıtlaSil

Related Posts Plugin for WordPress, Blogger...