Blogger da Belirli Link Renkleri Nasıl Değiştirilir

Blog temanıza göz attığınız zaman onlarca farklı kategoride linklerin olduğunu görmüşsünüzdür.Örneğin yazı içi linkleri, tarih bilgisi linki, yorum alanı linkleri, eski-yeni yazı linkleri gibi.Eğer blogunuzun temasında bu türden linkleri kendi isteğinize göre rengini değiştirmek istiyorsanız bu yazımla birlikte bunu yapabileceksiniz.Varsayılan temanızda çoğunlukla tüm linklerin rengi aynıdır.Yalnız temanızı daha da güzelleştirmek adına farklı linklere farklı renk tanımı yapmak isteyebilirsiniz.O yüzden bu yazımdaki adımları doğru bir şekilde uygularsanız isteğinizi kolayca gerçekleştirebilirsiniz.

Belirli linklerin rengini değiştirmek için blogger CSS kod ekleme ile yapabileceksiniz.Önceki yazımda da bahsettiğim gibi tasarım >> özelliştir >> gelişmiş yolunu izleyerek bu kodları ekleyebilirsiniz.

1-Yorum Linki (Yazı sayfanızın altında, yorum bölümüne yönlendirilen kısım)

.comment-link{ color: red !important; } .comment-link:hover{ color: default !important; } .comment-link:visited{ color: default !important; }

2-Etiket Linki (Yazı sonunda yer alan link)

.post-labels a{ color: red !important; } .post-labels a:hover{ color: default !important; } .post-labels a:visited{ color: default !important; }

3-Tarih Linki (Yazı sonunda yer alan link)

.published{ color: red !important; } .published:hover{ color: default !important; } .published:visited{ color: default !important; }

4-Önceki Yazılar (Yazı sonunda eski yazınıza yönlenmenizi sağlayan link)

#blog-pager-older-link a{ color: red !important; } #blog-pager-older-link a:hover{ color: default !important; } #blog-pager-older-link a:visited{ color: default !important; }

5-Sonraki Yazılar (Yazı sonunda yeni yazınıza yönlenmenizi sağlayan link)

#blog-pager-newer-link a{ color: red !important; } #blog-pager-newer-link a:hover{ color: default !important; } #blog-pager-newer-link a:visited{ color: default !important; }

6-Anasayfa Linki (Eski Yazılar ile Yeni Yazılar arasında yer alan Anasayfa Linki)

.home-link{ color: red !important; } .home-link:hover{ color: default !important; } .home-link:visited{ color: default !important; }

7-Yazı Linki (Yazı içerisinde yer alan link)

.post-body a{ color: red !important; } .post-body a:hover{ color: default !important; } .post-body a:visited{ color: default !important; }

8-Arşiv Linki (Arşiv eklentisinde yer alan linkler)

#ArchiveList a{ color: red !important; } #ArchiveList a:hover{ color: default !important; } #ArchiveList a:visited{ color: default !important; }

9-Populer Yazılar Linki(Populer yazılar eklentisinde yer alan link)

.PopularPosts a{ color: red !important; } .PopularPosts a:hover{ color: default !important; } .PopularPosts a:visited{ color: default !important; }

Eğer tüm linklerin rengini değiştirmek istiyorsanız aşağıdaki kodu eklemelisiniz

a:link{ color: #008E00 !important; } a:hover{ color: black !important; }

Az çok kod yapısına alışkın ise yukarıdaki kodları kendinize göre düzenleyebilirsiniz.Kırmızı renk ile belirttiğim kısımlar yerine ingilizce olarak renkleri belirtebilirsiniz.(blue, green gibi)Ya da renk kodu da girebilirsiniz.(#000 gibi).Ayrıca default olarak belirttiğim kısımlar da mevcut temanızdaki renk kodu neyse o olacak ama siz elbette renk kodu belirtebilirsiniz.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

3 yorum:

  1. Muzzam bir konuya değinmişin kardeşim ilaç gibi paylaşım başarılarının devamını dilerim. Blogcular için gayet önemli bir yazı olmuş tebrikler...

    YanıtlaSil
    Yanıtlar
    1. teşekkür ederim.Yazımı beğendiğinize sevindim...

      Sil
  2. Güzel ve detaylı, elinize sağlık.

    YanıtlaSil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.