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}
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;
}
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.
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..
YanıtlaSilGadget 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ı?
YanıtlaSilgadgeti 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..
YanıtlaSilTamam olmadıysa fazla zorlama o zaman..Teşekkürler
Sil