Ö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 gidipHTML/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/AVvXsEhkx0XSdCaddBpD-v0gpq5WLmcif7ZdST7CUOVUr7luT9OZqQBACHaBbKEvk8w1HOTM0m31OmHVONGcVOJXwSequXT6wJ8zzBQGJmmE2qnhZgKtKr0LFo4TLa4izNEgn7mS2anXsLC0zdM/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/AVvXsEgLpG895gubhccvoi-DL4TADVeOKo4ntkcTOFAcPtlbs_JGTo2WvAnhA5mL0mPCmJ57IAwXAATdUFjrSvwEnp2uVSpZIsO1fPu7sbIYIPzIHWglViwXXgCgpkQ0b3OWnVIvk52e_OCF3RU/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/AVvXsEgoGxKh_ahQ_DLGsS0S6qaUNCTyDKZEMtsGzAwaU2eCi9V44OdmyBYtZBbmoqvA4GPZQGkuwo-XYmJH5u-Ag3TZ_xZnj-ctgkh4608B6PCWHzx1a31Af_uWDGS7kNsJNNc1MQfj6p1p2PU/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.
+(1).jpg)
+(1).jpg)
Hiç yorum yok:
Yorum Gönder