Sunday, 19 October 2014
POPULAR POST WIDGET DIFFERENT STYLES


------------------------------------------------------------------------------------------------------
STYLE 1:
------------------------------------------------------------------------------------------------------
.popular-posts ul { padding-left: 0px; counter-reset: popcount; } .popular-posts ul li:before { list-style-type: none; margin-right: 15px; padding: 0.3em 0.6em; counter-increment: popcount; content: counter(popcount); font-size: 16px; background: #292D30; color: #ffffff; position: relative; font-weight: bold; font-family: georgia; float: left; border: 2px solid #dddddd; box-shadow: 1px 2px 9px #666666; } .popular-posts ul li { border-bottom: 1px dashed #dddddd; } .popular-posts ul li:hover { border-bottom: 1px dashed #696969; } .popular-posts ul li a { text-decoration:none; color:#5A5F63; } .popular-posts ul li a:hover { text-decoration:none; }
------------------------------------------------------------------------------------------------------
STYLE 2:
------------------------------------------------------------------------------------------------------
.popular-posts { margin: 10px 0px 5px 0px;} .popular-posts ul{padding-left:0px; font: normal 13px Arial, Tahoma, Verdana;} .popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS-L-YzUzg9De2Jp55eBFkCJUGCNiUJP1Y72N4YAAYdLwuCs7SzJcqpv_QN1E1jwL2BxT-A5TCYzQp-JGx6aZYX-J9l1dvJ_hHSbvZ294PAzPkqBJJbnJDL8mx1_QQbIDpmPIjXqwuzaRb/s320/BS+Arrow.www.bloggerspice.com.png) no-repeat 2px; list-style-type: none; margin: 0 0 5px 0px; padding: 5px 5px 5px 30px !important; border: 1px solid #dddddd; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .popular-posts ul li:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUt9K-M7rnaN9wIDRJIV2XY9ydAVhwJW7ig39YMRDucsUoJjb20lmMBfvf8twdGPn0dj4Dzmu2CsqjcowbXGtVq3TrJ39o8pM2HDGCi5Y3M_vZGyFW2Zvu5RApIB4JXfg5gnJ7kSV1zM2i/s320/BS+Arrow.png) no-repeat 2px; border: 1px solid #992211; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .popular-posts ul li a:hover { text-decoration:none; }
STYLE 3:
------------------------------------------------------------------------------------------------------
STYLE 4:
------------------------------------------------------------------------------------------------------
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li:hover { border:4px groove #fff; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -webkit-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } #PopularPosts1 ul li a { -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #ffffff; 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: 0px; 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:10px; background:transparent; padding:0; width:51px; height:51px; } #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%; -moz-border-radius:50%; -webkit-border-radius:50%; border:2px solid #ccc; background:#353535; box-shadow:0px 0px 5px #000; -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:#fff; } #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{ background:#000000; width:90%; } #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 + li + li +li{background:#1a1a1a;width:93%} #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 {background:#C50101;width:93%} #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{background:#1a1a1a;width:93%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#C50101;width:93%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#1a1a1a;width:93%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#C50101;width:93%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#1a1a1a;width:93%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#C50101; width:93%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#1a1a1a ;width:93%} #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: 1px solid #c2c0b8; -webkit-box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.02) inset, 0 5px 0 -4px #222, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #222, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #222, 0 17px 0 -11px #c2c0b8; -moz-box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.02) inset, 0 5px 0 -4px #222, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #222, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #222, 0 17px 0 -11px #c2c0b8; box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.02) inset, 0 5px 0 -4px #222, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #222, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #222, 0 17px 0 -11px #c2c0b8; padding:10px; } .PopularPosts .item-title a{ font: normal bold 36px Segoe UI; font-size:16px; color: #ffffff; } .PopularPosts .item-title a:hover{ color:#ffffff; text-decoration:none; } .widget-content.popular-posts li{ font: normal normal 16px Segoe UI; } .item-snippet { height:2.5em; overflow:hidden; }
STYLE 5: (ZOOM EFFECT)
------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------
Step 1: the CSS code
Copy the following css code and paste it before </head> tag
-----------------------------------------------------------------------------------------------------------------
<style type='text/css'> .popular-posts ul { list-style: none; padding: 0; } .popular-posts ul li { float: left; width: 150px; height: 150px; padding: 10px !important; overflow: hidden; box-sizing: border-box; position: relative; } .popular-posts .item-thumbnail { margin: 0; background-color: #000; } .popular-posts img { height: 100%; width: 100%; box-sizing: border-box; padding:0; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .popular-posts .item-content:hover img, .popular-posts .item-thumbnail-only:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); opacity: 0.5; } .popular-posts .item-title a { color: #fff; position: absolute; text-align: center; left: 12px; right: 12px; bottom: 40px; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .popular-posts .item-content:hover .item-title a, .popular-posts .item-thumbnail-only:hover .item-title a { opacity: 1; visibility: visible; } .popular-posts .item-snippet { display: none; } </style>
----------------------------------------------------------------------------------------------------------------
Step 2: the Java code
Copy the following java code and paste it before </body> tag
-----------------------------------------------------------------------------------------------------------------
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> <script type='text/javascript'> $('.popular-posts .item-snippet').remove(); $('.popular-posts img').attr('src', function(e, t) { return t.replace('/s72-c/', '/s200-c/') }); </script>
----------------------------------------------------------------------------------------------------------
POPULAR POST WIDGET WITH SCROLL EFFECT
<style type='text/css'>
#mainisi,#maintop,.sidebar .widget {
border:1px solid lightGrey;
background:#F8F8F8;
padding:5px
}
.sidebar .widget {
margin-bottom:10px
}
.post h2.post-title,.post h1.post-title {
padding:5px 0;
font-size:180%
}
#maintop .popular-posts ul,#maintop .popular-posts li,#maintop .PopularPosts .item-thumbnail,#maintop .PopularPosts img,#maintop .PopularPosts .item-thumbnail a {
padding:0;
margin:0;
list-style:none;
display:block
}
#maintop .PopularPosts .item-title,#maintop .PopularPosts .item-snippet {
position:absolute;
left:-9999px
}
#maintop .PopularPosts .item-thumbnail a {
width:118px;
height:118px;
padding:2px
}
#maintop .PopularPosts img {
border:1px solid #D1D1D1;
margin-right:0;
padding:5px;
width:100%
}
#maintop {
overflow:hidden;
margin-bottom:10px;
position:relative
}
#maintop .popular-posts li {
display:inline-block;
float:left;
width:118px;
height:118px
}
.wrapper {
height:119px;
overflow:hidden;
width:590px;
margin:0 auto
}
#maintop1 h2 {
color:#000000;
font-family:Arial, Tahoma, Helvetica, FreeSans, sans-serif;
font-size:20px;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin:0 0 1em;
}
.arrow {
position:absolute;
top:72px;
display:block;
height:41px;
width:20px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz0-Bri9SJD2rET2nYpY3qdYNY04TI0ZPrxSmWBFnJ0wKS8pkCs4pZo0yga7UubeYwraejj8k1M39hWZ2MN96jpbx20e_ehGAfufDzC8MRuOWufgQ-HHoEdDdT9ANVKXHotohRttJPwzY/w40/nav.png);
background-repeat:no-repeat;
background-position:0 0;
text-indent:-9999px;
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
-ms-transition:none;
transition:none
}
.back {
left:10px;
background-position:0 -1px
}
.back:hover {
background-position:0 -41px
}
.forward {
right:10px;
background-position:-19px -1px
}
.forward:hover {
background-position:-19px -41px
}
#midside h2 {
position:absolute;
left: -9999px
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
(function(){$.fn.infiniteCarousel=function(){function a(b,c){return new Array(c+1).join(b)}return this.each(function(){var d=$("> div",this).css("overflow","hidden"),e=d.find("> ul").width(9999),f=e.find("> li"),b=f.filter(":first");singleWidth=b.outerWidth(),visible=Math.ceil(d.innerWidth()/singleWidth),currentPage=1,pages=Math.ceil(f.length/visible);if(f.length%visible!=0){e.append(a('<li class="empty" />',visible-(f.length%visible)));f=e.find("> li")}f.filter(":first").before(f.slice(-visible).clone().addClass("cloned"));f.filter(":last").after(f.slice(0,visible).clone().addClass("cloned"));f=e.find("> li");d.scrollLeft(singleWidth*visible);function c(h){var g=h<currentPage?-1:1,j=Math.abs(currentPage-h),i=singleWidth*g*visible*j;d.filter(":not(:animated)").animate({scrollLeft:"+="+i},500,function(){if(h>pages){d.scrollLeft(singleWidth*visible);h=1}else{if(h==0){h=pages;d.scrollLeft(singleWidth*visible*pages)}}currentPage=h})}d.after('<a href="#" class="arrow back"><</a><a href="#" class="arrow forward">></a>');$("a.back",this).click(function(){c(currentPage-1);return false});$("a.forward",this).click(function(){c(currentPage+1);return false});$(this).bind("goto",function(g,h){c(h)});$(this).bind("next",function(){c(currentPage+1)})})}})(jQuery);$(document).ready(function(){var a=true;$(".widget-content.popular-posts").infiniteCarousel().mouseover(function(){a=false}).mouseout(function(){a=true});setInterval(function(){if(a){$(".widget-content.popular-posts").trigger("next")}},2000)});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$('.post a[href$=".jpg"], .post a[href$=".png"], .post a[href$=".gif"], .post a[href$=".bmp"]').attr('class','colorbox');
$(window).bind("load", function() {$(".colorbox").colorbox({maxWidth:"95%", maxHeight:"95%",fixed:true});});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('.item-thumbnail img').each(function() {
$(this).attr({
'src': $(this).attr('src').replace('/s72-c/', '/s110-c/'),
'width': 110, 'height': 110
});
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/w"+b+"-c");d[a].width=b}}resizeThumb("main",150);
//]]></script>
</head>
<div id='maintop'>
<b:section class='main' id='maintop1'>
<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'>
<div class='wrapper'>
<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' expr:title='data:post.title' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img alt='no image' class='post-thumbnail' src='http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif'/>
</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' expr:title='data:post.title' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img alt='no image' class='post-thumbnail' src='http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif'/>
</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>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Related movie you might like to see :

ON LINE JAVA LIBRARY

GOOGLE PROJECT HOSTING

PRESTASHOP THUMBNAIL WITH HOVER EFF...

RADIO BUTTON SLIDER TO KEY FRAME SL...

RELATED POST WIDGET WITH SOCIAL WID...

NEWS TICKER BLOGGER TEMPLATES

RELATED POST WIDGET FRONT SCREEN TE...

RECAPTCHA KEY CONTCAT FORM FOR BLOG...

ONLINE ZIP OPNER

JAVA COLOR PICKER WITH

RECENT OR FEATURED POST SLIDER AFTE...

Random/Recent/Feature Posts Button ...

Related PostWidget WithFirst Big Th...

MAKE DLL FILE AND OPEN IN VISUAL BA...

GOOGLE CONSOLE

GOOGLE CHROME EXTENSION FILE SAVE O...

OPEN DESKTOP TEXT FILE BY COMMAND P...

BUTTON PADDING CHANGE HEIGHT WIDTH

INPUT BUTTON VALUE SWAP

CSS SYNTAX HIGHLIGHT CHANGE IN NOT...
?
+
X
Recommended for you
Loading..
Related Post for POPULAR POST WIDGET DIFFERENT STYLES
FLASH 8 DOWNLOAD DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKS&n…
FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON ----------------------------------------------------------------------------------------------------------- ReadMore: http://codepen.io/desandro/pen/bNLGNZ view-source:http://s…
BRICK WALL MENU BAR CODE -------------------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE http://fbgadgets.blogspo…
BLOG ZOOM EFFECT THUMBNAIL ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE READ MORE: http://www.mastemplate.com/20…
FIREBUG LITE USE OFFLINE ------------------------------------------------------------------------------------------------------------- 1)GET CSS CODE BY COPY CSS SELECTOR OR GOOGLE INSPECT 2) OR GET CSS…
FLICKITY JS CSS SLIDER ----------------------------------------------------------------------------------------------------------------------- ReadMore: https://flickity.metafizzy.co/ NEED 1 CSS FIL…
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/fla…
RADIO BUTTON SLIDER TO KEY FRAME SLIDER ------------------------------------------------------------------------------------------------------------ Read More: https://codepen.io/macbobbitt_/pen/jmEBL https://codepe…
Direct Links to your Files on Google Drive DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINK…
DYNAMIC VIEWS BLOGGER TEMPLATE -------------------------------------------------------------------------------------------------------------- CODE: -----------------------------------------------------------…
MOUSE COORDINATES IN JAVA SCRIPT -------------------------------------------------------------------------------------------------------------- mouse coordinates finder on website https://chrome.google.com/web…
ON LINE JAVA LIBRARY -------------------------------------------------------------------------------------------------------- READ MORE: https://cdnjs.com/libraries https://code.angularjs.org/ http…
WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection htt…
GOOGLE FILTER BUTTON IN IMAGE SEARCH ------------------------------------------------------------------------------------------------------ SEARCH IN GOOGLE: Google Image Search and search for any query,&nbs…
BODY JS FILE LINK IN MAGENTO ------------------------------------------------------------------------------------------------------------- SEARCH IN GOOGLE file content software https://www.google.co.uk/s…
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.