There are several ways to make visitors to stay much longer to read another article or content in a blog / website such as related posts, recent posts or recommended posts. In the tutorial below show you how to make a sliding box with random posts as recommendation to read more.Basically this box container can show with another type of content such as recent posts including images, links, or something. Whatever content type that you want to present, you can present them in a simple, more interactive and efficient ways.
This main feature automatically will show up after the readers scroll to the bottom of a page, set up with simple JavaScript, come to the left with sliding effect showing another posts whether it's related or may be some links to make visitors to explore more. This tutorial actually will show a sliding box to display random posts, but you can modify it if you want to display something else.
Recommendation Posts With Sliding Box On Blog
The script code is very lightweight, tiny size about 1-2kb, so the loading page will normaly open. Only takes a few minutes to add this feature, here are the step by step to apply:1. Add the following code above
]]></b:skin> or </style> in head section.CSS Sliding Box
#recommendsliding {
background: #fff;
border-top: 1px solid #bbb;
box-shadow: 0 3px 10px 3px #002E47;
transition: all 0.4s ease-out;
width: 355px;
height: auto;
position: fixed;
overflow: hidden;
border: none;
right: -360px;
z-index: 99999;
text-align: left!important;
letter-spacing: 0;
}
.recommendsliding-title {
background: #00BFFC;
border-top: 1px solid #ddd;
color: #fff;
display: block;
height: 40px;
width: 100%;
font-size: 14px;
font-family: Arial, sans-serif;
text-transform: capitalize;
font-weight: bold;
padding-right: 25px;
}
.recommendsliding-title span a{
float: right;
height: 30px;
width: 25px;
}
#recommendsliding-close {
width: 40px;
height: 40px;
}
#recommendsliding-minimize {
width: 30px;
height: 40px;
}
#recommendsliding-maximize {
width: 30px;
height: 40px;
}
.recommendsliding-title > span > h2 {
font-size: 20px!important;
font-weight: normal!important;
}
.recommendsliding-title span a img {
margin: 16px;
border: 0 !important;
width: auto;
}
.recommendsliding-container {
border: none;
float: left;
width: 100%;
height: auto;
margin: 3px;
}
.recommendsliding-container > div {
border: none;
height: auto;
margin: 0;
padding: 0;
}
.recommendsliding-container > div > span {
font-size: 14px;
}
.recommendsliding-container img {
float: left;
margin: 3px 5px;
width: 25px;
border: 1px solid #ccc;
}
.show-recommendsliding {
bottom: 50px;
}
.hide-recommendsliding {
bottom: -130px;
}
/*--Recommendation Post--*/
.random-posts {
border:none;
margin:0px;
width:auto;
}
.random-posts ul {
list-style: square;
margin: 10px 0 10px 0;
padding: 0 15px 0px 30px;
line-height: 1.4em;
}
.random-posts li {
margin: 0;
border-bottom: 1px dotted #DBDBDB;
padding: 5px 0 5px 0;
}
.random-posts a {
text-decoration:none;
font: bold 13px arial;
text-align:left;
color:#1111AF;
}
.random-posts a:hover {
color:#000;
}Note: Try first without editing.
Blue color is CSS style for random post for Blogger in sliding box container.
2. Add the following Jquery script code above the
</head>JQuery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>Note: If you already add any similar JQuery above with another version, then skip the step.
3. Add the following JavaScript code above the
</head>Javascript
<script type='text/javascript'>
$(window).scroll(function(){
if ($(this).scrollTop() > 300) {
$("#recommendsliding").css({"right":"0px"});
}
else {
$("#recommendsliding").css({"right":"-360px"});
}
});
$(document).ready(function(){
var recommendsliding = $("#recommendsliding");
var closed = $("#recommendsliding-close");
var minimize = $("#recommendsliding-minimize");
var maximize = $("#recommendsliding-maximize");
maximize.hide();
closed.click(function(){
recommendsliding.css({"right":"-350px"});
recommendsliding.fadeOut("slow");
})
minimize.click(function(){
recommendsliding.toggleClass("hide-recommendsliding");
$(this).hide-recommendsliding ();
maximize.show-recommendsliding ();
})
maximize.click(function(){
recommendsliding.toggleClass(".show-recommendsliding");
$(this).hide-recommendsliding ();
minimize.show-recommendsliding ();
})
});
</script>
<!-- Recommendation Posts Script -->
<script type='text/javascript'>//<![CDATA[
var randarray = new Array();var l=0;var flag;
var numofpost=3;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>Note: Try first without editing.
Blue color is an example for sliding box container, I add this sliding with random posts for Blogger but actualy you can add with something.
3. Add following code somewhere before
</body> .HTML and JavaScript
<div class='show-recommendsliding' id='recommendsliding'>
<div class='recommendsliding-title'>
<span style='float: left;margin:14px 0 0 15px;'>Recommendation</span>
<span><a href='javascript:void(0);' id='recommendsliding-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdzRw1zeFySC-o3bcI0J4FGAmazvxKOtdNZ6Ym0QBeuYikC1AH3nJvwakO5jSYvb00EbtlCiapDiZvxdhdNN8RgxPRQ5pXhRB6y7-tNrQUc8JIS6nnI4mg4YtW2jsuf5prgEnVZSEh/s1600/close.png' title='close'/></a></span>
<span><a href='javascript:void(0);' id='recommendsliding-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiglgKld4nvarDsnWx1o5Q8-Cvhxy46-wfk454rwAp0uunxGVpJCf5dKSS0fHt0Sc9KrNtdM1fd-638xxmJh3O6HPaqKYx8rKnfrBqcuwyN3Q8kMDEedzk0YVogQm9gpRPzTXtuwv1G/s1600/minimize.png' title='minimize'/></a></span>
<span><a href='javascript:void(0);' id='recommendsliding-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-P_8KChFxJYD3pCy_RG3_8wy1CKEQjRCRukx_11VJLdPM8ZVq06egJV3ble-Vxv37YgtLXZHXt-omXPcQV9bBFi5UwUyaENe-6nZNmS9qnt5OOeteUMmm_k2laNBZoQK2dkwhPm_O/s1600/maximize.png' title='maximize'/></a></span>
</div>
<div class='recommendsliding-container'>
<div class='random-posts'>
<script src='/feeds/posts/default?alt=json-in-script&start-index=1&max-results=9999&callback=randomposts' type='text/javascript'/>
</div>
</div>
</div>Green color are link icon for close, minimize and maximize, You should change these links icon with your own links. And Orange is the container, you can add this with something else.
4. Save Template, and see the results.
Hopefully can be useful. Thank's for read.
