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(http://2.bp.blogspot.com/-gZQHq9yzgdI/UTXmVtP32NI/AAAAAAAAB8U/xP_9cdhQxD0/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(http://4.bp.blogspot.com/-65z9RrF7ig0/UTXl83WOVaI/AAAAAAAAB8I/81zEs4k8RX0/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(http://3.bp.blogspot.com/-G23oP0clP4s/UK2uYNdHnFI/AAAAAAAAG0Q/uOGxi0L3yrY/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>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment