Blogger Etiket İçin Alternatif Modeller

blogger-etiket-kodunu-nasıl-değiştirebilirim

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.

YAZIYI PAYLAŞ

BENZER YAZILAR

SONRAKİ
« Prev Post
ÖNCEKİ
Next Post »

4 yorum

yorum YAZ
30 Haziran 2017 08:36 delete

güzelmiş,renkli etiketler.. :) ben denedim ama olmadı.. ]]> var,onu buldum..üstüne boşluk bırakmadan verdiğiniz kodları ekledim..ama olmadı..sizin verdiğiniz resim de */]]> böle bişey var..benimkinde */ yok..ve üstündeki kodlarda yok..çok farklı yani..

Cevap Ver
avatar
30 Haziran 2017 09:13 delete

Gadget olarak etiketleri eklediniz değil mi? Kodu gösterdiğim yere eklersrn çalışması gerekir..*/ bunu eklemeden sadece ]]>< ile başlayan yeri aratın ve üstüne yapıştırın bakalım olacak mı?

Cevap Ver
avatar
30 Haziran 2017 09:53 delete

gadgeti ekledim..ama gadget etiketi sayfada hiç hoş durmadı..gadgeti ekldiğimde de o kod pek işe yaramadı gibi..neyse fazla kurcalamayalım,bide şablonu bozarız mozarız.. :)) yine de çok iyi bir çalışma olmuş,umarım ihtiyacı olanlar faydalanır diyorum..elinize sağlık..

Cevap Ver
avatar
30 Haziran 2017 11:55 delete

Tamam olmadıysa fazla zorlama o zaman..Teşekkürler

Cevap Ver
avatar

YORUM YAPARAK KATKIDA BULUNABİLİRSİNİZ...

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösteriniz.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat ediniz.
3) Kullandığınız üslubun sizi yansıttığını unutmayınız. EmoticonEmoticon