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
Related movie you might like to see :
POST DATE HEADER IN BLOG
HTML SYNTAX HIGHLIGHTER
HTML CSS GREEN COMMENTS NOTEPAD++
EDIT IMAGE IN NOTEPAD++
NOTEPAD++ REMOVE UNWANTED LINES
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
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 for POPULAR POST SCROLL IN SIDEBAR TEMPLATE
ONLINE ZIP OPNER
RECAPTCHA KEY CONTCAT FORM FOR BLOGGER
POST LOADER TEMPLATE
SHOPPING CART IN SIDEBAR TEMPLATE
Related Posts Widget Square Shapes ThumbNails
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE
RAINBOW RANDOM POST CODE WITH BLOG URL BUT NO IMAGE
RADIO BUTTON SLIDER TO KEY FRAME SLIDER
Random/Recent/Feature Posts Button In Blogger
BASIC TEXT OR SCROLL BOX OR IMAGE SRC HTML CODES
JAVA COLOR PICKER WITH
RELATED POST WIDGET FRONT SCREEN TEMPLATE
MAKE DLL FILE AND OPEN IN VISUAL BASIC 2008-2010
RELATED POST WIDGET WITH SOCIAL WIDGET
RELATED POST WIDGET WITH GOOGLE CODE FILE
SHOPPING CART IN SIDEBAR TEMPLATE
POPULAR POST WIDGET DIFFERENT STYLES
BLOGGER INCLUDABLE SECTION 
Platinum Arts Sandbox Free 3D Game Maker
Recommended Post Slide out for Blogger
IMAGE UPLOAD WITH JAVA WITH PHP CODE
POPULAR POST SCROLL IN SIDEBAR TEMPLATE
NEWS TICKER BLOGGER TEMPLATES
HOW USE SHOPPING CART BLOGGER TEMPLATE PART 2
Related PostWidget WithFirst Big Thumbnail
RECENT/FEATURED POST THUMBNAIL IMAGE IN SIDEBAR
RECOMMENDED POST SLIDE OUT FOR BLOGGER TEMPLATE
Recent Posts Widget With 3D And Metro Style Border
BOOTSNIPP LOGIN SIGNUP FORM
Related Posts Widget With Marquee Scrolling Effect
RECENT OR FEATURED POST SLIDER AFTER FOOTER
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.