Popiler Yayınlar Eklentisi Html Kodları

Önce popiler yayınlar eklentiniz yoksa onu ekleyelim. gatged ekle bölümünden ''Popüler Yayınlar Eklentimizi blogumuza ekliyoruz.Ama alt taraftaki resimde gördüğünüz gibi ekleyin yoksa istediğiniz sonuçları alamazsınız.

Popüler yayınlar eklentimizi eklediğimize göre Css kodlarımızı ekleyebiliriz demektir.Alt tarafdaki Css kodlarını Ctrl+F yardımı ile ]]></b:skin>  kodunun hemen üzerine ekliyoruz.

#sosyal-cssanime:hover li { opacity:0.2; } #sosyal-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } #sosyal-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #sosyal-cssanime li:hover { opacity:1; } #sosyal-cssanime li:hover a strong { opacity:1; top:-10px; } #PopularPosts1 ul li a:hover{color:#000;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 3px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:30px;background:transparent;padding:0;width:71px;height:71px} #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, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #FFffff;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#FFffff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:60%} #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:#B041FF;width:85%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:85%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;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:#f6993d;width:89%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#d7e9f3;width:89%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#dadfe2;width:89%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#bddae7;width:89%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#acbfca; width:89%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#83b7e0 ;width:89%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #9f9e9e;-moz-box-shadow: 3px 3px 3px #9f9e9e;padding:10px} .popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border: 1px solid #58ACFA; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { -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);height:75px;width:75px;}.popular-posts .item-thumbnail img:hover { -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);-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);} /* Blogger Hover Efekti Popüler Yayınlar Eklentisi sohbetcheblog */ .PopularPosts .widget-content ul li{padding:0;position:relative} .item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #000;z-index: 9999;left: 100px;top: 62%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;} .PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible} .PopularPosts img{width:80px;height:82px} .PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%} /* Blogger Hover Efekti Popüler Yayınlar Eklentisi sohbetcheblog*/


Hepsi bu kadar arkadaşlar şablonu kaydedip çıkıyoruz sonra eklentinin keyfini sürüyoruz.Yapamadığınız yer olursa yorum kısmında belirtmeniz yeterli olur.