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 :

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...

WEB IMAGE DOWNLOADER

TEXT COMPARE OR DUPLI TEXT FINDER

BLOCK JAVA SCRIPT BY GOOGLE CHROME

MOUSE COORDINATES IN JAVA SCRIPT

RELATED POST WIDGET LIST WITHOUT TH...

DYNAMIC VIEWS BLOGGER TEMPLATE
?
+
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ā¦
HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_Uā¦
RADIO BUTTON SLIDER TO KEY FRAME SLIDER ------------------------------------------------------------------------------------------------------------ Read More: https://codepen.io/macbobbitt_/pen/jmEBL https://codepeā¦
FIREBUG LITE USE OFFLINE ------------------------------------------------------------------------------------------------------------- 1)GET CSS CODE BY COPY CSS SELECTOR OR GOOGLE INSPECT 2) OR GET CSSā¦
ON LINE JAVA LIBRARY -------------------------------------------------------------------------------------------------------- READ MORE: https://cdnjs.com/libraries https://code.angularjs.org/ httpā¦
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ā¦
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ā¦
FLICKITY JS CSS SLIDER ----------------------------------------------------------------------------------------------------------------------- ReadMore: https://flickity.metafizzy.co/ NEED 1 CSS FILā¦
RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD </head> TAG AND PASTE BELOW CODE WHEN Wā¦
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/flaā¦
GOOGLE FILTER BUTTON IN IMAGE SEARCH ------------------------------------------------------------------------------------------------------ SEARCH IN GOOGLE: Google Image Search and search for any query,&nbsā¦
WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection httā¦
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.