Blogger Resimli Kategori Oluşturma

İletişim formu veya sosyal medya aracılığıyla sık sorulan soruların cevaplarını blogda vermeye devam ediyorum, edeceğim de.Bu şekilde hem konu sıkıntısı çekmiyorum, hem de insanların ortak problemlerini çözüyorum.

 

En çok sorulan şeyler den biri de bblogun sidebarına resimlerden kategori bölümü yapmak.Temel HTML bilgisi ile kolayca yapılabilecek bir işlem olduğunu bildiğim için bugüne kadar blogda yazmamıştım ama son zamanlarda aynı soru 4-5 kişi tarafından sorulunca detaylı bir şekilde anlatmak istedim.

 

Öncelikle daha iyi anlamanız için yapmak istediğimiz şeyin görüntüsünü paylaşayım.

 

Resimlerle Kategori Oluşturma

 

Şimdi sıfırdan bu çalışmayı nasıl yapacağımızı anlatacağım.Öncelikle ihtiyacımız olan şey her kategoriye birer ait resim.Google görsel arama veya başka kaynaklardan faydalanarak her kategoriye ait bir resim bilgisayarınıza kaydedin.Örneğin ben blog makaleleri kategorisinde kullanmak için şu resmi buldum.

 

Makale

 

İkinci adımda bu resmi sidebarda kullanmak için yeniden boyutlandıracağız ve zerine katogurinin ismini yazacağız.Ben bu işlem için Gimp programını kullanıyorum ama bu örnekte herkesin yapabilmesi için PicMonkey isimli online aracı kullanacağım.

 

http://www.picmonkey.com/ sitesine gidip Edit a photo butonuna basın ve katgeori olarak kullanacağınız resmi açın ve düzenlemeye başlayın.Yapacağımız işlemler:

  • Resize seçeneği ile resmi yeniden boyutlandrın (125x125).
  • Effects seçeneği ile resme istediğiniz bir efekti uygulayın (Soften).
  • Text seçeneği ile resmin üzerine kategori adını yazın (Blog Makaleleri).
  • Rounded Corners seçeneği ile resmin kenarlarını oval yapın ve resmi kaydedin.

Ortaya çıkan sonuç şu:

 

Blog makaleleri

 

Diğer kategorileriniz için de aynı şekilde resimleri düzenleyip tümm grafiklerinizi oluşturduktan sonra sıra bunlara alt alta sıralayıp kategorilere bağlantı vermeye geliyor.Bunun için temel HTML kodları işimizi görecek.

 

Örnek olsun diye Blog temelleri ve Blog araçları kategorileri için de grafiklerimi aynı yöntemle oluşturdum.

 

                               blog araçları     blog temelleri

 

Önce oluşturduğum bu resimleri bir yere upload etmem gerekiyor.Bunun için de Google hesabımızla kullanabildiğimiz Picasa Web Albümlerini tercih ediyorum.Oluşturduğunuz bu resimleri Picasa Web albümlerine yükledikten sonra Blogger kumanda paneline gidip HTML/JavaScript olarak aşağıdaki kodları ekleyin:

 

<p><a href="http://bloghocam.blogspot.com/search/label/Blog%20Ara%C3%A7lar%C4%B1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAi8sDeSIfVshNhZ5swM-ghTvVJQjm-h93ZPXmjxdyxxdGHFI_Nqx_qqJy2KiF2iVkQrLw_5Haau15pmNEOaMbdp-PxSbKfQRGthzaMcbQ5EqpOoi_1sdvte3ilYEdzSFQKDyEMeUaswU/s125/ba.png" /></a></p>

<p><a href="http://bloghocam.blogspot.com/search/label/Blog%20Makaleleri"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHvUNA3DlzOy38RgqZl9hyAijb9dZ6jXnrQmdW8YPjOBJCujqISuCY8EUt6zPpQlx_rc1F0Y33158BqHY1-Zn6MhMoIqIjHFV_U4rtI8ntqYadqV4XyTDu8NVW3jITUx1EzPSWJD-R3hw/s125/bm.png" /></a></p>

<p><a href="http://bloghocam.blogspot.com/search/label/Blog%20Temelleri"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpruKeTUIgLpi9L5_P3Zx0lRaXADRWliwwTcS7UpF5po02gFLGOCwvptizBk87dyTmNVeVASfQCoU-XJqgpAeeY3xDlY16z5xc_FDCjM1qOi6m7QQR-MhFuOtTgDIZCRYoCEJ4VzPM7yA/s125/bt.png" /></a></p>

 

Yeni kategoriler eklerken yardımcı olması için kodların anlamlarında biraz bahsedeyim.Her kategoriye ait kod şu şekildedir:

 

<p><a href="Kategorinin URL’si"><img src="Resmin URL’si” /></a></p>

 

Elimden geldiğince basitleştirerek anlatmaya çalıştım ama kafanıza takılan bir yer olursa yorum bölümünden yazabilirsiniz.

33 yorum:

  1. tam benim istediğim konu olmuş blog hocam, en kısa zamanda vakit bulup oturup yapacağım bu işi teşekkürler...

    YanıtlaSil
  2. Harika cok acik ve net anlatmissin! Tesekkur ederim hojam!

    YanıtlaSil
  3. Hocam ben bu resimlerin 3 erli şekilde yanyana olmalarını istiyorum. Eklemeden önce yapmam gereken bir düzenleme var mı kod üzerinde?

    YanıtlaSil
  4. Hocam ekledim ve hepsinin alt alta oldugunu gördüm. Bu resimleri yan yana dizmek için ne yapmalıyım?

    YanıtlaSil
  5. Teşekkürler hocam. Bloğumda ilerde deneyeceğim.

    YanıtlaSil
  6. Yaw arkadaş nasıl yaptın bu siteyi bloggerla alakası yok.Blogger neden wordpress gibi kolay değil hocam ? Yani blogger kullanmak için kodlama dilini bilmekmi lazım ?

    YanıtlaSil
  7. @Anıl Karadeniz
    Ben <p> kodunu kullanarak her resmi bi alt paragrafa gönderdim.Siz o kodları kaldırarak yan yana sıralayabilirsiniz.

    YanıtlaSil
  8. Teşekkürler sorun giderildi.

    YanıtlaSil
  9. merhaba serdar bey. hazırladığım resimleri picasa web albümlerime yüklediğim zaman .png şeklinde bir uzantı çıkmıyor ve blogger o yüzden resimi oraya koyamıyor. acaba başka bir yere resim yüklesem olur mu, başka bir site önerebilir misiniz picasadan başka? (https://picasaweb.google.com/105510342922200879322/18Eylul2012 bu albümün içindeki resimleri kullanmak istiyorum. resimlere tıklarsanız uzantılarını görebilirsiniz)

    YanıtlaSil
  10. @GNS
    Merhaba,
    Picasa'dan başka yerlerde var elbette ama siz doğru bir şekilde yüklemişsiniz zaten resimleri.resmin üzerine sağ tıklayıp resmin URL<2sini kopyala dediğinizde .png uzantılı adresi görürsünüz.Sizin yazdığınız albümdeki resimlerin adresleri şöyle:

    https://lh3.googleusercontent.com/-Xg2WNuGVPz8/UFhrtp5oATI/AAAAAAAAASM/c9648ruH4gY/s125/blog%2520glob.png

    https://lh4.googleusercontent.com/-nyHzJGHZlM4/UFhrt4bEZyI/AAAAAAAAASI/vTGHbbukfc8/s125/blog%2520gns.png

    https://lh5.googleusercontent.com/-8hBMBk9J_j0/UFhrto3adQI/AAAAAAAAASE/gICuKA2RBXQ/s125/blog%2520ezgi.png

    Yine de resimleri yüklemek için alternatif bir yer arıyorsanız Flickr'ı önerebilirim.

    YanıtlaSil
  11. çok çok teşekkür ederim sayenizde yaptım:)

    YanıtlaSil
  12. Çok güzel bir anlatım olmuş Serdar bey.
    Her iki şekilde denedim çok güzel bir görünüm sağladı.Biraz da hayal gücümü kullanmaya çalıştım.Resim edadı ayarı ve yatayda 6 veya 7 resim yüklendiğinde ve bunu sağdan ve soldan outo ayarlı kayar yaptığımızda herhalde daha güzel bir şekil çıkar diye düşündüm.Bu kodlarıda eklerseniz çok değişik bir bir proje oluşur herhalde.En çok hoşuma giden tarafıda;
    Kodalrı sıralama şekliniz.Birbirinden ayrık anacak dikkatb edildiğinde insanın anlamasına katgı sağlayan eğitim amaçlı bir tarz sergilemesi.Elinize sağlık.HTML ile ilgili yayınlarınızıda bekliyoruz.
    Saygı ve sevgilerimle.

    YanıtlaSil
  13. Serdar Bey
    Verdiğiniz bilgilerden çok yararlanıyorum. Öncelikle çok teşekkür ederim. Sadece kodlarla ilgili sıkıntı yaşıyorum.
    Ayrıca birşey sormak istiyorum. Bloguma fotoğrafları yüklemek için mutlaka picassa gibi bir program kullanmak zorundamıyım. Bilgisayarımdan fotoğraf alıp gadgetlerden resim ekle diyerekte kategori açıyorum. Bunun içinde programa yükleme yapmam gerekiyormu?
    Ayrıca PicMonkey'den haberim yoktu. Photoshop kullanıyordum. Teşekkür edrim. Sayenizde öğrenmiş oldum.
    Şimdiden yardımlarınız için teşekkürler

    YanıtlaSil
  14. @sevdaninsokagi
    Hayır, Picasa kullanmak zorunda değilsiniz. Sizin yazdığınız yöntemle de yapılabilir ancak bu şekilde alt alta sıralamada sorun çıkarabilir.Ben bu yöntemi kullanmanızı öneririm ama tercih sizin.

    PicMonkey sitesi bu tür ufak işler için çok pratik bir site.Ben de zaman zaman kullanıyorum.

    YanıtlaSil
  15. Tekrar Merhaba;
    Problem çıkarmaması açısından sizin anlattığınız yöntemi kullanmak isterim aslında fakat Picassa'ya fotoğrafları sadece yüklemek yetiyormu? Başka bir işlem yapmaya gerek varmı? Birde ben resim gadgetinden eklediğimde sizdeki gibi resim url'si gözüküyor fakat picassa'da url daha farklı. Anlayacağınız birşeyler kafamda oturmadı. O yüzden yapmak istemedim.

    Kolaylıklar dilerim

    YanıtlaSil
  16. evet bu çok anlaşılır anlatmıssınız .ben buna benzer bir sey sormak istiyorum sayfalar kısmı ekliyoruz ya üst kısma headerin altına onları resimli yapabilir miyiz ya da nasıl yaparız

    YanıtlaSil
  17. @başak pdr
    Aynı yöntemle onları da yapabilirsiniz. Kategorilerde link olarak http://bloghocam.blogspot.com/search/label/etiket yazıyoruz. Sayfalarda ise tek fark burayı değiştirmek. http://bloghocam.blogspot.com/p/sayfa.html şeklinde değiştiriyorsunuz.

    YanıtlaSil
  18. Çok teşekkürler, ama benim yaptığım olmadı. Yani, yaptım ama hem büyük oldu hemde katagorilerin üstünde dikildi kaldı :(

    YanıtlaSil
  19. yaptım oldu ama şöyle bir sıkıntı var yani biz şuanda tekbir konuyu o şekilde açıyoruz benim istediğim örneğin filmler resmine tıkladığımızda ona dair her şeyin açılması bunu nasıl yapabiliriz ?

    YanıtlaSil
  20. @Aslı Gizem Karaarslan
    Filmlerle ilgili tüm yazılarınıza film etiketi verip resme şu linki atayın:
    http://blogunuz.blogspot.com/search/label/film

    YanıtlaSil
  21. merhabalar.. benim sormak istediğim şey şu, ana sayfada hep kayıtlar oluyor fotoğraflarla gösteriliyor. ben bu sayfada kayıtların deil, kategorilerin yer almasını istiyorum nasıl yapabilirim acaba???

    YanıtlaSil
  22. Bayadır arıyordum ne kadar teşekkür etsem azdır :) bu arada sitenizin yakın takipçisiyim teşekkürler emeğiniz ve zamanınız için.

    YanıtlaSil
  23. yapıyorum böyle bir etikete sahip gönderi yok diyor. Fotoğraflar da gözükmüyor. Baya uğraştım ama yapamadım.

    YanıtlaSil
  24. @begum unsal
    Etiketi yazarken büyük küçük harf kullanımına dikkat etmelisiniz.

    YanıtlaSil
  25. Açıklamalarınız için teşekkür ederim. Etiketleme işini yapabildim ama bu sefer de fotoğraflar görünmüyor. png formatında resimleri kaydedip picasa web albümlerine yükledim oradan da url yi kopyaladım ama fotoğraflar olmadı maalesef ne yapmam gerekiyor?

    YanıtlaSil
  26. Resimin urlsini buraya yazarmısınız?

    YanıtlaSil
  27. https://lh3.googleusercontent.com/-fIe8CI_H_hM/UrW3eY88imI/AAAAAAAAAfs/vL3oY5SHA5I/w797-h552-no/b%25C3%25B6rek.png

    https://lh4.googleusercontent.com/-rpdjr0zfVZ0/UrW3gSuFS2I/AAAAAAAAAf0/IFP5Zb5ibCQ/w595-h552-no/et.png

    https://lh4.googleusercontent.com/-tHHfoSGp3Pg/UrW3eKRT02I/AAAAAAAAAfo/krDC0XN5RNc/w433-h552-no/kahvalt%25C4%25B1.png

    üç tanesini gönderiyorum şuan

    YanıtlaSil
  28. https://plus.google.com/u/0/photos/101401393409071590528/albums/5959871404415539633?authkey=CI6kz_7W3aaIjgE buradaki fotoğraflar

    YanıtlaSil
  29. Şöyle örnek vereyim:

    <a href="http://bloghocam.blogspot.com/search/label/etiket"><img src="https://lh4.googleusercontent.com/-tHHfoSGp3Pg/UrW3eKRT02I/AAAAAAAAAfo/krDC0XN5RNc/w433-h552-no/kahvalt%25C4%25B1.png" /></a>

    YanıtlaSil
  30. çok teşekkür ederim sabrınız için sonunda hallettim. İyi akşamlar diliyorum

    YanıtlaSil
  31. herşey için çok teşekkür ederım hocam şahanesiniz anlatım şekliniz çok yalın
    eyvallah .

    YanıtlaSil

Blogger tarafından desteklenmektedir.