POPULAR POST WIDGET ADOSOSIVE STYLE

Tuesday, 3 September 2013

POPULAR POST WIDGET ADOSOSIVE STYLE

--------------------------------------------------------------------------------------------------------
1- USE THIS OR OTHER TEMPLATE
Read More For Multi Colors:
http://fbgadgets.blogspot.co.uk/2014/11/recent-post.html
--------------------------------------------------------------------------------------------------------
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
---------------------------------------------------------------------------------------------------------
2- GO TO BLOG LAYOUT
3- ADD POPULAR POST WIDGET
4- POPULAR POST WIDGET SETTING BELOW
TITLE: Popular Posts
MOST VIEWED : ALL TIME
SHOW : IMAGE THUMBNAIL AND SNIPPET BOXES SHOULD BE CHECKED
Display up until : 10 OR 5 POSTS
-----------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------
FIND AND REPLACE YOUR B SKIN TAG WITH BELOW CODE
]]></b:skin>
---------------------------------------------------------------------------------------------------

.popular-posts.widget-content {
margin:0
}
.PopularPosts .widget-content ul li {
overflow:hidden;
height:81px;
margin:5px 0;
padding:2px;
border:1px solid #DADADA;
border-radius:9999px 1000px 1000px 9999px
}
.PopularPosts .widget-content ul li:hover {
background:#F7FCFF
}
.PopularPosts .item-thumbnail {
margin:0 5px 0 0;
float:left;
height:75px;
width:75px;
overflow:hidden;
border-radius:9999px 0 9999px 9999px;
border:1px solid #E4E4E4
}
.PopularPosts .item-thumbnail a {
display:block
}
.PopularPosts img {
padding:0;
width:100%;
height:100%;
border-radius:9999px 0 9999px 9999px
}
.PopularPosts .item-title {
padding:0 0 2px;
font-size:13px;
line-height:13px;
overflow:hidden;
max-height:28px
}

]]></b:skin>

--------------------------------------------------------------------------------------------------
FOR MULTICOLOURED USE BELOW CODE
FIND AND REPLACE YOUR B SKIN TAG WITH BELOW CODE
]]></b:skin>
---------------------------------------------------------------------------------------------------

.popular-posts.widget-content {
margin:0
}
.PopularPosts .widget-content ul li {
overflow:hidden;
height:81px;
margin:5px 0;
padding:2px;
border:1px solid #DADADA;
border-radius:9999px 1000px 1000px 9999px
}
.PopularPosts .widget-content ul li:hover {
background:#F7FCFF
}
.PopularPosts .item-thumbnail {
margin:0 5px 0 0;
float:left;
height:75px;
width:75px;
overflow:hidden;
border-radius:9999px 0 9999px 9999px;
border:1px solid #E4E4E4
}
.PopularPosts .item-thumbnail a {
display:block
}
.PopularPosts img {
padding:0;
width:100%;
height:100%;
border-radius:9999px 0 9999px 9999px
}
.PopularPosts .item-title {
padding:0 0 2px;
font-size:13px;
line-height:13px;
overflow:hidden;
max-height:28px
}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child:after{content:"0"}
#PopularPosts1 ul li:first-child{background:#21201d;width:50%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child+li{background:#ff4c54;width:50%}
#PopularPosts1 ul li:first-child:after{content:"2"}
#PopularPosts1 ul li:first-child+li+li{background:#ffde4c;width:50%}
#PopularPosts1 ul li:first-child:after{content:"3"}
#PopularPosts1 ul li:first-child+li+li+li{background:#4c6dff;width:50%}
#PopularPosts1 ul li:first-child:after{content:"4"}
#PopularPosts1 ul li:first-child+li+li+li+li{background:#6dff4c;width:50%}
#PopularPosts1 ul li:first-child:after{content:"5"}
#PopularPosts1 ul li:first-child+li+li+li+li+li{background:#c11ac7;width:50%}
#PopularPosts1 ul li:first-child:after{content:"6"}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li{background:#ff764c;width:50%}
#PopularPosts1 ul li:first-child:after{content:"7"}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li{background:#4cffff;width:50%}
#PopularPosts1 ul li:first-child:after{content:"8"}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li{background:#a3a0a1;width:50%}
#PopularPosts1 ul li:first-child:after{content:"9"}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li+li{background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);width:50%}

]]></b:skin>

-------------------------------------------------------------------------------------------------------
SIMPLE ROTATION EFFECT ADD MORE CODE IN PREVIOUS CODE
-------------------------------------------------------------------------------------------------------

#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);}
.item-thumbnail img {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
border: 3px solid #ccc;
height: 60px;
padding: 3px;
width: 60px;
}
------------------------------------------------------------------------------------------------------
OR USE THIS HOVER EFFECT CODE CHANGE TO CIRCLE EFFECT
-------------------------------------------------------------------------------------------------------

/* PopularPosts http://fbgadgets.blogspot.co.uk */
.popular-posts.widget-content {
margin:0
}
.PopularPosts .widget-content ul li:hover {
background:#F7FCFF
}
.PopularPosts .item-thumbnail a {
display:block
}
.PopularPosts img {
padding:0;
width:100%;
height:100%;
border-radius:9999px 0 9999px 9999px
}
.PopularPosts .item-title {
padding:0 0 2px;
font-size:13px;
line-height:13px;
overflow:hidden;
max-height:28px
}
.PopularPosts .widget-content ul li {
overflow:hidden;
height:90px;
margin:5px 0;
padding:2px;
border:1px solid #DADADA;
border-radius:9999px 1000px 1000px 9999px
}
.PopularPosts .item-thumbnail {
margin:0 5px 0 0;
float:left;
height:75px;
width:75px;
overflow:hidden;
border-radius:9999px 0 9999px 9999px;
border:1px solid #E4E4E4
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.PopularPosts .item-thumbnail:hover {
height:75px;
width:75px;
margin:0 5px 0 0;
float:left;
padding:3px;
border-radius: 50%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease
}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child:after{content:"0"}
#PopularPosts1 ul li:first-child{background:#21201d;width:50%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child+li{background:#ff4c54;width:50%}
#PopularPosts1 ul li:first-child:after{content:"2"}
#PopularPosts1 ul li:first-child+li+li{background:#ffde4c;width:50%}
#PopularPosts1 ul li:first-child:after{content:"3"}
#PopularPosts1 ul li:first-child+li+li+li{background:#4c6dff;width:50%}
#PopularPosts1 ul li:first-child:after{content:"4"}
#PopularPosts1 ul li:first-child+li+li+li+li{background:#6dff4c;width:50%}
#PopularPosts1 ul li:first-child:after{content:"5"}
#PopularPosts1 ul li:first-child+li+li+li+li+li{background:#c11ac7;width:50%}
#PopularPosts1 ul li:first-child:after{content:"6"}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li{background:#ff764c;width:50%}
#PopularPosts1 ul li:first-child:after{content:"7"}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li{background:#4cffff;width:50%}
#PopularPosts1 ul li:first-child:after{content:"8"}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li{background:#a3a0a1;width:50%}
#PopularPosts1 ul li:first-child:after{content:"9"}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li+li{background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);width:50%}

/* PopularPosts http://fbgadgets.blogspot.co.uk */

]]></b:skin>