Blogger Etiketler Kodunu Özelleştirme

Tidak Ada Tanggapan

Blogger etiketler kodu nasıl eklenir? Blogger etiketlerini nasıl silerim? Etiketler kodunu nasıl farklılaştırabilirim? 

  Blogger kullanıcıları için etiketler çok önemlidir. Yazıları kategorilendirmek için ve arama motorlarına kolaylık sağlamak için kullanılmalıdır. Etiketlerin doğru kullanımı ve bilinmeyenleri için "Blog yazılarını nasıl etiketlemeliyim? Etiket nasıl silinir?" yazımı okumanızı tavsiye ederim. Blogger etiketler kodu için bir kaç farklı yöntem sunmak istiyorum. Böylece etiketlerin eklendikten sonra görünümlerini değiştirebilirsiniz. Hem dikkat çekici hem de blog sayfanızı tamamlayıcı bir tasarım yapmış olursunuz. Kodları bizzat deneyerek çalıştığından emin olduktan sonra paylaşmaya karar verdim. Hem de bu kodları uygulamak için kod bilgisine ihtiyaç olmadığını düşünüyorum. Yapılması gereken tek şey ]]></b:skin> kodunu temanızda aratmanız ve hemen üstüne aşağıdaki etiketlerden hangisini istiyorsanız onun kodunu yapıştırmanızdır. 

1) 

.sidebar .label-size {position:relative;text-transform: uppercase;text-decoration:none;font-size:13px;font-family:Open Sans;color:#fff!important;}.sidebar .label-size a {color:#fff!important;font-weight:bold;padding:8px 10px;margin:0 6px 6px 0;float:left;display:block;-moz-transition: all 0.4s ;-o-transition: all 0.4s;-webkit-transition: all 0.4s ;-ms-transition: all 0.4s ;transition: all 0.4s ;}.sidebar .label-size-1 a {background:#BC951A;border-bottom:3px solid #BC761A;}.sidebar .label-size-1 a:hover {background:#BC761A;}.sidebar .label-size-2 a {background:#E73C69;border-bottom:3px solid #226693;}.sidebar .label-size-2 a:hover {background:#2980b9;}.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}.sidebar .label-size-3 a:hover {background:#27ae60}.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}.sidebar .label-size-4 a:hover {background:#8e44ad}.sidebar .label-size-5 a {background:#E73C69;border-bottom:3px solid #922C20;}.sidebar .label-size-5 a:hover {background:#c0392b}

  Etiketleri bu şekilde göstermek istiyorsanız ama renklerini değiştirmek istiyorsanız kırmızı ile değiştirdiğim kodları kendi istediğiniz renklerle değiştirebilirsiniz. Renk konusunda yardım almak için "Html Renk Kodları ve İsimleri" yazımı okuyabilirsiniz. Ayrıca kodun üst bölümünde yazı büyüklüğünü ve tipini değiştirebilirsiniz.

2) 

.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;font-size:10px;color:#666;}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}

  Bu etiket eklentisinde renkler ve yazı büyüklüğü ayarlarını değiştirebilirsiniz. Mause ile etiket üzerine geldiğinizde görselde göründüğü gibi üzerine gelinen etiket hareket eder. Değişik ve kullanışlı etiket kodu arayanlar için ideal olduğunu düşünüyorum.

3) 

.label-size a {
margin: 0 2px 6px 0;
padding: 8px;
border: solid 5px #32E097;
border-radius: 3px;
float: left;
color: #FFF;
background-color: #E52C79;
font-family: Raleway;
font-size: 18px !important;
text-decoration: none !important;
word-spacing: 8px;
}
.label-size span {
margin: 0 2px 6px 0;
padding: 8px;
border: solid 1px #C6C6C6;
border-radius: 3px;
float: left;
color: #FFF;
background-color: #932CE5 !important;
font-family: Raleway;
font-size: 18px !important;
text-decoration: none !important;
font-weight: bold;
word-spacing: 8px;
}
.label-size a:hover {
margin: 0 2px 6px 0;
padding: 8px;
border: solid 5px #32E097;
border-radius: 3px;
float: left;
color: #FFF;
background-color: #D22CE5;
font-family: Raleway;
font-size: 18px !important;
text-decoration: none !important;
word-spacing: 8px;
zoom: 1;
}

  Gerekli ayarlamaları yaptıktan sonra blog sayfanızda şık duracak güzel bir etiket kodu. Bu yazıda 3 tane seçenek sunarak başka sayfalarda gezinmeden aradığınızı bulmanızı sağlamak istedim. Verdiğim 3 örnek kod aynı şekilde eklenerek çalışmaktadır. Kafa karıştıran ve yapamayacağınızı düşündüren bir yer olmadığını düşünüyorum. Aradığınız etiketleri iki sıra halinde listelemek için "Blogger Etiketleri İkili Sütun Olarak Sıralama" yazımı okuyabilirsiniz.