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>
.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>
Related movie you might like to see :
INTENSO MAGENTO QUICK VIEW BUTTON
Magento Hello World Module (Extensi...
FEATURE POST WIDGET IN BLOG
IMPORT SQL CSV FILE ON PHPMYADMIN
Direct Link Generator CODE
Direct Links to your Files on Googl...
PHP CONTACT FORM WITH CAPTCHA
ON LINE JAVA LIBRARY
GOOGLE PROJECT HOSTING
PRESTASHOP THUMBNAIL WITH HOVER EFF...
GOOGLE FILTER BUTTON IN IMAGE SEARC...
BODY JS FILE LINK IN MAGENTO
Related Post for POPULAR POST WIDGET ADOSOSIVE STYLE
POPULAR POST SCROLL IN SIDEBAR TEMPLATE
RENAME DOCS FOLDER IN PRESTASHOP
BLOG HOSTING HELP
RECENT/FEATURED POST THUMBNAIL IMAGE IN SIDEBAR
MAKE WODPRESS THEME
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE
Platinum Arts Sandbox Free 3D Game Maker
HOME FEATURE TAB CHANGE IN PRESTASHOP
POST LOADER TEMPLATE
RENAME ADAPTER FOLDER IN PRESTASHOP
FREE SLL CERFICATE BY AZURE MICROSOFT FOR FACEBOOK
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG
PRESTASHOP HOME PAGE TAB BREAD CRUMBS STYLE
NEWS TICKER BLOGGER TEMPLATES
25 JS FILES DELETE IN PRESTASHOP
Popular Posts Widget for Blogger Tweak
RENAME CONTROLLERS FOLDER IN PRESTASHOP
PRESTA CSS JS FILE LINKS REMOVE BY DELETE FILES 
CHANGE MENU CSS COLOR IN PRESTASHOP
PRESTASHOP THUMBNAIL WITH HOVER EFFECT
RENAME DOWNLOAD FOLDER IN PRESTASHOP
RENAME CSS FOLDER IN PRESTASHOP
CANVAS GAMES TUTORIAL ON FACE BOOK
BLOGGER GRID LIST SHOPPING CART TEMPLATE
DEFAULT BOOT STRAP WORD IN 13 FILES PRESTASHOP 
AMAZON CLOUD DRIVE
SELL YOUR APPS
GOOGLE PROJECT HOSTING
POPULAR POST WIDGET DIFFERENT STYLES
RECAPTCHA REGISTER FORM
Direct Link Generator CODE
GENERIC BLOGGER TEMPLATE WITH CSS HEADER IMAGE AND PAGINATION
UNITY 3D DECOMPILER OBFUSCATOR
POST LOADER TEMPLATE 
POPULAR POST WIDGET ADOSOSIVE STYLE
DRAG AND DROP MULTIPLE UPLOAD
BASIC TEXT OR SCROLL BOX OR IMAGE SRC HTML CODES
ADD POP UP REMOVER
RENAME PDF FOLDER IN PRESTASHOP
AFTER INSTALL PRESTASHOP MAKE NEW FOLDERS
PHP CONTACT FORM WITH CAPTCHA
RENAME CACHE FOLDER IN PRESTASHOP
ABSOLUTE POPUP BOX WITH PRINT
PAGE NAVIGATION WITH TITLE AND THUMBNAIL BY HTML/JAVA WIDGET
Recommended Post Slide out for Blogger
PAGINATION IN BLOG
RENAME CORE FOLDER IN PRESTASHOP
Facebook App With or Without SSL Certificate
SHOPPING CART IN SIDEBAR TEMPLATE
SHOPPING CART IN SIDEBAR TEMPLATE
BlogPagerWithJavaCode
SSL WEBSITE CHECKER FOR FACEBOOK
BLOGGER GRID LIST SHOPPING CART TEMPLATE
RECENT OR FEATURE POST LIST BADGE WIDGET WITH GOOGLE PROJECT 
FONT LINE FIND IN PRESTA SHOP FILE SEEK SOFTWARE
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.