Blogger Kategori Etiketine Özel Renk Tanımlama ~ Blog Düzenim

Kategori etiketine özel renk tanımlama

Her kategoriye özel farklı renkler tanımlama nasıl yapılır?

Bu işlemi yapmadan önce lütfen temanızın yedeğini alınız. Bu konuda blogger tam yedek alma işlemi nasıl yapılır yazısını okuyabilirsiniz.

İlk olarak aşağıdaki kodları kopyalayın ve blogger şablon düzenleme sayfasında </head> kodunun hemen üzerine yapıştırın. Daha sonra CSS kodları içindeki kategoriadı kısmına kendi etiket isimlerinizi yazın. Örneğin sinema adında bir kategoriniz ve etiketiniz varsa sinema yazın. Ancak Türkçe karakter kullanmayın!

<style type='text/css'>

.post-meta .label-info .sinema a {background:#00ada7}
.post-meta .label-info .gunluk a{background:#4285f4}
.post-meta .label-info .kategoriadı a{background:#fbb034}
.post-meta .label-info .kategoriadı a{background:#ea4335}
.post-meta .label-info .kategoriadı a{background:#fbbc05}
.post-meta .label-info .kategoriadı a{background:#34a853}
.post-meta .label-info .kategoriadı a{background:#544B4B}
.post-meta .label-info .kategoriadı a{background:#11c1ff}
.post-meta .label-info .kategoriadı a{background:#824372}
.post-meta .label-info .kategoriadı a {background:#336f81}
.post-meta .label-info .kategoriadı a {background:#000000}
.post-meta .label-info a:hover,.label-info a:hover:nth-child(1),.label-info a:hover:nth-child(2){background:#ccc;}



.post-meta .label-info a{position:relative; font-family: Open Sans; background:#ebebeb;line-height:20px;border-radius:2px;display:inline-block;margin-right:1px;padding:0 5px;color:#fff;letter-spacing:.2px;font-size:11px;text-decoration:none;transition:all .3s ease-in-out}
.post-meta .label-info a:hover{color:#444; background:#ccc; }

</style>

CSS kodlarınızı ekledikten sonra temanızı kaydedin. Daha sonra aynı pencere şu kodu aratın.
<span class='label-info'>
Temanızda bu koddan yalnızca bir tane olduğundan, ilk bulduğunuz kod aradığımız koddur. Bu kodu bulduktan sonra resimde kırmızı çerçeve içinde belirtmiş olduğum kısmı silin.

Resmi büyültmek için tıklayın

Silmiş olduğunuz alana aşağıda vermiş olduğum kodları ekleyin. Ancak etiket isimlerini yazarken dikkat edin.

 <span class='sinema'> <b:if cond='data:label.name == &quot;sinema&quot;'><a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'>Sinema</a></b:if>  </span>
 <span class='gunluk'><b:if cond='data:label.name == &quot;günlük yazılar&quot;'><a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'>Günlük</a></b:if></span>
 <span class='kategoriadı'> <b:if cond='data:label.name == &quot;kategoriadı&quot;'><a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'>KATEGORİ ADI</a></b:if>  </span>

SPAN CLASS : Kod içindeki span class diye başlayan ilk satır yukarıda CSS isimlerinde olduğu gibi olmalı. Yani Orada eğer Filmler yazdıysanız, buraya da Filmler yazmalısınız. filmler ya da FilM değil. Büyük küçük harfe dikkat edin.

LABEL NAME : Yine kod içindeki label name kısmına çok dikkat edin. Yazınızı yazıp etiket girerken nasıl yazdıysanız aynı şekilde olmalıdır. Örneğin kategorinizin adı Sinema ama siz etiketinizi S harfi küçük, sinema şeklinde yazdıysanız bu alana da aynı şekilde sinema şeklinde yazmalısınız.

REL TAG : Kısmına ise dilediğiniz şekilde kategori adı yazabilirsiniz. Örneğin kullandığınız etiket sinema ama siz bu alana İzlediğim Filmler yazabilirsiniz. Ayrıca REL TAG kısmına şöyle bir farklılık daha uygulayabilirsiniz. Blogger yazı alanında kullanmış olduğunuz emojileri kopyala deyip bu alana yapıştırdığınızda kategorinizin hemen yanında emoji de gözükecektir.