Blogger İcin 4 Adet Ozel Populer Mesajlar Widgeti

Popüler mesajlar Widget blogu her en sık kullanılan widget'lar biridir. Blogger popüler Mesajları kendi bloglar için gerecindeki kendi varsayılan var ama bu widget çok cazip değil. O blogun tüm tasarım çok çirkin ve etkileri görünüyor bu nedenle içinde herhangi bir özelleştirme ..

olmadan popüler mesajların basit bir liste görüntüler. Ama bu widget hakkında iyi bir şey kolayca CSS kodunu kullanarak özelleştirilmiş olmasıdır. Bu yazı biz blogger widget'ını özelleştirme varsayılan popüler mesajlar için 4 farklı stilleri görüşecek

Bloggera Nasıl Eklenir Aşağıdaki adımları takip ediniz
Senin blogger Admin paneline gidin.
Şablonu genişlet seçeneğini seçin.
Ctrlf yardımı ile alttaki kodu bulun
Şablon kodunda bulmak ]]> </ b: skin>
Hangisini kullanmak istiyorsanız,yukarıdaki bulduğunuz kodun hemen üst satırına yapıştırın İşlem bu kadar...

BİRİNCİ EKLENTİ

1234567891011121314151617181920212223242526272829303132333435363738394041.popular-posts ul{padding-left:0px;}
    .popular-posts ul li {
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
           -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
border-radius:5px;
background: rgb(44,83,158); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,83,158,1)), color-stop(100%,rgba(44,83,158,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */
    }

    .popular-posts ul li:hover {
      -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:2px 2px 4px #333333;
    border:1px solid #333333;
color:#fff;
    }

.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#ffffff;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
   
    }

İKİNCİ EKLENTİ

12345678910111213141516171819202122232425.popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #ffffff  no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    }
    .popular-posts ul li:hover {
        border:1px solid #555555;
    }

.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#333333;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#555555;
    }

ÜÇÜNCÜ EKLENTİ

1234567891011121314151617181920212223242526272829.popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #FFF  no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dcdcdc;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    }

    .popular-posts ul li:hover {
    
    background:#FF8040;

    }

.popular-posts ul li a
{
text-decoration:none;
font:14px Georgia, verdana;
color:#222222;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#fff;
    }

DÖRDÜNCÜ EKLENTİ

12345678910111213141516171819202122232425262728293031 .popular-posts ul
{
padding-left:0px;
    -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
 border: 1px solid #dcdcdc;

}
    .popular-posts ul li {
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
   border-bottom:1px dashed #dcdcdc;
       background:#ffffff;
    }

  .popular-posts ul li a
{

text-decoration:none;
font:16px georgia,verdana;
color:#3d87c4;
}

    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#333333;
    }