Wednesday 15 October 2014
RECENT OR FEATURED POST SLIDER AFTER FOOTER
-------------------------------------------------------------------------------------------------------------
COPY AND POST CODE
READ MORE:
http://fbgadgets.blogspot.co.uk/2014/06/recent-postin-blog-with-loader-effect.html
http://fbgadgets.blogspot.co.uk/2014/05/recentfeatured-post-thumbnail-image-in.html
-------------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML dir='ltr' lang='id' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700|Electrolize' rel='stylesheet' type='text/css'/>
<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: BLOG POST THUMBNAILS WITH SLIDER EFFECT
- Support Video Thumbnail
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
]]></b:skin>
<style type='text/css'>
body {
background:#f5f5f5 url(https://lh6.googleusercontent.com/2ii4hJJEHbLdvcj1UJteiwNmRu6XWZxVY4-mj7A--atB=s200-p-no);
color:#222;
font-family:Electrolize,sans-serif;
margin:0;
padding:0
}
h1,h2,h3,h4,h5,h6 {
font-family: Oswald,cursive
}
a {
color:#63C4F1;
text-decoration:none
}
a:hover {
color:#000;
text-decoration:none
}
a img:hover {
opacity:0.7
}
.clearfx {
clear:both
}
#outer-wrapper {
position:relative;
width:960px;
text-align:left;
box-shadow:0 0 10px #000;
margin:0 auto
}
#content-wrapper {
position:relative;
background:#fff;
margin:0 auto;
padding:0
}
#main-wrapper {
background:#fff;
position:relative;
width:64%;
float:left;
word-wrap:break-word;
overflow:hidden;
margin:0 auto;
padding:5px 1%
}
#featured-wrap {
border-bottom:1px solid #000;
box-shadow:0 1px 0 0 #333;
background:#111;
position:relative;
height:175px;
margin:0 auto
}
#featured {
border:2px solid #444;
outline:1px solid #000;
position:relative;
width:88%;
height:150px;
overflow:hidden;
top:10px;
margin:0 auto
}
#featured ul {
width:9999px
}
#featured ul,#featured li {
list-style:none;
padding:0;
margin:0;
overflow:hidden
}
#featured li {
width:150px;
display:inline-block;
float:left;
height:150px;
background:#222;
border-left:1px solid #111;
border-right:1px solid #333;
}
.thumb-featured {
width:140px;
height:100px;
margin:5px auto;
overflow:hidden;
border:1px solid #000
}
.thumb-featured img {
display:block;
width:134px;
height:94px;
border:3px solid #444;
}
.title-featured {
text-align:center;
position:relative;
margin-top:-20px
}
.title-featured h4 {
font-size:90%;
max-height:45px;
overflow:hidden
}
.arrow {
position:absolute;
display:block;
background:#111 url(http://3.bp.blogspot.com/-dX4PBIM-zag/VD5O7VqX-5I/AAAAAAABVbM/aKEOsG1ImL0/s1600/icon-sprite.png)no-repeat;
background-position:0 50%;
width:35px;
height:60px;
top:50px;
text-indent:-9999px;
border:1px solid #000;
box-shadow:0 0 0 1px rgba(51,51,51,1)inset
}
.arrow.back {
background-position:0 50%;
left:10px
}
.arrow.forward {
background-position:100% 50%;
right:10px
}
.scroll-top {
position:fixed;
background:#111;
width:20px;
height:20px;
bottom:10px;
right:15px;
white-space:nowrap;
cursor:pointer;
opacity:0.7;
padding:7px
}
.scroll-top:after {
content:'
'
;
width:0;
height:0;
position:absolute;
bottom:10px;
left:7px;
border:10px solid transparent;
border-color:transparent transparent #63C4F1
}
.scroll-bottom {
position:fixed;
background:#111;
width:20px;
height:20px;
bottom:10px;
right:55px;
white-space:nowrap;
cursor:pointer;
opacity:0.7;
padding:7px
}
.scroll-bottom:after {
content:'
'
;
width:0;
height:0;
position:absolute;
bottom:0;
left:7px;
border:10px solid transparent;
border-color:#63C4F1 transparent transparent
}
</style>
</head>
<body>
<div id='outer-wrapper'>
<div class='clearfx'/>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div class='clearfx'/>
</div>
<footer id='footer-wrapper'>
<div class='clearfx'/>
<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'/>
</div>
</div>
</footer>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
var numpostx = 12,
thumbSize = 110,
contjumlah = 0,
cmtext = "Comments",
pBlank = "https://lh5.googleusercontent.com/-mSufUJ214bg/Uo94DjMjnbI/AAAAAAAAGoA/1q7su-tZBkc/h120/no-image.jpg",
pkBlank = "https://lh6.googleusercontent.com/-UZxZHJ71o1A/Uo95CAOG-7I/AAAAAAAAGoI/8hk05V-amCo/h120/no-avatar.jpg",
numcomment = 5,
thumbcsize = 70,
cmsumm = 100;
$(document).ready(function(){$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results="+numpostx+"",type:"get",dataType:"jsonp",success:function(g){var k,n,b,m,h,d="",o=g.feed.entry;if(o!==undefined){d="<ul>";for(var f=0;f<o.length;f++){for(var e=0;e<o[f].link.length;e++){if(o[f].link[e].rel=="alternate"){k=o[f].link[e].href;break}}for(var c=0;c<o[f].link.length;c++){if(o[f].link[c].rel=="replies"&&o[f].link[c].type=="text/html"){h=o[f].link[c].title.split(" ")[0];break}}if("content" in o[f]){n=o[f].content.$t}else{if("summary" in o[f]){n=o[f].summary.$t}else{n=""}}if("media$thumbnail" in o[f]){postimg=o[f].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+thumbSize+"-c")}else{postimg=pBlank}var p=/<\S[^>]*>/g;n=n.replace(p,"");if(n.length>contjumlah){n=n.substring(0,contjumlah)}b=o[f].title.$t;m=o[f].published.$t.substring(0,10),m=m.replace(/-/g,"/");d+='<li><div class="thumb-featured"><a href="'+k+'" target="_blank"><span><img alt="'+b+'"src="'+postimg+'"title="'+b+'" /></span></a></div><div class="title-featured"><h4><a href="'+k+'" title="'+b+'" target="_blank">'+b+'</a></h4><div class="datex"><span class="dt">'+m+'</span><span class="cm">'+h+" "+cmtext+'</span></div></div><div class="contxisi">'+n+"</div></li>"}d+="</ul>";$("#featured").html(d);(function(){$.fn.infiniteCarousel=function(){function i(j,l){return new Array(l+1).join(j)}return this.each(function(){var q=$("> div",this).css("overflow","hidden"),r=q.find("> ul").width(9999),s=r.find("> li"),j=s.filter(":first");singleWidth=j.outerWidth(),visible=Math.ceil(q.innerWidth()/singleWidth),currentPage=1,pages=Math.ceil(s.length/visible);if(s.length%visible!=0){r.append(i('<li class="empty" />',visible-(s.length%visible)));s=r.find("> li")}s.filter(":first").before(s.slice(-visible).clone().addClass("cloned"));s.filter(":last").after(s.slice(0,visible).clone().addClass("cloned"));s=r.find("> li");q.scrollLeft(singleWidth*visible);function l(u){var t=u<currentPage?-1:1,w=Math.abs(currentPage-u),v=singleWidth*t*visible*w;q.filter(":not(:animated)").animate({scrollLeft:"+="+v},3000,function(){if(u>pages){q.scrollLeft(singleWidth*visible);u=1}else{if(u==0){u=pages;q.scrollLeft(singleWidth*visible*pages)}}currentPage=u})}q.after('<a href="#" class="arrow back"><</a><a href="#" class="arrow forward">></a>');$("a.back",this).click(function(){l(currentPage-1);return false});$("a.forward",this).click(function(){l(currentPage+1);return false});$(this).bind("goto",function(t,u){l(u)});$(this).bind("next",function(){l(currentPage+1)})})}})(jQuery);var a=true;$("#featured-wrap").infiniteCarousel().mouseover(function(){a=false}).mouseout(function(){a=true});setInterval(function(){if(a){$("#featured-wrap").trigger("next")}},8000)}else{$("#featured").html("<span>No result!</span>")}},error:function(){$("#featured").html("<strong>Error Loading Feed!</strong>")}});$.ajax({url:"/feeds/comments/default?alt=json-in-script&max-results="+numcomment+"",type:"get",dataType:"jsonp",success:function(n){var f,a,c,m,g,h,b="",j=n.feed.entry;if(j!==undefined){b="<ul>";for(var e=0;e<j.length;e++){for(var d=0;d<j[e].link.length;d++){if(j[e].link[d].rel=="alternate"){m=j[e].link[d].href;break}}if("content" in j[e]){f=j[e].content.$t}else{if("summary" in j[e]){f=j[e].summary.$t}else{f=""}}if(j[e].author[0].gd$image.src=="http://img1.blogblog.com/img/blank.gif"){a=pkBlank}else{a=j[e].author[0].gd$image.src.replace(/\/s[0-9]+(\-c|\/)/,"/s"+thumbcsize+"$1")}var l=/<\S[^>]*>/g;c=(j[e].author[0].uri)?j[e].author[0].uri.$t:"#nope";g=j[e].author[0].name.$t;f=f.replace(l,"");if(f.length>cmsumm){f=f.substring(0,cmsumm)+"..."}h=j[e].gd$extendedProperty[1].value;b+='<li><div class="kmtimg"><a rel="nofollow" href="'+m+'"><span><img src="'+a+'" title="'+g+'" alt="'+g+'"/></span></a></div><div class="ketkomt"><a rel="nofollow" href="'+m+'" title="'+g+'" class="tooltip">'+g+"</a><span>"+h+'</span></div><div class="komtsum">'+f+"</div></li>"}b+="</ul>";$("#rcentcomnets").html(b)}else{$("#rcentcomnets").html("<span>No result!</span>")}},error:function(){$("#rcentcomnets").html("<strong>Error Loading Feed!</strong>")}})});(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();$(function(){var $elem=$('body');$('#scroll-top').fadeIn('slow');$('#scroll-bottom').fadeIn('slow');$(window).bind('scrollstart',function(){$('#scroll-top,#scroll-bottom').stop().animate({'opacity':'0.2'})});$(window).bind('scrollstop',function(){$('#scroll-top,#scroll-bottom').stop().animate({'opacity':'1'})});$('#scroll-bottom').click(function(e){$('html, body').animate({scrollTop:$elem.height()},800)});$('#scroll-top').click(function(e){$('html, body').animate({scrollTop:'0px'},800)})});
//]]>
</script>
</body>
</HTML>
----------------------------------------------------------------------------------------------------------
USE IMAGES IN THIS TUTORIAL
------------------------------------------------------------------------------------------------------------
USE UPPER CODE IN HTML/ JAVA WIDGET
------------------------------------------------------------------------------------------------------------
<style type='text/css'>
body {
background:#f5f5f5 url(https://lh6.googleusercontent.com/2ii4hJJEHbLdvcj1UJteiwNmRu6XWZxVY4-mj7A--atB=s200-p-no);
color:#222;
font-family:Electrolize,sans-serif;
margin:0;
padding:0
}
h1,h2,h3,h4,h5,h6 {
font-family: Oswald,cursive
}
a {
color:#63C4F1;
text-decoration:none
}
a:hover {
color:#000;
text-decoration:none
}
a img:hover {
opacity:0.7
}
.clearfx {
clear:both
}
#outer-wrapper {
position:relative;
width:960px;
text-align:left;
box-shadow:0 0 10px #000;
margin:0 auto
}
#content-wrapper {
position:relative;
background:#fff;
margin:0 auto;
padding:0
}
#main-wrapper {
background:#fff;
position:relative;
width:64%;
float:left;
word-wrap:break-word;
overflow:hidden;
margin:0 auto;
padding:5px 1%
}
#featured-wrap {
border-bottom:1px solid #000;
box-shadow:0 1px 0 0 #333;
background:#111;
position:relative;
height:175px;
margin:0 auto
}
#featured {
border:2px solid #444;
outline:1px solid #000;
position:relative;
width:88%;
height:150px;
overflow:hidden;
top:10px;
margin:0 auto
}
#featured ul {
width:9999px
}
#featured ul,#featured li {
list-style:none;
padding:0;
margin:0;
overflow:hidden
}
#featured li {
width:150px;
display:inline-block;
float:left;
height:150px;
background:#222;
border-left:1px solid #111;
border-right:1px solid #333;
}
.thumb-featured {
width:140px;
height:100px;
margin:5px auto;
overflow:hidden;
border:1px solid #000
}
.thumb-featured img {
display:block;
width:134px;
height:94px;
border:3px solid #444;
}
.title-featured {
text-align:center;
position:relative;
margin-top:-20px
}
.title-featured h4 {
font-size:90%;
max-height:45px;
overflow:hidden
}
.arrow {
position:absolute;
display:block;
background:#111 url(http://3.bp.blogspot.com/-dX4PBIM-zag/VD5O7VqX-5I/AAAAAAABVbM/aKEOsG1ImL0/s1600/icon-sprite.png)no-repeat;
background-position:0 50%;
width:35px;
height:60px;
top:50px;
text-indent:-9999px;
border:1px solid #000;
box-shadow:0 0 0 1px rgba(51,51,51,1)inset
}
.arrow.back {
background-position:0 50%;
left:10px
}
.arrow.forward {
background-position:100% 50%;
right:10px
}
.scroll-top {
position:fixed;
background:#111;
width:20px;
height:20px;
bottom:10px;
right:15px;
white-space:nowrap;
cursor:pointer;
opacity:0.7;
padding:7px
}
.scroll-top:after {
content:'
'
;
width:0;
height:0;
position:absolute;
bottom:10px;
left:7px;
border:10px solid transparent;
border-color:transparent transparent #63C4F1
}
.scroll-bottom {
position:fixed;
background:#111;
width:20px;
height:20px;
bottom:10px;
right:55px;
white-space:nowrap;
cursor:pointer;
opacity:0.7;
padding:7px
}
.scroll-bottom:after {
content:'
'
;
width:0;
height:0;
position:absolute;
bottom:0;
left:7px;
border:10px solid transparent;
border-color:#63C4F1 transparent transparent
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
var numpostx = 12,
thumbSize = 110,
contjumlah = 0,
cmtext = "Comments",
pBlank = "https://lh5.googleusercontent.com/-mSufUJ214bg/Uo94DjMjnbI/AAAAAAAAGoA/1q7su-tZBkc/h120/no-image.jpg",
pkBlank = "https://lh6.googleusercontent.com/-UZxZHJ71o1A/Uo95CAOG-7I/AAAAAAAAGoI/8hk05V-amCo/h120/no-avatar.jpg",
numcomment = 5,
thumbcsize = 70,
cmsumm = 100;
$(document).ready(function(){$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results="+numpostx+"",type:"get",dataType:"jsonp",success:function(g){var k,n,b,m,h,d="",o=g.feed.entry;if(o!==undefined){d="<ul>";for(var f=0;f<o.length;f++){for(var e=0;e<o[f].link.length;e++){if(o[f].link[e].rel=="alternate"){k=o[f].link[e].href;break}}for(var c=0;c<o[f].link.length;c++){if(o[f].link[c].rel=="replies"&&o[f].link[c].type=="text/html"){h=o[f].link[c].title.split(" ")[0];break}}if("content" in o[f]){n=o[f].content.$t}else{if("summary" in o[f]){n=o[f].summary.$t}else{n=""}}if("media$thumbnail" in o[f]){postimg=o[f].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+thumbSize+"-c")}else{postimg=pBlank}var p=/<\S[^>]*>/g;n=n.replace(p,"");if(n.length>contjumlah){n=n.substring(0,contjumlah)}b=o[f].title.$t;m=o[f].published.$t.substring(0,10),m=m.replace(/-/g,"/");d+='<li><div class="thumb-featured"><a href="'+k+'" target="_blank"><span><img alt="'+b+'"src="'+postimg+'"title="'+b+'" /></span></a></div><div class="title-featured"><h4><a href="'+k+'" title="'+b+'" target="_blank">'+b+'</a></h4><div class="datex"><span class="dt">'+m+'</span><span class="cm">'+h+" "+cmtext+'</span></div></div><div class="contxisi">'+n+"</div></li>"}d+="</ul>";$("#featured").html(d);(function(){$.fn.infiniteCarousel=function(){function i(j,l){return new Array(l+1).join(j)}return this.each(function(){var q=$("> div",this).css("overflow","hidden"),r=q.find("> ul").width(9999),s=r.find("> li"),j=s.filter(":first");singleWidth=j.outerWidth(),visible=Math.ceil(q.innerWidth()/singleWidth),currentPage=1,pages=Math.ceil(s.length/visible);if(s.length%visible!=0){r.append(i('<li class="empty" />',visible-(s.length%visible)));s=r.find("> li")}s.filter(":first").before(s.slice(-visible).clone().addClass("cloned"));s.filter(":last").after(s.slice(0,visible).clone().addClass("cloned"));s=r.find("> li");q.scrollLeft(singleWidth*visible);function l(u){var t=u<currentPage?-1:1,w=Math.abs(currentPage-u),v=singleWidth*t*visible*w;q.filter(":not(:animated)").animate({scrollLeft:"+="+v},3000,function(){if(u>pages){q.scrollLeft(singleWidth*visible);u=1}else{if(u==0){u=pages;q.scrollLeft(singleWidth*visible*pages)}}currentPage=u})}q.after('<a href="#" class="arrow back"><</a><a href="#" class="arrow forward">></a>');$("a.back",this).click(function(){l(currentPage-1);return false});$("a.forward",this).click(function(){l(currentPage+1);return false});$(this).bind("goto",function(t,u){l(u)});$(this).bind("next",function(){l(currentPage+1)})})}})(jQuery);var a=true;$("#featured-wrap").infiniteCarousel().mouseover(function(){a=false}).mouseout(function(){a=true});setInterval(function(){if(a){$("#featured-wrap").trigger("next")}},8000)}else{$("#featured").html("<span>No result!</span>")}},error:function(){$("#featured").html("<strong>Error Loading Feed!</strong>")}});$.ajax({url:"/feeds/comments/default?alt=json-in-script&max-results="+numcomment+"",type:"get",dataType:"jsonp",success:function(n){var f,a,c,m,g,h,b="",j=n.feed.entry;if(j!==undefined){b="<ul>";for(var e=0;e<j.length;e++){for(var d=0;d<j[e].link.length;d++){if(j[e].link[d].rel=="alternate"){m=j[e].link[d].href;break}}if("content" in j[e]){f=j[e].content.$t}else{if("summary" in j[e]){f=j[e].summary.$t}else{f=""}}if(j[e].author[0].gd$image.src=="http://img1.blogblog.com/img/blank.gif"){a=pkBlank}else{a=j[e].author[0].gd$image.src.replace(/\/s[0-9]+(\-c|\/)/,"/s"+thumbcsize+"$1")}var l=/<\S[^>]*>/g;c=(j[e].author[0].uri)?j[e].author[0].uri.$t:"#nope";g=j[e].author[0].name.$t;f=f.replace(l,"");if(f.length>cmsumm){f=f.substring(0,cmsumm)+"..."}h=j[e].gd$extendedProperty[1].value;b+='<li><div class="kmtimg"><a rel="nofollow" href="'+m+'"><span><img src="'+a+'" title="'+g+'" alt="'+g+'"/></span></a></div><div class="ketkomt"><a rel="nofollow" href="'+m+'" title="'+g+'" class="tooltip">'+g+"</a><span>"+h+'</span></div><div class="komtsum">'+f+"</div></li>"}b+="</ul>";$("#rcentcomnets").html(b)}else{$("#rcentcomnets").html("<span>No result!</span>")}},error:function(){$("#rcentcomnets").html("<strong>Error Loading Feed!</strong>")}})});(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();$(function(){var $elem=$('body');$('#scroll-top').fadeIn('slow');$('#scroll-bottom').fadeIn('slow');$(window).bind('scrollstart',function(){$('#scroll-top,#scroll-bottom').stop().animate({'opacity':'0.2'})});$(window).bind('scrollstop',function(){$('#scroll-top,#scroll-bottom').stop().animate({'opacity':'1'})});$('#scroll-bottom').click(function(e){$('html, body').animate({scrollTop:$elem.height()},800)});$('#scroll-top').click(function(e){$('html, body').animate({scrollTop:'0px'},800)})});
//]]>
</script>
<footer id='footer-wrapper'>
<div class='clearfx'/>
<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'/>
</span>
</div>
</div>
</div>
</footer>
------------------------------------------------------------------------------------------------------------------
OR USE THIS CSS CODE
-------------------------------------------------------------------------------------------------------------------
<style type='text/css'>
h1,h2,h3,h4,h5,h6 {
font-family: Oswald,cursive
}
a {
color:#63C4F1;
text-decoration:none
}
a:hover {
color:#000;
text-decoration:none
}
a img:hover {
opacity:0.7
}
.clearfx {
clear:both
}
#outer-wrapper {
position:relative;
width:960px;
text-align:left;
box-shadow:0 0 10px #000;
margin:0 auto
}
#content-wrapper {
position:relative;
background:#fff;
margin:0 auto;
padding:0
}
#featured-wrap {
border-bottom:1px solid #000;
box-shadow:0 1px 0 0 #333;
background:url(http://4.bp.blogspot.com/-_97zMHtaDcM/VBvmM2X8FOI/AAAAAAABU78/XO8-DN_OHbQ/s300-c/Stars.gif);
position:relative;
height:175px;
margin:0 auto
}
#featured {
border:2px solid #444;
outline:1px solid #000;
position:relative;
width:88%;
height:150px;
overflow:hidden;
top:10px;
margin:0 auto
}
#featured ul {
width:9999px
}
#featured ul,#featured li {
list-style:none;
padding:0;
margin:0;
overflow:hidden
}
#featured li {
width:150px;
display:inline-block;
float:left;
height:150px;
background:url(http://4.bp.blogspot.com/-_97zMHtaDcM/VBvmM2X8FOI/AAAAAAABU78/XO8-DN_OHbQ/s300-c/Stars.gif);
border-left:1px solid #111;
border-right:1px solid #333;
}
.thumb-featured {
width:140px;
height:100px;
margin:5px auto;
overflow:hidden;
border:1px solid #000
}
.thumb-featured img {
display:block;
width:134px;
height:94px;
border:3px solid #444;
}
.title-featured {
text-align:center;
position:relative;
margin-top:-20px
}
.title-featured h4 {
font-size:90%;
max-height:45px;
overflow:hidden
}
.arrow {
position:absolute;
display:block;
background:#111 url(http://3.bp.blogspot.com/-dX4PBIM-zag/VD5O7VqX-5I/AAAAAAABVbM/aKEOsG1ImL0/s1600/icon-sprite.png)no-repeat;
background-position:0 50%;
width:35px;
height:60px;
top:50px;
text-indent:-9999px;
border:1px solid #000;
box-shadow:0 0 0 1px rgba(51,51,51,1)inset
}
.arrow.back {
background-position:0 50%;
left:10px
}
.arrow.forward {
background-position:100% 50%;
right:10px
}
.scroll-top {
position:fixed;
background:#111;
width:20px;
height:20px;
bottom:10px;
right:15px;
white-space:nowrap;
cursor:pointer;
opacity:0.7;
padding:7px
}
.scroll-top:after {
content:'
'
;
width:0;
height:0;
position:absolute;
bottom:10px;
left:7px;
border:10px solid transparent;
border-color:transparent transparent #63C4F1
}
.scroll-bottom {
position:fixed;
background:#111;
width:20px;
height:20px;
bottom:10px;
right:55px;
white-space:nowrap;
cursor:pointer;
opacity:0.7;
padding:7px
}
.scroll-bottom:after {
content:'
'
;
width:0;
height:0;
position:absolute;
bottom:0;
left:7px;
border:10px solid transparent;
border-color:#63C4F1 transparent transparent
}
</style>
--------------------------------------------------------------------------------------------------------------
OR USE THIS RECENT POST WIDGET IN SIDEBAR MOVE UP TO DOWN
----------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------
1- ADD HTML?JAVA WIDGET IN BLOG LAYOUT
2-COPY AND PASTE BELOW CODE
3- CHANGE BLOG URL
-----------------------------------------------------------------------------------------------------------
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css" media="screen">
<!--
/* ========== Scrolling Recent Posts Widget Start ======== */
#HT-widget {
overflow: hidden;
margin-top: 25px !important;
padding: 0px 0px;
height: 305px;
}
#HT-widget ul {
margin-left: 5px !important;
width: 270px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin-bottom: 5px;
}
#HT-widget li {
margin:5px;
padding:5px 5px 5px 15px !important;
text-indent:0px;
line-height:1.3em;
list-style:none;
display:block;
border-radius: 10px;
border-top:1px solid #e9e9e9;
border-left:1px solid #e9e9e9;
border-right:1px solid #e9e9e9;
border-bottom:1px solid #e9e9e9;
background: #f9f9f9;
color: #FF0000;
-moz-box-shadow: 0 1px 4px #bbb inset;
-webkit-box-shadow: 0 1px 4px #bbb inset;
-ms-box-shadow: 0 4px 4px #bbb inset;
box-shadow: 0 1px 4px #bbb inset;
}
#HT-widget li:hover {
-moz-box-shadow: 0 4px 4px #bbb inset;
-webkit-box-shadow: 0 4px 4px #bbb inset;
-ms-box-shadow: 0 4px 4px #bbb inset;
box-shadow: 0 4px 4px #bbb inset;
}
#HT-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 14.4px;
font-family: Agency FB;
height: 14px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#HT-widget li a:active {
color: #FF0000;
}
#HT-widget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#HT-widget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#HT-widget img:hover {
opacity: 1;
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
-moz-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; rgba(0, 0, 0, .4);
-o-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Arial,verdana, sans-serif;
}
.spycomment {
overflow: hidden;
font-family: Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}
/* ========== Scrolling Recent Posts Widget Ends ======== */
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
imgr[1] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
imgr[2] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
imgr[3] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
imgr[4] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 12;
home_page = "http://fbgadgets.blogspot.co.uk/";
limitspy=4;
intervalspy=4000;
</script>
<div id="HT-widget">
<script type='text/javascript'>
//<![CDATA[
/*
* Recent Post with scrolling for blogger.com
* Widget optimized for blogger
* URL - http://fbgadgets.blogspot.co.uk/
* Amazing Recent post widget for blogger
*/
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>
--------------------------------------------------------------------------------------------------------------
OR USE THIS RECENT POST WIDGET IN SIDEBAR
----------------------------------------------------------------------------------------------------------------
<style type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}
ul.rcentside{width:100%;height:500px}
ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}
ul.rcentside img{border:0;width:100%;height:100%}
ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.rcentside li:nth-child(2){left:0;top:50%}
ul.rcentside li:nth-child(3){left:50.5%;top:50%}
ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}
ul.rcentside .overlayx,ul.rcentside li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.rcentside .overlayx,ul.rcentside img{border:4px solid #000000;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B2BtMc5vQHtXTnI4R1B0T1dCUm8" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://fbgadgets.blogspot.co.uk/",
MaxPost:30,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
--------------------------------------------------------------------------------------------------------------
OR USE RANDOM POST WIDGET IN SIDEBAR
----------------------------------------------------------------------------------------------------------------
<style>
.sidebar li {
background:url(http://4.bp.blogspot.com/_Kv5tIcZAMKY/TMb3Hx_UaRI/AAAAAAAAB3I/WbOs3s8DHrA/s1600/bullet_star.png) 0% 50% no-repeat scroll transparent;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 15px;
}
</style>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=9;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://fbgadgets.blogspot.co.uk/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
---------------------------------------------------------------------------------------------------------------------
USE IMAGE IN THIS THUMBNAIL
-----------------------------------------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment