Yuvarlak Stil Popüler Yayınlar Eklentisi

Yuvarlak Stil Popüler Yayınlar Eklentisi

 

Blogger için popüler yayınları özelleştirme eklentisi gün geçtikçe daha farklı ve değişik eklentiler ortaya koyuyor bu eklentide olduğu gibi ve ilerde başka bir eklenti daha paylaşacağım aynı konu hakkında.Yukarıdaki resimde görmüş olduğunuz gibi Popüler Yayınlar'ı yuvarlak stile çevirme işlemidir ve son olarak sizlere daha önce Popüler Yayınlar hakkında neler paylaştım onların kısa linkini vereyim ve misafir olduğum bir blog içinde bu yazı hakkında bir yazı vermiştim onuda sizlere linkini vereyim.

Üstteki adımları yapmak için ilk olarak Blogger Paneline Girin. .

1-Şablon Tıklıyoruz > HTML Düzenle > CTRL+F yardımı ile ]]></b:skin> kodunu buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz 

/* Yuvarlak Stil Popüler Yayınlar Eklentisi bloggererdal.com */ .popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px; list-style-type: none;padding:5px 5px 5px 20px !important; border: 1px solid #ddd;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; height: 40px; -moz-box-shadow: 3px 2px 5px #242424; -webkit-box-shadow: 3px 2px 5px #242424; box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px; } .popular-posts ul li a { font-style: italic; } .popular-posts ul li:hover { border:1px solid #d10202; -moz-box-shadow: 3px 2px 5px #d10202; -webkit-box-shadow: 3px 2px 5px #d10202; box-shadow: 3px 2px 5px #d10202; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { height:40px;width:40px; webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4); } .popular-posts .item-thumbnail img:hover{ -moz-box-shadow: 0px 0px 5px #d10202; -webkit-box-shadow: 0px 0px 5px #d10202; box-shadow: 0px 0px 5px #d10202;}