RANDOM/RECENT/FEATURED POST SLIDER IN BLOG

Wednesday, 21 May 2014

RANDOM/RECENT/FEATURED POST SLIDER IN BLOG

RANDOM/RECENT/FEATURED POST SLIDER IN BLOG

-----------------------------------------------------------------------------------------------------------
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: BLOG POST THUMBNAILS WITH SLIDER EFFECT
- Support Video Thumbnail
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */

body {
background-image: url(http://stuff.pyzam.com/layouts/img/l/o/nvloveintheair.jpg);
background-attachment: fixed;
background-position: center ;
background-repeat: repeat;
}
a:link {
color:$linkcolor;
text-decoration:none;
}

/* WRAPPER
----------------------------------------------- */
#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:0px;
text-align:$startSide;
color: #2D3132;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 13px;
}
#content-wrapper {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXgPKVS9G6hd92qUnPwYW9N-RYM8-ucF55iuTPT29KfkMN8dL1vBQJTQV82rAH-DsYD18VBF34H4hKZx5BsO56m-F3GqpvfWuCf5jsER76XSmSEeM2ZKFnDBwE2g-Ga1I3mroRw20kgNY/s1600/bgr_body.gif) repeat-y scroll 0 0 transparent;
width: 100%;
}
#main-wrapper {
float: left;
padding: 20px 43px 0 58px;
width: 524px;
}
/* START
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/
.crosscol {
font-family: Verdana,Geneva,sans-serif;
overflow: hidden;
padding: 0 0 55px 40px;
width: 488px;
}
#slider-wrapper {
height: 180px;
position: relative;
width: 488px;
overflow: hidden;
}
#slide-container {
height:230px;
position:relative;
width: 100%;
overflow:hidden;
}
#slider {
width: 100%;
height: 220px;
margin: 0px auto 5px;
padding:0px;
left:0px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
}
.slide-desc {
padding: 0;
margin:0;
position:absolute;
z-index:0;
height: 220px;
width:310px;
overflow:hidden;
line-height: 1.4em;
right:0;
}
.slide-desc h2{
color: #2D3132;
font-size: 13px;
line-height: 1.1em;
font-weight:bold;
padding:0;
margin:0;
border:none;
background:none;
display: block;
}
.slide-desc h2:hover{
text-decoration: underline;
}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
width: 488px;
}
#slider img {
border: 3px solid #BEDDE4;
float: left;
height: 136px;
margin: 0 10px 0 0;
width: 157px;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
height:220px;
overflow:hidden;
}
#nextBtn, #slider1next{
z-index: 0;
text-indent: -9999px;
}
#prevBtn, #slider1prev {
z-index: 0;
text-indent: -9999px;
}
#nextBtn a, #slider1next a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqFfBo7APj_TAnCxMQUr9kiDA8FYZgE3racQqVf5NYPJy9ig1tHsfAA789911J71ixFfWj1RsBzaB75310VJRVhbhsXVbihNAR_PKHHuDl7aAjyYCtkwfHAXhbX2aDaanuANw3f3gx3Sk/s1600/next.png) no-repeat scroll center top transparent;
bottom: 0px;
cursor: pointer;
float: left;
height: 25px;
left: 35px;
position: absolute;
width: 25px;
}
#prevBtn a, #slider1prev a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Qz7LAcjFLF32zJAP7LjkakJPcakpgQnPnauEutTn0vOkrlVPVgMQbOOZYPgEiWKwLnM05KRFIL8DjgGsHrZyYO4oAa6oAE88Q1B_mWsKfjzBKmN_4ZQXYmSG5akUGzNLeAxUfL0teFY/s1600/prev.png) no-repeat scroll center top transparent;
bottom: 0px;
cursor: pointer;
float: left;
height: 25px;
left: 0px;
position: absolute;
width: 25px;
}
#prevBtn a:hover, #nextBtn a:hover,
#slider1next a:hover, #slider1prev a:hover {
background-position: center bottom;
}
#body_top {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgudbdPVhNvsq21wjziI1b-S0H6DkHvrv_dygDW8KjmvHpcroccrCY_OSSwrnbdFRr7EYRx43cHbq3XlJX6XpKPnuASDeJFOOVJVL_WaSwtEOMPwCMMeDlK8HXy4t-eMjkjn_xU5Xu9oWI/s1600/bgr_body_top_home.gif) no-repeat scroll 0 0 transparent;
overflow: hidden;
padding: 14px 0 40px;
width: 100%;
}

]]></b:skin>

<b:if cond='data:blog.pageType == "item"'>
<style>
#body_top {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgudbdPVhNvsq21wjziI1b-S0H6DkHvrv_dygDW8KjmvHpcroccrCY_OSSwrnbdFRr7EYRx43cHbq3XlJX6XpKPnuASDeJFOOVJVL_WaSwtEOMPwCMMeDlK8HXy4t-eMjkjn_xU5Xu9oWI/s1600/bgr_body_top_home.gif) no-repeat scroll 0 0 transparent;
overflow: hidden;
padding: 14px 0 40px;
width: 100%;
}
</style>
</b:if>

</head>

<body>

<div id='outer-wrapper'>
<div id='body_top'>
<div id='main-wrapper'>

<div class='crosscol' id='crosscol-wrapper'>
<div class='widget-content'>
<div id="slider-wrapper">
<div id="slider">
<script style="text/javascript">
var showpostthumbnails_gal = true;
var showpostsummary_gal = true;
var random_posts = false;
var numchars_gal = 150;
var numposts_gal = 10;
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul style="overflow:hidden;">');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal = entry_gal.title.$t;
for (var k = 0; k < entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal = entry_gal.link[k].href;
break;
}
}
if ("content" in entry_gal) {
var postcontent_gal = entry_gal.content.$t
}
s = postcontent_gal;
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 != "")) {
var thumburl_gal = d
} else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Iay4C8vszTdzmquHqn_lYno5UvUZDxEyCKWHqRwqrs3ldaLk4dhEciBoLrbx2YrSE1Z2Cim_on3xw46ANulC76NvahzY11W754Ehh7Fs7ZrFs4q42yrSDvk5ocourfibDcUFvUSqKLg/s1600/39130-bigthumbnail.jpg';
document.write('<li><div id="slide-container"><span class="slide-desc"><a href="' + posturl_gal + '"><h2 style="margin:0px 0px;">');
document.write(posttitle_gal + '</h2></a>');
var re = /<\S[^>]*>/g;
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {
document.write(postcontent_gal);
document.write('</span>')
} else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
document.write(postcontent_gal + '...');
document.write('</span>')
}
}
document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="180px" height="180px"/></a></div>');
document.write('</li>');
}
document.write('</ul>');

}
</script>

<script style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 300;
var random_posts = true; // random posts
</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
</div>
</div>
</div>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>

<b:includable id='post' var='post'>
<data:post.body/>
</b:includable>

<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
</div>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div> 

</body>
</html>