Blogger Renkli Kategori Eklentisi

Blogger Renkli Kategori Eklentisi

Merhaba Arkadaşlar
Bugün Buraya İlk Defa Kendim Yaptığım Bir Eklenti yi Anlatmak İStiyorum.Geçenlerde Uğraşıp Yaptığım Çok güzel Bir Eklenti Olan Renkli Kategori Eklentisini Sizlerleda Paylaşmak İstedim.Tamamen Kendi Yapımımdır ve Wordpress De Gördüğüm Bir Eklentiyi Bloggere Ayarlarmak Biraz Zor Olsada Yinede Uğraştım Yaptım.Kaynak Gösterilmeden Kesinlikle Başka Sitelerde Yayınlanması Yasaktır.!!! Anlatıma Geçiyorum...

Öncelikle Şunu Belirteyim ben Kendi Temama Uygun Yaptığım için Ona Göre Anlatmak İstiyorum.

1. Şimdi Blogger Hesabına Girdikten Sonra HTML Düzenle Kısmına Geçip Widget Şablonlarını Genişlete Tıklıyoruz.
2. Şimdi İse 5 Tane Küçük Gadget Ekle Bölümü Çıkarmamız Lazım.Ben Header Bölümüne Yaptığım için Siz Başka Yerede Yerleştirebilirsiniz.
3. Ekdeki Kodları Html Şablonlarını Düzenle > Widget şablonlarını Genişlete Tıkladıktan Sonra "Blog kayıtları" Arama yaparak Onun üst Tarafına Yerleştiriyoruz"<*div id='headline'*>".Bunun Üstüne Yerleştirebilirsiniz.Yıldız Yok
   Dİkkat: Gizemliblog.Org Yazan Yerleri Kendi Blogunuza Göre Ayarlayın.
   Blogda Görünmediğinden Kodları Bir Metin Belgesi içinde Upload Ettim.Eki BURAYA Tıklayarak İndirebilirsiniz.
4. Şimdi İse Css Bölümünü Halledecez.
   

.category {
width:170px;
float:left;
border-top:8px solid #333;
margin:20px;
padding:10px 10px 10px 10px;
background:#EBE1D2;
     }

.category p {
margin:0;
}

{background:#EBE1D2; width:170px; margin:0; border-top:8px solid #333333;}
#cat-5  {width:164px; margin:0; border-top:8px solid #FF0000;}
#cat-3  {width:164px; margin:0; border-top:8px solid #FECE00;}
#cat-1  {width:164px; margin:0; border-top:8px solid #AE077C;}
#cat-2  {width:164px; margin:0; border-top:8px solid #1DB2FF;}
#cat-4  {width:164px; margin:0; border-top:8px solid #669D00;}
.category span.cat_title, #front-popular h2, #front-list h2, #archive, #gallery h3 {
text-transform:lowercase;
margin:0;
font-weight:bold;
font-size:1.7em;
letter-spacing:-0.05em;
}

#cat-1 h2, #cat-2 h2, #cat-3 h2, #cat-4 h2, #cat-5 h2 {
text-transform:lowercase;
margin:0;
font-weight:bold;
font-size:1.5em;
letter-spacing:-0.05em;
     color:#333;
}

#front-popular h2 {
color:#fff;
}

.category a {
color:#333;
display:block;
background:none;
}

.category a:hover {
background:none;
color:#fff;
text-decoration:none;
}

#cat-1:hover {background:#AE077C; color:#fff; }
#cat-3:hover {background:#FECE00; color:#fff; }
#cat-5:hover {background:#FF0000; color:#fff; }
#cat-2:hover {background:#1DB2FF; color:#fff; }
#cat-4:hover {background:#669D00; color:#fff; }
#cat-1:hover a {background:#AE077C; color:#fff;}
#cat-3:hover a {background:#FECE00; color:#fff;}
#cat-5:hover a {background:#FF0000; color:#fff;}
#cat-2:hover a {background:#1DB2FF; color:#fff;}
#cat-4:hover a {background:#669D00; color:#fff; }

#cat-1 h2 a:hover, #cat-2 h2 a:hover, #cat-3 h2 a:hover, #cat-4 h2 a:hover, #cat-5 h2 a:hover {
     color: #fff;
}



#bottom2 {
    width: 1000px;
    position: relative;
    clear:both;
    margin: 0 auto;
    color:#333333;
    float: left;
    background:#F2F2F2 repeat-x;
    padding: 0;

    }

#bottom2 a, #bottom a:visited{
     color:#DF7F3B;
     text-decoration:none;
     }
#bottom2 a:hover{
     text-decoration:underline;
     }

#bottom2 h2 {
     background: #3c78a7;
     color: #EBE1D2;
text-transform: capitalize;
margin: 0 0 10px;
padding: 6px 0 6px 7px;
font-family:Arial, Tahoma, Verdana ;
     font-size:14px;
     line-height:1.5em;
     letter-spacing:0;
}

#bottom2 ul {
    padding: 0;
    margin: 0;
    }

#bottom2 ul li {
    line-height: 26px;
    list-style-type: none;
    border-bottom: 1px dashed #031c5d;
    }

#leftbottom2 {
    width: 300px;
    float: left;
    margin:0;
    padding:7px 10px;
    border-top:1px solid #a2bce0;
    height:310px;
     }



#middlebottom2 {
    width: 340px;
    float: left;
    margin:0;
    padding:7px 10px;
    border-top:1px solid #b5c5d8;
    height:310px;
    }



#rightbottom2 {
     width: 300px;
     float: left;
     margin:0;
     padding:7px 10px;
     border-top:1px solid #a2bce0;
     height:310px;
     }