Bloga Resimli Devamını Oku Butonu Nasıl Eklenir?

By TUĞBA GÜNGÖR - 01:16

Merhabalar Kızlar.

Nasılsınız? Umarım iyisinizdir.Ben gribi saymazsak çok iyiyim.

Son günlerde fotoğraf makinemde sorun olduğu için düzgün resim çekip paylaşım yapamıyorum. Bu yüzden kendimi size karşı inanın mahcup hissediyorum. Ben de resim paylaşamıyorum diye başka bir şekilde değerlendirmek istedim. Geçtiğimiz aylarda şurada ki yazım siz okuyucularımın çok dikkatini çekmişti. O paylaşımımdan sonra bana blogumda ki devamını oku butonum hakkında bir çok mail geldi. Sizlere bugünkü yazımda devamını oku (read more) butonu eklemeyi göstermeye çalışacağım. Yazının sonunda sizlere kendi yaptığım butonları paylaşacağım. İsteyeniniz kullanabilir iznim vardır. :) Haydi başlayalım mı ?

Öncelikle devamını oku butonunu bence her blog yazarı eklemeli diye düşünüyorum. Devamını oku butonu olmayan herhangi bir site açılırken çok ağır bir şekilde açılır. Eğer devamını oku butonu eklenirse hem sayfada ki görüntü kirliliği azalır,hem sayfanızın hızı yükselir. En önemlisi blogunuz derli toplu bir görüntü elde etmiş olur.

1. ADIM BUTON OLUŞTURMA

Öncelikle bu işlem için PhotoScape isimli fotoğraf düzenleme programını kullanacağız. Bu arada bu program çok kullanışlı eğer hala kullanmayanınız varsa indirin çok işinize yarayacak. Ben blogumla ilgili görselleri hep bu programda hazırlıyorum. İndirmek için buradan ulaşabilirsiniz.

Öncelikle programımızı açıyoruz.

Program açılınca yukarıda ki SAYFA isimli kutucuğa tıklıyoruz.

Açılan pencere köşede kolajlar çıkacaktır. Oradan herhangi birisine tıklayıp düzenleye basıyoruz.

Karşımıza yukarıdaki gibi bir sayfa açılacak.

Açılan sayfada sol en alt tarafta YENİDEN BOYUTLANDIR bulunuyor. Oraya tıklıyoruz.

Karşımıza açılan pencereden boyutlandırma yapacağız. yapmadan önce altta ki tik işaretini kaldırın. Eğer tik işaretini kaldırmazsanız uzunluk ya da yüksekliğe ne yazarsanız yazın program onu kendi ayarlayacaktır. Bu yüzden önce tik işaretini kaldırıyoruz.

Tik işaretini kaldırdıktan sonra uzunluğa 700- 828 arası yüksekliğe 95-130 arası sayı giriniz ardından tamam tuşuna basnız. Bastığınız zaman yukarıda ki ince uzun bir sayfa oluşacaktır. Sayfamız hazır. Şimdi onu süslemeye geçelim.

En alt sol kısımda NESNE yazan yere tıklıyoruz.Tıkladığımız bölümde biz sadece Yukarıda işaretlediğim RESİM EKLEME ve YAZI EKLEME yazan yerleri kullanacağız.

Yazık ekleme bölümüne giriyoruz.Girdiğimiz zaman yukarıda ki gibi pencere açılacak.

Daha detaylı anlatmak için numaralandırdım.

1.) Bu alana yazımızı yazıyoruz. DEVAMINI OKU, READ MORE vb. burası yaratıcılığınıza kalmış farklı cümlelerde kullanabilirsiniz.

2.) Buradan kendinize uygun yazı stili seçebilirsiniz. Ben internetten çok fazla yazı stili indirdim. Ama siz indirmeden de programdakileride kullanabilirsiniz.Çok güzel yazı stilleri var.

3.) Yazımızın boyutunu buradan ayarlıyoruz.

4.) Yazımızı bu kısımdan renklendiriyoruz.

5.) Şeffaflık; . Ben bazen çok keskin renkli yazılar kullanmamak için kullanıyorum bu kısmı ama size kalmış dilerseniz kullanmayabilirsiniz.

6.) Dış Çizgi. Burasıda sizin zevkinize kalmış. Yazınızı iki renkli ya da daha kalın kullanmak isterseniz işinize yarar. Ben genellikle bazı yazı stilleri çok ince olduğu için ya da yazımda iki renk kullanmak istediğim için kullanıyorum bu kısmı. Mesela 4 numaradan siyah seçtik ve dış çizgiden de kırmızı seçtik. Böyle yaptığımız zaman bize içi siyah dış kısmı kırmızı renkli bir yazı veriyor. Eğer iki bölümde de aynı renkleri seçersek bu sefer yazımızı kalınlaştıracaktır. Alt kısımda kalınlıktan dilediğiniz kadar kalınlaştırıp, dilediğiniz kadar inceltebilirsiniz. Ne kadar çok konuştum yahu. :) Neyse Devamını Oku yazımızı yazdık. Tamam diyoruz.

Ben yazımı bu şekilde yazdım. Sıra geldi ufak resimlerle butonumuzu şenlendirmeye.

Resim ekleme kısmına tıklıyoruz. Eklemek istediğimiz görseli seçip aç diyoruz.

Görseli ekliyoruz. Üzerine çift tıklayarak görsel üzerinde düzenlemeler yapabiliriz. Mesela ben görselin rengi yazıyla uyumlu olsun diye şeffaflık kısmından resmi hafif soluklaştırdım. Ayarlamanızı yaptıktan sonra tamam diyip hiç bir şeye dokunmadan altta ki yazımı okuyun.

Devam etmeden önce ufak resimleri nereden bulduğumdan bahsedeyim. Bundan önce ki blog düzenleme yazımı okuyanınız bilir. Aşık olduğum DeviantArt diye bir site var. Blog yazanlar ya da sitesi olanlar mutlaka göz atsın çok güzel görseller var. Ben her zaman bu siteyi kullanıyorum. Siteye buradan ulaşabilirsiniz. Buradan beğendiğiniz resimleri bilgisayarınıza indirin. Ben kendimi kaybediyorum bu sitede muhteşem şeyler var. İçeriklerin çoğu ingilizce olduğu için arama kısmına aradığınız tarzda ki şeyi ingilizce aratırsanız daha fazla sonuçlar alırsınız.

Ben bu işlemler için uygun görselleri aratırken sonuna yazılar ekliyorum.

Örneğin :

cupcake vector

frame png

heart vector

stuff png

Aradığımı bu şekilde daha iyi bulabiliyorum.Sonlarına stuff,png,pngs,vector ekleri eklenince benim gibi bloggerlar için blogta kullanılabilecek görseller çıkacaktır.

Yukarıda arama kısmına stuff png yazıp arattıım karşıma farklı farklı görseller çıktı. Buradan sol altta görünen kalpler hoşuma gitti. (sizler zevkinize göre beğendiğinizi indirebilirsiniz)

Kalplerin üzerine tıkladığımda beni yönlendirdiği sayfadan sağ tarafta işaretli downloand yazan yere tıklayıp bilgisayarıma indirdim.

Çoğunlukla dosyalar zip. şeklinde iniyor. Dosyaları belirlediğimiz bir klasöre çıkarıyoruz. Ve kullanıma hazır. PhotoScape ye gelip kaldığımız yerden devam edebiliriz.

Hoşunuza gidecek şekilde butonunuzu oluşturduktan sonra farklı kaydete tıklayıp oluşturduğumuz butonu kaydedip programı kapatıyoruz.

2.Aşama Butonu Bloga(Şablona) Ekleme

Sıra geldi butonumuzu blogumuza eklemeye.

İlk önce oluşturduğumuz resmi uploand etmemiz gerekiyor. Ben hizliresim.com adresini kullandım bu işlem için. Bilgisayardan yükle kısmına geliyoruz. Dosyaları Seç kısmına tıklayıp oluşturduğumuz butonu yükle diyoruz.

Karşımıza açılan sayfada en altta DOĞRUDAN ERİŞİM yazan yerdeki linki kopyalayın bir yere kaydedin sakın kaybetmeyin. Bu size daha sonra ki aşamada lazım olacak.

Daha sonra Blogger sayfamıza giriyoruz ve sol altta bulunan ŞABLON kısmına tıklıyoruz.Tıkladıktan sonra karşımıza çıkan sayfadan HTML'yi DÜZENLE ye tıklıyoruz.

HTML'yi düzenleye girdikten sonra

CTRL+F tıklayarak <data:post.jumpText/> kodu aratın.

Bu kodu silip yerine

<img src='BUTONUNLİNKİ'/> Yukarıda aldığımız doğrudan erişim linkini butonlinki yazdığım yere kopyalayın.

Daha sonra Şablonu Kaydete basıp Şablondan çıkıyoruz.

3.Aşama Butonu Yazıda Kullanma

Artık Devamını Oku butonumuz kullanılmaya hazır. Nasıl kullanacağımıza geçelim isterseniz.

Blogumuza yazımızı yazıyoruz diyelim. Yazımızı yazdık yayınla demeden önce yazımızı nerede bölmek istediğimize karar verdikten sonra imleci oraya getiriyoruz ve yukarıda ki kırmızı daire içine aldığım (atlama aralığı ) yere tıklıyoruz.

Tıkladıktan sonra yukarıda ki resimde gösterdiğim çizgi çıkacak. Bu çizginin üst kısmında bulunan yazılar anasayfanızda görünecek olan yazılardır. Tavsiye verecek olursam eğer; Yazınızın içeriği hakkında tam detay vereceğiniz bir kısımda atlama aralığı ekleyin. Böylelikle okurlarınız devamını merak edip butona tıklayıp geri kalanı okumak isteyeceklerdir.

* Her yazı yayınlayacağınız zaman mutlaka ama atlama aralığına tıklamayı unutmayın.

Bu işlemlerden sonra size sadece yazı yayınlamadan önce yukarıdaki minik butona tıklayıp yayınlamak kalacak.

Yayınla dedikten sonra Devamını Oku butonumuz eklenmiş olacaktır.

İşte arkadaşlar kendi hazırladığımız butonumuzu yapmış olduk. Aslında oldukça basit bir işlem sadece fazla detaylı anlattığım için zormuş gibi gelebilir.

Umarım yazımı verimli bulursunuz.

Son olarak başta söz verdiğim gibi sizler için hazırladığım Devamını Oku butonlarını aşağıda paylaşacağım. İznim vardır beğendiğinizi indirip gönül rahatlığı ile kullanabilirsiniz.

Eğer merak ettiğiniz ya da sormak istediğiniz sorunuz varsa yorum kısmından bana sorabilirsiniz.