Saturday, 31 May 2014
POPULAR POST SCROLL IN SIDEBAR TEMPLATE
--------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
------------------------------------------------------------------------------------------------------------
<html>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: SCROLL POPULAR POST IN SIDEBAR TEMPLATE
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
/*****************************************
Global Links CSS CHANGE LINK INTO BUTTON
******************************************/
a{ color: #4690B3; outline:none; text-decoration: none; }
a:hover { color: #3e3e3e; text-decoration:none; }
/*======================
Popular Post
=========================*/
.popular-posts ul { padding-left: 0; counter-reset:trackit }
.popular-posts ul li {
border: 1px solid #D0E6F0;
list-style: none outside none !important;
margin: 0 0px 5px 10px !important;
padding: .7em 0em 0.5em 0em!important;
transition: all 0.25s linear 0s;
counter-increment: trackit;
position: relative;
background: #DDF1FF;
}
/* Counter Reset :before */
.PopularPosts .widget-content ul li:before {
content: counters(trackit,".");
float: left;
position: absolute;
font-size: 20px;
background: #3498DB;
padding: 4px 10px;
margin: 0px;
left: -13px;
top: 35px;
color: #FFF;
}
.PopularPosts .item-thumbnail img {
display: block;
float: left;
margin-right: 8px;
border: 1px solid #CCC;
padding: 0;
width: 80px;
height: 80px;
}
.PopularPosts .item-title {
padding-bottom: .2em;
line-height: 1.4em;
font-family: arial;
font-size: 17px;
}
.PopularPosts .item-snippet {
font-size: 12px;
line-height: 1.5em;
}
.popular-posts {
border-top: 1px solid #CCC;
padding: 10px 10px;
overflow-y: scroll;
max-height: 630px;
}
/*========================
Label
===========================*/
.Label ul {
list-style: none;
padding: 0;
margin: 0;
}
.Label ul li {
margin: 0 auto 20px;
padding: 0;
list-style: none;
}
.Label li a {
background: #3498DB;
padding: 3px 8px;
color: #FFF;
margin: 0 5px 5px 0;
float: left;
}
.Label li span{
background: #155F8F;
padding: 3px 8px;
color: #FFF;
margin: 0 5px 5px 0;
float: left;
}
/*============
Sidebar CSS
=============*/
.sidebar{ margin: 0; padding: 0; display: block; }
.sidebar-wrapper {
width: 300px;
padding: 25px 15px 25px 10px;
float: right;
background: #EEE;
border: 1px solid #DDD;
margin: 40px 10px 40px;
}
.sidebar h2 {
font-size: 18px;
font-weight: normal;
text-transform: none;
background: #015996;
position: relative;
padding: 5px 10px 6px;
display: block;
margin: 0;
color: #FCFEFF;
text-align: center;
box-shadow: inset 0px 0px 0px 1px #0C4D94;
}
.sidebar .widget {
clear: both;
font-size: 16px;
line-height: 26px;
margin-bottom: 25px;
background: #FFF;
display: table;
width: 100%;
padding: 0px 1px 15px;
box-shadow: inset 0px 0px 0px 1px #DDD;
}
.sidebar .widget-content {
border-top: 1px solid #CCC;
padding: 10px 10px;
}
.sidebar ul{ margin:0; padding:0; list-style:none; }
.sidebar li{ margin: 0 0 0 15px; padding: 0 0 5px; text-transform: capitalize; }
]]></b:skin>
</head>
<!--<body>-->
<body>
<div class='outer-wrapper'>
<div class='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div><!-- /main-wrapper -->
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='PopularPosts2' 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"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<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"'>
<!-- (3) Show only thumbnails -->
<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/>
<!-- (4) Show snippets and thumbnails -->
<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>
<b:widget id='Label2' locked='false' title='We Write About This' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
</div>
</b:includable>
</b:widget>
</b:section>
</div><!-- /sidebar-wrapper -->
<div class='clr'/>
</div><!-- /outer-wrapper -->
<div class='clr'/>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------
POPULAR POST WIDGET WITH NO IMAGE WITHOUT JAVA CODE
----------------------------------------------------------------------------------------------------------
#PopularPosts1 img {float:left;margin:0 10px 0 5px}
#PopularPosts1 dd {margin:5px 0 10px}
]]></b:skin>
---------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------
STEP 2: FIND THESE LINES AND POPULAR POST
WIDGET CODE IN YOUR SIDE BAR
<b:section class='sidebar' id='sidebar' preferred='yes'></b: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'>
<dd>
<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/>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='55px' width='55px'/>
<b:else/>
<img alt='no image' height='55px' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/s55/no-image.png' width='55px'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div style='clear:both'/>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
----------------------------------------------------------------------------------------------------------
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>
-----------------------------------------------------------------------------------------------------------
READ MORE:
http://fbgadgets.blogspot.co.uk/2014/07/popular-post-widget-with-no-image.html
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment