Saturday, 13 July 2013
PopularPostWidget Style1


FIND B SKIN TAG AND ADD THIS CSS CODE
---------------------------------------------------------------------------------------------------
FIND THIS B SKIN LINE TAG AND REPLACE BELOW CODE
]]></b:skin>
-----------------------------------------------------------------------------------------------------#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#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:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#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:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
background: #F2F2F2;
}
#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-560deg) ;
-webkit-transform: scale(1.2) rotate(-560deg) ;
-o-transform: scale(1.2) rotate(-560deg) ;
-ms-transform: scale(1.2) rotate(-560deg) ;
transform: scale(1.2) rotate(-560deg) ;
}
]]></b:skin>
ADD POPULAR POST WIDGET AND SET SNIPPET OPTION
AND POST NUMBERS
--------------------------------------------------------------------------------------------------
THIS CSS CODE WORKS WITH POPULAR POST ID SUCH AS:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'></b:widget>
--------------------------------------------------------------------------------------------------
YOU CAN CHANGE IMAGE SHAPES IN THIS CASE IT SHOWS IMAGES IN CIRCLES
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
background: #F2F2F2;
}
WHEN YOUR CURSOR ON IMAGES THESE IMAGES ROTATES;
#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-560deg) ;
-webkit-transform: scale(1.2) rotate(-560deg) ;
-o-transform: scale(1.2) rotate(-560deg) ;
-ms-transform: scale(1.2) rotate(-560deg) ;
transform: scale(1.2) rotate(-560deg) ;
}
--------------------------------------------------------------------------------------------------------
READ BELOW THIS FULL CODE YOU CAN ADD THIS CODE IN SIDEBAR HTML
SECTION
--------------------------------------------------------------------------------------------------------
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear:both'/>
<b:else/>
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear:both'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
---------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
OR USE THIS ANIMATED POPULAR POST WIDGET CSS CODE
---------------------------------------------------------------------------------------------------------
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;left:-27px;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#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:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#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:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
Related movie you might like to see :

ON LINE JAVA LIBRARY

GOOGLE PROJECT HOSTING

PRESTASHOP THUMBNAIL WITH HOVER EFF...

GOOGLE FILTER BUTTON IN IMAGE SEARC...

BODY JS FILE LINK IN MAGENTO

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
?
+
X
Recommended for you
Loading..
Related Post for PopularPostWidget Style1
ABSOLUTE POPUP BOX WITH PRINT ----------------------------------------------------------------------------------------------------------------- POP BOX WITHOUT JAVA CODE 1: COPY AND PASTE BELOW CODE IN POSā¦
SSL WEBSITE CHECKER FOR FACEBOOK -------------------------------------------------------------------------------------------------------- READ MORE: I F YOUR WEBSITE SSL CERTIFICATE CHECK TWO THINGS &nā¦
CHANGE MENU CSS COLOR IN PRESTASHOP ---------------------------------------------------------------------------------------------------------------------- OR USE THIS CODE INSIDE FILE C:\wamp\www\PrestaShop\themā¦
PRESTASHOP THUMBNAIL WITH HOVER EFFECT ----------------------------------------------------------------------------------------------------------- PRESTASHOP THUMBNAIL WITH HOVER EFFECT STEP1: GO INSIDE IN BELOW LINā¦
Popular Posts Widget for Blogger Tweak ---------------------------------------------------------------------------------------------------------- 1- ADD POPULAR POST WIDGET IN BLOG 2- ADD HTML/JAVA WIDGET IN BLOG Aā¦
HOME FEATURE TAB CHANGE IN PRESTASHOP ------------------------------------------------------------------------------------------------------------------ AFTER PRESTA SHOP INSTALLATION FIND REQUIRE FILE ONEā¦
PRESTA CSS JS FILE LINKS REMOVE BY DELETE FILES ------------------------------------------------------------------------------------------------------------------ YOU TUBE LINK https://youtu.be/UbE4O--D9i4?list=PL4AC2C4F0F53ā¦
BLOGGER GRID LIST SHOPPING CART TEMPLATE ---------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE READ MORE: http://fbgadgets.blogspot.co.uā¦
PHP CONTACT FORM WITH CAPTCHA ------------------------------------------------------------------------------------------------------------------ BEFORE SEND MESSAGE 1) FIRST SOVLE SMTP PROBLEM ā¦
PRESTASHOP HOME PAGE TAB BREAD CRUMBS STYLE ----------------------------------------------------------------------------------------------------------------- YOUTUBE LINK: https://www.youtube.com/watch?v=96BeqS8bueU 0) ā¦
SHOPPING CART IN SIDEBAR TEMPLATE METHOD HOW TO ADD POST IN THIS TEMPLATE SHOPPING CART IN SIDEBAR TEMPLATE http://fbgadgets.blogspot.co.uk/2014/08/shopping-cart-template-with-view-cart.html http://fbgadgeā¦
RENAME CORE FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME Core To COAT 1) GOā¦
RECENT/FEATURED POST THUMBNAIL IMAGE IN SIDEBAR ---------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE -----------------------------------------------------ā¦
ADD POP UP REMOVER STEP 2: Remove FocusBase pop-up ads from Internet Explorer, Firefox and Google Chrome with AdwCleaner The AdwCleaner utility will scan your computer and web browser for ā¦
POPULAR POST WIDGET ADOSOSIVE STYLE -------------------------------------------------------------------------------------------------------- 1- USE THIS OR OTHER TEMPLATE Read More For Multi Colors:http://fbgadgā¦
BLOG HOSTING HELP DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ā¶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVEā¦
BLOGGER GRID LIST SHOPPING CART TEMPLATE ---------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/blogger-grid-listā¦
NEWS TICKER BLOGGER TEMPLATES ---------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODEIN BLOGGER TEMPLATE -----------------ā¦
POST LOADER TEMPLATE -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE --------------------------------------------ā¦
RENAME CSS FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME css To CAT 1) BEFOā¦
MAKE WODPRESS THEME ------------------------------------------------------------------------------------------------------------------------ MAKE AND SAVE ALL FILE ONE BY ONE IN SAME FOLDER -ā¦
DRAG AND DROP MULTIPLE UPLOAD ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------ā¦
RENAME CACHE FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME cache To CASH 1) Gā¦
Recommended Post Slide out for Blogger ---------------------------------------------------------------------------------------------------- RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube ā¶ 2:50 https:/ā¦
RECAPTCHA REGISTER FORM READ MORE: http://patrickdesjardins.com/blog/how-to-add-recaptcha-to-your-asp-net-mvc4-register-form http://www.wpfreeware.com/tutorial/15-free-wordpress-rating-plugins/ ā¦
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE EDIT HTML PAGE IN GOOGLE - YouTube ā¶ 4:19 https://www.youtube.com/watch?v=Q4yfMqPFSYE 16 mins ago - Uploaded by SAVE MONEY http://fbgadgets.blogspot.co.uk/2016/09/ā¦
GENERIC BLOGGER TEMPLATE WITH CSS HEADER IMAGE AND PAGINATION ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE READ MORE BUTTON WITHOUT VARIABLE CODā¦
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE RED JAVA CODE AND JAVA FILE LINK PAGā¦
RENAME DOWNLOAD FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME download To DOG 1ā¦
Direct Link Generator CODE ----------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------------------ā¦
Platinum Arts Sandbox Free 3D Game Maker ----------------------------------------------------------------------------------------------------- READ MORE: ------------------------------------------------------ā¦
GOOGLE PROJECT HOSTING ------------------------------------------------------------------------------------------------------------- STEP:1 LOGIN YOUR GOOGLE ACCOUNT STEP:2 GO TO SITE https://code.ā¦
RENAME CONTROLLERS FOLDER IN PRESTASHOP ------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME contrā¦
PAGE NAVIGATION WITH TITLE AND THUMBNAIL BY HTML/JAVA WIDGET ------------------------------------------------------------------------------------------------------- ADD HTML/JAVA WIDGET IN BLOG COPY AND PASTE BELOW CODE ---------------ā¦
CANVAS GAMES TUTORIAL ON FACE BOOK Facebook enables game developers to add social features into their games, providing rich social interactions between players while improving virality and enabling organic growtā¦
POPULAR POST SCROLL IN SIDEBAR TEMPLATE -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE --------------------------------------------ā¦
FREE SLL CERFICATE BY AZURE MICROSOFT FOR FACEBOOK READ MORE: http://azure.microsoft.com/en-us/documentation/articles/cloud-services-configure-ssl-certificate/#step1 http://azure.microsoft.com/en-us/pricing/free-trial/ ā¦
RENAME PDF FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME pdf To PAK 1) ā¦
UNITY 3D DECOMPILER OBFUSCATOR Unity3d decompiler - unpack data from the compiled .unity3d project to the specified directory. This item is available for .unity3d projects (Web Player, Web Player Streamedā¦
DEFAULT BOOT STRAP WORD IN 13 FILES PRESTASHOP ------------------------------------------------------------------------------------------------------------------ 1.C:\wamp\www\PrestaShop\README.md 2.&nbsā¦
RENAME ADAPTER FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME adapter To APPLEā¦
BASIC TEXT OR SCROLL BOX OR IMAGE SRC HTML CODES ------------------------------------------------------------------------------------------------------ CODE 1 ------------------------------------------------------------------ā¦
POPULAR POST WIDGET DIFFERENT STYLES ------------------------------------------------------------------------------------------------------ STYLE 1: ---------------------------------------------------------------ā¦
PAGINATION IN BLOG ---------------------------------------------------------------------------------------------------------- 1- FIND BODY CLOSE TAG AND REPLACE WITH BELOW CODE READ MORE: http:/ā¦
AFTER INSTALL PRESTASHOP MAKE NEW FOLDERS ----------------------------------------------------------------------------------------------------------------- BEFORE INSTALL PRESTASHOP TWO BLANK FOLDERS CACHE SMARTYā¦
RECENT OR FEATURE POST LIST BADGE WIDGET WITH GOOGLE PROJECT ----------------------------------------------------------------------------------------------------------- ADD HTML JAVA WIDGET AND PASTE BELOW CODE CHANGE BLOG URL FIND THIā¦
SHOPPING CART IN SIDEBAR TEMPLATE ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE: REMAINING PART http://fbgadgets.blogspoā¦
FONT LINE FIND IN PRESTA SHOP FILE SEEK SOFTWARE -------------------------------------------------------------------------------------------------------------------------- USEFULL LINKS http://alternativeto.net/software/fileseā¦
SELL YOUR APPS READ MORE: http://www.chupamobile.com/app-source-code ā¦
25 JS FILES DELETE IN PRESTASHOP ------------------------------------------------------------------------------------------------------------------ NO:1 JS FILE DELETE jquery-1.11.0.min.js FILE IN ā¦
RENAME DOCS FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME docs To ā¦
AMAZON CLOUD DRIVE 4. Upload or Create a Book Cover https://kdp.amazon.com/title-setup/AE765ZNTFBBPJ https://kdp.amazon.com/help?topicId=A3CDGNR40RY9I9&ref_=kā¦
POST LOADER TEMPLATE ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE ---------------------------------------ā¦
Facebook App With or Without SSL Certificate How to Make Your Facebook App SSL Secure Facebook recently determined that they wanted to go all Ć¢ā¬ÅSSL-Only.Ć¢ā¬Ā This shouldn't be new news to anyone but hasā¦
Labels:
P
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.