RECENT OR FEATURED POST SLIDER AFTER FOOTER

Wednesday, 15 October 2014

RECENT OR FEATURED POST SLIDER AFTER FOOTER

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5cfgTkUT5J5qiWiIGesu6i3ewTot3rXLNK7_UlkK4I7adLzetYjEESQDstN-Gd31AN-lYnEFNF-YnCupXtocAVZSv-A_7n8y-xfNfWN6M_5Lfwy7l8Us41cRHVUcMqZ06pYqYpoQ9-QHY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsISan_HevVyEgoOQysEZ__LNtuyPKNGVTx-h4UUHg6Ri5RzpYoCmfz25XnrLkjBabTHolTZU2uOPctGaDHYaqpzqG33Qx0eZ85TATb1CdJ5QezRK-f-aybtmC60HTcPx8TPKgMYph9kz6/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTQDOOisshWzVaRd4lCp9q4YogG3svw2qBtIgOcdGJvRvReDMQ_qafGbutVk3ygxGNF97hIgfjyHFVOm15yF5PRg_yDNs4yByM1vF4wKq0ks_vgzotzszigpbGy_v8dhl6kM4Q2PgE9HM/h120/no-image.jpg",
pkBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV3_j8m6aNJ6Oz9kfXltEQe64MbARUdeRI5ltBXy1jpfBMi4ZddLXuDyVP6nnAvDWzjJMnhyLR8RTtfuLSfjkKzojAVOWN7Y4GL_yk2q5zRdg_-zlPe9pXlaNHr1Q84NfcOjCwq72C1HY/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
------------------------------------------------------------------------------------------------------------

body {

background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5cfgTkUT5J5qiWiIGesu6i3ewTot3rXLNK7_UlkK4I7adLzetYjEESQDstN-Gd31AN-lYnEFNF-YnCupXtocAVZSv-A_7n8y-xfNfWN6M_5Lfwy7l8Us41cRHVUcMqZ06pYqYpoQ9-QHY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsISan_HevVyEgoOQysEZ__LNtuyPKNGVTx-h4UUHg6Ri5RzpYoCmfz25XnrLkjBabTHolTZU2uOPctGaDHYaqpzqG33Qx0eZ85TATb1CdJ5QezRK-f-aybtmC60HTcPx8TPKgMYph9kz6/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>

//<![CDATA[

var numpostx = 12,

thumbSize = 110,

contjumlah = 0,

cmtext = "Comments",

pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTQDOOisshWzVaRd4lCp9q4YogG3svw2qBtIgOcdGJvRvReDMQ_qafGbutVk3ygxGNF97hIgfjyHFVOm15yF5PRg_yDNs4yByM1vF4wKq0ks_vgzotzszigpbGy_v8dhl6kM4Q2PgE9HM/h120/no-image.jpg",

pkBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV3_j8m6aNJ6Oz9kfXltEQe64MbARUdeRI5ltBXy1jpfBMi4ZddLXuDyVP6nnAvDWzjJMnhyLR8RTtfuLSfjkKzojAVOWN7Y4GL_yk2q5zRdg_-zlPe9pXlaNHr1Q84NfcOjCwq72C1HY/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>

</span>

</div>

</footer>

------------------------------------------------------------------------------------------------------------------

OR USE THIS CSS CODE

-------------------------------------------------------------------------------------------------------------------

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh78E2iPDKrJQO008UBHerLhVQykp656gNd2TwCJo2hMsPHKbvJlhAOqSnsbK-LI-RSzEHAKkMSfkWqQYlC5sByhz8SqnlTZXRKVMBAOEA6wfIowFuxUN9sprlxqaWGzHzgEyNiJilQ_pMj/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;

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

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw-1fv5vKZrkyiM5AfXoZTuYCET6FEDV2xGzJ9lhE5icrcORXE5HCAT2I81wiapD0x-u9I8GQzEw5D_RTESfMytXarU8adJ9rw2TDUREsDvdBqjzQBLczTdlZvAi_mTGQTPYXpevsPwl2Q/s1600/No+Image+1.gif";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw-1fv5vKZrkyiM5AfXoZTuYCET6FEDV2xGzJ9lhE5icrcORXE5HCAT2I81wiapD0x-u9I8GQzEw5D_RTESfMytXarU8adJ9rw2TDUREsDvdBqjzQBLczTdlZvAi_mTGQTPYXpevsPwl2Q/s1600/No+Image+1.gif";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw-1fv5vKZrkyiM5AfXoZTuYCET6FEDV2xGzJ9lhE5icrcORXE5HCAT2I81wiapD0x-u9I8GQzEw5D_RTESfMytXarU8adJ9rw2TDUREsDvdBqjzQBLczTdlZvAi_mTGQTPYXpevsPwl2Q/s1600/No+Image+1.gif";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw-1fv5vKZrkyiM5AfXoZTuYCET6FEDV2xGzJ9lhE5icrcORXE5HCAT2I81wiapD0x-u9I8GQzEw5D_RTESfMytXarU8adJ9rw2TDUREsDvdBqjzQBLczTdlZvAi_mTGQTPYXpevsPwl2Q/s1600/No+Image+1.gif";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw-1fv5vKZrkyiM5AfXoZTuYCET6FEDV2xGzJ9lhE5icrcORXE5HCAT2I81wiapD0x-u9I8GQzEw5D_RTESfMytXarU8adJ9rw2TDUREsDvdBqjzQBLczTdlZvAi_mTGQTPYXpevsPwl2Q/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

----------------------------------------------------------------------------------------------------------------

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv2V8akCpMyPD3vwNeSykMNaaiXg-rIutrU25fsNztcJftBPaeQIUusqUevZYdtxcwgfuaTjuLoee581BW169Lumrf6n6lj2AVRCR4HChQr49WcY7nhWU5HapyRaa_3bRbtb1mE38F5dg/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>

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

//<![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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_LVrjpTo2Z8FjsauoOceipjUIakj0APYVJVPn7GupCZVVBP45KzBxtG89aUrVLtThouB-SzYhLJhwrqnhwEBm86TJQzxOBs8TlGypg5DwBv2kTjVCW29nvBDZk1IKTfroBoCgnz3OAE4m/s1600/bullet_star.png) 0% 50% no-repeat scroll transparent;

line-height:1.5em;

margin:0;

padding:0 0 0.25em 15px;

}

</style>

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>