Blogger etiketleri Ozellestirme icin 5 yeni eklentiler

Blogger etiketleri Ozellestirme icin 

Blogger etiketleri Ozellestirme icin 5 yeni  eklentiler

Blogger etiketler mesaj kategorileri belirtmek için kullanılmaktadır. Senin blogger blog etiketleri kullanarak kendi gruplarını oluşturarak birbirinden mesajların farklı türleri arasında ayırt edebilirsiniz.

 Standart blogger etiketleri iyi tarz değildir. Hangi bir blog kötü genel tasarımı sonuçlanır ancak bu blogger etiketleri kolayca biz blogger etiketleri özelleştirmek için bizim en iyi 5 tasarımları sağlayacak bu yazı küçük bir CSS kodu kullanılarak özelleştirilebilir endişe anlamıyorum.

Blogger etiketleri Özelleştirme
Senin blogger pano açın.
Blogunuza seçin.
Seçin Şablon seçeneğini.
Tıklayın HTML Düzenle seçeneğini.
Şablon kodunda bulmak ]]> </ b: skin>
Şimdi aşağıda verilen 5 tasarımlardan herhangi bir tasarım kodunu kopyalayın.
Kopyalanan kodu hemen üzerine Yapıştırınız.. ]]> </ b: skin> ve şablonu kaydetmek
Yeni özelleştirilmiş blogger etiketleri keyfini çıkarın.

 Tasarım 1: Yaprak tarzı etiketler

Tasarım 1: Yaprak tarzı etiketler kodu

12345678910111213141516171819202122232425262728293031323334353637383940414243444546.label-size{
 margin:0;
 padding:0;
 position:relative;
 } 
 .label-size a{
 float:left;
 height:18px;
 line-height:18px;
 position:relative;
 font:14px verdana;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
 -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
  -moz-box-shadow: inset 0 1px 0 0 #96ca6d;
  box-shadow: inset 0 1px 0 0 #96ca6d;
  background-color: #7fbf4d;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));
  background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: linear-gradient(top, #7fbf4d, #63a62f);
  border: 1px solid #63a62f;
  border-bottom: 1px solid #5b992b;
 color:#fff;
 text-decoration:none;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
 -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all  .5s ease-in-out;
 } 
.label-size a:hover
{
text-shadow:5px 5px 5px #dcdcdc;
background:orange;
border:1px solid orange;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
}

Tasarım 2: Parlak Pills etiketi

Tasarım 2: Parlak Pills etiketi kodu

123456789101112131415161718192021222324252627282930313233343536373839404142434445.label-size{
 margin:0;
 padding:0;
 position:relative;

 } 
 .label-size a{
              float:left;
 height:18px;
 line-height:18px;
 position:relative;
 font:13px verdana;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
text-decoration:none;
  background-color: #ee432e;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee432e), color-stop(50%, #c63929), color-stop(50%, #b51700), color-stop(100%, #891100));
  background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  border: 1px solid #951100;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  color: #fff;
  font: bold 14px "helvetica neue", helvetica, arial, sans-serif;
   text-align: center;
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
  }
  .label-size a:hover {
    background-color: #f37873;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f37873), color-stop(50%, #db504d), color-stop(50%, #cb0500), color-stop(100%, #a20601));
    background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -ms-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -o-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
     }

Tasarım 3: Parlak Pills etiketi

Tasarım 3: Parlak Pills etiketi kodu

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849.label-size{
 margin:0;
 padding:0;
 position:relative;
 } 
 .label-size a{
text-decoration:none;
 float:left;
 height:18px;
 line-height:18px;
 position:relative;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(top, #eeeeee, #cccccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #333;
  font: bold 12px verdana;
    text-align: center;
  text-shadow: 0 1px 0 #eee;
  }
  .label-size a:hover {
    background-color: #dddddd;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(top, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
        text-shadow: 0 1px 0 #ddd; }
  button.clean-gray:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }

Tasarım 4: Hareketli Sınır tarzı etiketleri

Tasarım 4: Hareketli Sınır tarzı etiketleri kodu

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051.label-size{
 margin:0;
 padding:0;
 position:relative;

 } 
 .label-size a{
 float:left;
 height:18px;
 line-height:18px;
 position:relative;
 font:14px verdana;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
 color: #fff;
 background: #48C9FF;
 background: -webkit-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
 background: -moz-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
 background: -ms-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
 background: -o-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
 background: linear-gradient(to bottom, #48C9FF 0%, #2EA8E5 100%);
 text-shadow: #29a3cc 0 1px 3px;
 text-decoration:none;    
 border-top-left-radius: 10px 50px;
 border-bottom-left-radius: 10px 50px;
 border-top-right-radius: 10px 50px;
 border-bottom-right-radius: 10px 50px;
 -moz-border-radius-topleft: 10px 50px;
 -moz-border-radius-topright: 10px 50px;
 -moz-border-radius-bottomright: 10px 50px;
 -moz-border-radius-bottomleft: 10px 50px;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
 }

.label-size a:hover 
{
 -moz-border-radius-topleft: 50px 50px;
 -moz-border-radius-topright: 50px 50px;
 -moz-border-radius-bottomright: 50px 50px;
 -moz-border-radius-bottomleft: 50px 50px;
 border-top-left-radius: 50px 50px;
 border-bottom-left-radius: 50px 50px;
 border-top-right-radius: 50px 50px;
 border-bottom-right-radius: 50px 50px;
}

Tasarım 5: Düğme tarzı etiketler

Tasarım 5: Düğme tarzı etiketler kodu

123456789101112131415161718192021222324252627282930.label-size{
 margin:0;
 padding:0;
 position:relative;

 } 
 .label-size a{
              float:left;
 height:18px;
 line-height:18px;
 position:relative;
 font:13px verdana;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
 text-decoration:none;
 background-color: #ff4c47;
 border-radius: 3px;
 box-shadow: 0 2px 0 #db443d;
 -moz-box-shadow: 0 2px 0 #db443d;
 -webkit-box-shadow: 0 2px 0 #db443d;
 color: #fff;
 
 text-align: center;
}

.label-size a:hover {
 background-color: #db443d;
}