Blogger Hover Efekli Popüler Yayınlar Eklentisi

Merhaba Arkadaşlar, bu yayınımda sizlere popüler yayınlar gadgetini nasıl css ile hareketli hale getirilmiş olan eklentiyi sunmak istiyorum.

Blogger siteniz için güzel bir eklenti sidebar kısmında popüler yayınlar eklentisi animasyonlu resimdede gördüğünüz gibi umarım beğenirsiniz.

Uygulamak için Şablon > Html'yi Düzenle diyoruz ve Ctrl + F tuşlarına basıp ]]></b:skin> kodunu aratıyoruz ve hemen üstüne aşağıdaki kodu yapıştırıyoruz. Hepsi bu kadar...

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 kodblogcum*/

Yardım için yoruma yazabilirsiniz ... Sağlıcakla Kalın...