Recommended Random Posts Blogger2

Recommended Random Posts Blogger - Sebelumnya saya telah mengulas membuat Rekomendasi Posts Blogger. Masih dalam topik yang sama, namun berbeda pada pada Jquery. Pada Recommended random posts kali ini dibuat lebih sederhana mudah untuk dipahami.

Widget Recommended random posts ini disertakan gambar dan Readmore, widget ini akan terbuka saat discroll kebawah dan dilengkapi tombol (x) close. Untuk penerapnnya pun lebih simple dari sebelumnya, berikut ini langkah-langkahnya :

CSS

.slidebox {
position:fixed;
bottom:100px;
right:-300px;
width:290px;
height:150px;
font-size:30px;
color:white;
background: -moz-linear-gradient(center top , #FFF, #EEE) repeat scroll 0% 0% transparent;
transition:all .4s ease-in-out;
padding-right:10px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius:3px 0 0 3px;
}

.header-slidebox{
position:absolute;
top:0;
left:0;
text-align:left;
font-family:Arial;
font-size:18px;
font-weight:400;
background:#505050;
border-bottom:1px solid #282828;
padding:0 10px;
height:30px;
width:100%;
line-height:30px;
border-radius:3px 0 0;
}

.closeslidebox{
color:#333;
position:absolute;
top:0px;
right:0px;
font-family:Arial;
font-size:18px;
font-weight:700;
cursor:pointer;
background:#ddd;
text-align:center;
width:30px;
height:30px;
line-height:30px;
border-bottom:1px solid #282828;
transition:all .3s ease-in-out;
}

.closeslidebox:hover{
background:#cacaca;
}

#random-posts img{
float:left;
margin:0 10px 10px 0;
background:#FFF;
width:130px;
height:100px;
padding:0;
transition:all .3s ease-in-out;
border-radius:3px;
}

#random-posts img:hover{
    opacity:.7;
}

ul#random-posts{
list-style:none;
margin-top:40px;
margin-left:-30px;
font-family:Arial;
font-size:16px;
line-height:1.2em;
}

ul#random-posts li a{
color:#eee;
text-decoration:none;
}

.readmorerandom a{
position:absolute;
bottom:0;
right:0;
font-family:Arial;
font-size:14px;
font-weight:400;
background:#505050;
text-align:center;
display:block;
padding:2px 8px;
transition:all .3s ease-in-out;
color:#eee!important;
border-radius:3px 0 0
}

.readmorerandom:hover a{
color:#333!important;
background:#cacaca;
}

Kode HTML dan Jquery

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='slidebox'>
<div class='header-slidebox'>Recommended Post</div>
<ul id='random-posts'>
<script type='text/javascript'>
//<![CDATA[
var rdp_numposts=1;
var rdp_snippet_length=100;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://lh5.googleusercontent.com/-hxY0rTdcuyM/UfUyPpaoBKI/AAAAAAAACsQ/vFtqfUwj074/s72-no/no-image.PNG"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" title="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'">'+rdp_posttitle+'</a></div>');document.write('<div class="readmorerandom"><a href="'+rdp_posturl+'" rel="nofollow" title="Read More">Read More</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
//]]>
</script>
</ul>
<div class='closeslidebox'>&#215;</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('.slidebox').stop().animate({ right: '0px' });
}
});
$(function() {
$('.closeslidebox').click(function () {
$('.slidebox').css({right:'-300px'});
$('.slidebox').fadeOut();
});
});
});

//]]>
</script>
</b:if>

Pada Recommended Random Posts ini widget akan muncul ketika halaman discroll kebawah dan ketika tombol (x) Close diklik widget ini tidak akan muncul kembali walaupun telah discroll berulang-ulang.

Penjelasan :
Terjadinya tidak munncul pada widget teradapt sebuah pengaturan pada script yang perlu dihilangkan, hilangkan kode $('.slidebox').fadeOut(); agar widget dapat muncul kembali saat discroll terdapat dibagian bawah. Dan untuk menghilangkan tulisan Readmore silahkan hilangkan pada kode CSS readmorerandom dan JavaScriptnya.

Sekian dan terimaksih, semoga bermanfaat!

Subscribe to receive free email updates: