Recommended Random Posts Blogger2

Recommended Random Posts Blogger - Sebelumnya aku telah mengulas menciptakan Rekomendasi Posts Blogger. Masih dalam topik yang sama, namun berbeda pada pada Jquery. Pada Recommended random posts kali ini dibentuk lebih sederhana gampang untuk dipahami.

Widget Recommended random posts ini disertakan gambar dan Readmore, widget ini akan terbuka ketika 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="Recommended Random Posts Blogger2"><img alt=" Sebelumnya aku telah mengulas menciptakan Recommended Random Posts Blogger2" title="Recommended Random Posts Blogger2" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="Recommended Random Posts Blogger2">'+rdp_posttitle+'</a></div>');document.write('<div class="readmorerandom"><a href="'+rdp_posturl+'" rel="nofollow" title="Recommended Random Posts Blogger2">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 aba-aba $('.slidebox').fadeOut(); agar widget sanggup muncul kembali ketika discroll terdapat dibagian bawah. Dan untuk menghilangkan goresan pena Readmore silahkan hilangkan pada aba-aba CSS readmorerandom dan JavaScriptnya.

Sekian dan terimaksih, semoga bermanfaat!
Sumber http://www.websiteedukasi.com/