Menu

Blogger Popüler Yayınları İki Renkli Yapma

Blogger eklentileri içinde en çok kullanılan eklenti Blogger Popüler Yayınlar eklentisidir,bu eklenti çok kullanıldığı için çok fazla Popüler Yayınları düzenleme kodu oluşturulmaktadır,bunların içinden en önemli olanları CSS kodları ile oluşturulan kodlardır çünkü siteye SEO açısından bir zarar vermiyor ve birkaç basit kodla düzenleme yapılabiliyor.

Aşağıdaki Blogger Popüler Yayınlar düzenleme kodları iki ayrı tonda ve numaralı bir şekilde yayınlarınızı göstermenize yardımcı olacaktır.

Blogger Popüler Yayınları İki Renkli Yapma


Css kodları ile oynayarak site tasarımınıza uygun şekli ve renklerini de kendinize göre,zevkinize göre ayarlamak da mümkündür.

Ayrıca daha önce yayınladığımız aşağıdaki eklentilerde işinize yarayabilir,deneyebilirsiniz.

---Blogger CSS3 Siyah Açılır Menu Yapma
Blogger Popüler Yayınları İki Renkli Yapma

Blogger Popüler Yayınları İki Renkli Yapma


    #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
    #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
    #PopularPosts1 ul li:first-child{background:#ECD672;width:90%}
    #PopularPosts1 ul li:first-child:after{content:"1"}
    #PopularPosts1 ul li:first-child + li{background:#ECE5B6;width:90%}
    #PopularPosts1 ul li:first-child + li:after{content:"2"}
    #PopularPosts1 ul li:first-child + li + li{background:#ECD672;width:90%}
    #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
    #PopularPosts1 ul li:first-child + li + li + li{background:#ECE5B6;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
    #PopularPosts1 ul li:first-child + li + li + li + li{background:#ECD672;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
    #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#ECE5B6;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#ECD672;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#ECE5B6;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#ECD672;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
    #PopularPosts1 ul li:first-child:after,
    #PopularPosts1 ul li:first-child + li:after,
    #PopularPosts1 ul li:first-child + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:32px;color:#fff}
    #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:50px;}
    #PopularPosts1 ul li a{font-size:15px;color:#444;text-decoration:none}
    #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
    #PopularPosts3 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    padding:4px;
    border:1px solid #fff !important;
    background: #F2F2F2;}#PopularPosts1 img:hover {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -moz-transform: scale(1.2) rotate(-740deg) ;
    -webkit-transform: scale(1.2) rotate(-740deg) ;
    -o-transform: scale(1.2) rotate(-740deg) ;
    -ms-transform: scale(1.2) rotate(-740deg) ;
    transform: scale(1.2) rotate(-740deg) ;
    }

    Düzenleme:
    Yayınladığımız bu eklentiler içinde ki renk kodları #XXXX şeklinde olan kodlardır bunları aşağıdaki SEO Mektebi renk kodları sayfasından istediğiniz renkleri seçerek ekleyebilirsiniz.


    Ayrıca eklentiler içindeki sayısal değerlerle oynayarak site tasarımına uygun olan ölçüleri sağlayabilirsiniz.


    Sonraki Yazılar
    « Prev Post
    Önceki Yazılar
    Next Post »

    Henüz Yorum Yapılmamış " Blogger Popüler Yayınları İki Renkli Yapma "

    Önerilen Yazı
    ×