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.

 

 

Ş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.

 

 

İ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:

 

 

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.

 

                                   

 

Ö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.