Blogger css3 ile Etiketleri özelleştirme



Blogger Etiketleri özelleştirme ( renklendirme ) eklentisi

Bu eklentimizde blogger blogunuzda bulunan etiketleri css3 yardımı ile biraz daha görselleştirmeyi anlatacağız..

Öncelikle blogunuzda etiketler gadgetinin ekli olduğundan emin olun , yoksa eklemek için , Yerleşim >> Gadget Ekle >> Etiketler sekmesinden eklentiyi ekleyin..

Etiketler eklentisini eklerken "Görüntüle" kısmını "BULUT" olarak seçelim..

Şimdi şablon ksımına girip alttaki kodumuzu buluyoruz..

PHP- Kodu:
]]></b:skin>  

Bu kodumuzun hemen üstüne , aşağıda yer alan kodları ekliyoruz..

PHP- Kodu:
.label-size {
    
floatleft;
    
margin0 0 7px 20px;
    
positionrelative;
    
font-family'Helvetica Neue'HelveticaArialsans-serif;
    
font-size0.75em;
    
font-weightbold;
    
text-decorationnone;
    
color#996633;
    
text-shadow0px 1px 0px rgba(255,255,255,.4);
    
padding0.417em 0.417em 0.417em 0.917em;
    
border-top1px solid #d99d38;
    
border-right1px solid #d99d38;
    
border-bottom1px solid #d99d38;
    
-webkit-border-radius0 0.25em 0.25em 0;
    -
moz-border-radius0 0.25em 0.25em 0;
    
border-radius0 0.25em 0.25em 0;
    
background-image: -webkit-linear-gradient(toprgb(254218113), rgb(25418671));
    
background-image: -moz-linear-gradient(toprgb(254218113), rgb(25418671));
    
background-image: -o-linear-gradient(toprgb(254218113), rgb(25418671));
    
background-image: -ms-linear-gradient(toprgb(254218113), rgb(25418671));
    
background-imagelinear-gradient(toprgb(254218113), rgb(25418671));
    
filterprogid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71'EndColorStr='#feba47');
    -
webkit-box-shadowinset 0 1px 0 #faeaba,
        
0 1px 1px rgba(0,0,0,.1);
    -
moz-box-shadowinset 0 1px 0 #faeaba,
        
0 1px 1px rgba(0,0,0,.1);
    
box-shadowinset 0 1px 0 #faeaba,
        
0 1px 1px rgba(0,0,0,.1);
    
z-index1;
}
 
.
label-size:before {
    
content'';
    
width1.30em;
    
height1.39em;
    
background-image: -webkit-linear-gradient(left toprgb(254218113), rgb(25418671));
    
background-image: -moz-linear-gradient(left toprgb(254218113), rgb(25418671));
    
background-image: -o-linear-gradient(left toprgb(254218113), rgb(25418671));
    
background-image: -ms-linear-gradient(left toprgb(254218113), rgb(25418671));
    
background-imagelinear-gradient(left toprgb(254218113), rgb(25418671));
    
filterprogid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71'EndColorStr='#feba47');
    
positionabsolute;
    
left: -0.69em;
    
top.2em;
    -
webkit-transformrotate(45deg);
    -
moz-transformrotate(45deg);
    -
o-transformrotate(45deg);
    
transformrotate(45deg);
    
border-left1px solid #d99d38;
    
border-bottom1px solid #d99d38;
    
-webkit-border-radius0 0 0 0.25em;
    -
moz-border-radius0 0 0 0.25em;
    
border-radius0 0 0 0.25em;
    
z-index1;
}
 
.
label-size:after {
    
content'';
    
width0.5em;
    
height0.5em;
    
background#fff;
    
-webkit-border-radius4.167em;
    -
moz-border-radius4.167em;
    
border-radius4.167em;
    
border1px solid #d99d38;
    
-webkit-box-shadow0 1px 0 #faeaba;
    
-moz-box-shadow0 1px 0 #faeaba;
    
box-shadow0 1px 0 #faeaba;
    
positionabsolute;
    
top0.667em;
    
left: -0.083em;
    
z-index9999;
}
  
#Label1 {
    
height210px;
}
 
.
label-size:hover {
    
background-image: -webkit-linear-gradient(toprgb(254225141), rgb(254200108));
    
background-image: -moz-linear-gradient(toprgb(254225141), rgb(254200108));
    
background-image: -o-linear-gradient(toprgb(254225141), rgb(254200108));
    
background-image: -ms-linear-gradient(toprgb(254225141), rgb(254200108));
    
background-imagelinear-gradient(toprgb(254225141), rgb(254200108));
    
filterprogid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d'EndColorStr='#fec86c');
    
border-color#e1b160; }
 
.
label-size:hover:before {
    
background-image: -webkit-linear-gradient(left toprgb(254225141), rgb(254200108));
    
background-image: -moz-linear-gradient(left toprgb(254225141), rgb(254200108));
    
background-image: -o-linear-gradient(left toprgb(254225141), rgb(254200108));
    
background-image: -ms-linear-gradient(left toprgb(254225141), rgb(254200108));
    
background-imagelinear-gradient(left toprgb(254225141), rgb(254200108));
    
filterprogid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d'EndColorStr='#fec86c');
    
border-color#e1b160;  

Artık blogger blogunuzda bulunan etiketler daha renkli... 

Demo
Google+'da Paylaş

Yazar Taktik Ver

Yazar Hakkında bilgi yazılacak
    Blogger Yorumları

2 yorum:

  1. webmastrator@hotmail.com Kardeşim Tema Atıcaktın ?

    YanıtlaSil

Argo içerilikli yorum attığınız taktirde hakkınızda dava açılır, site adresinizi yoruma attığınız taktirde ise bloğunuz google sıralamasından düşer.