Recommended Random Posts Blogger

Bagaimana membuat Recommended Random Posts Blogger? Silahkan ikuti langkah-langkah berikut. Widget ini akan terbuka (slide) di sisi blog ketika halaman postingan di-scroll atau digulung.


Recommended random posts yang disertai gambar adalah tema artikel kali ini. Widget recommended ini dibuat dengan jquery yang lebih sederhana sehingga akan lebih mudah dipahami dan gampang dalam penulisannya. Widget ini akan terbuka (slide) di sisi blog ketika halaman postingan di-scroll atau digulung dan disembunyikan kembali dengan menekan tombol close.

Bagaimana membuat Recommended Random Posts Blogger? Silahkan ikuti langkah-langkah berikut.

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 JavaScript

Silahkan simpan kode di bawah ini di atas tag </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='slidebox'>
<div class='header-slidebox'>Recommended For You</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>

Widget ini akan muncul ketika halaman blog di-scroll, dan setelah ditutup dengan klik tombol close maka widget ini tidak akan muncul lagi walaupun halaman digulung berulang-ulang.

Beberapa pengaturan!
  1. Jika ingin widget ini bisa keluar lagi ketika halaman di-scroll lagi setelah tombol close diklik, silahkan hapus kode ini $('.slidebox').fadeOut(); pada kumpulan kode javascript yang paling bawah.
  2. Untuk menghilangkan tulisan Readmore, hapus CSS readmorerandom dan JavaScriptnya
Selesai... Selamat mencoba...

COMMENTS

BLOGGER: 4
  1. ...KODE ANDA DI SINI...
    ...KODE SCRIPT ANDA...
    http://2.bp.blogspot.com/-Fdzwfv_cU8U/U056tB_RzsI/AAAAAAAADEU/lBrM_o5aDSc/s1600/hukmat.png
    ...JUDUL ANDA...
    ...CATATAN ANDA...
    ...TEKS ANDA...
    ...TEKS ANDA...

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Recommended Random Posts Blogger
Recommended Random Posts Blogger
Bagaimana membuat Recommended Random Posts Blogger? Silahkan ikuti langkah-langkah berikut. Widget ini akan terbuka (slide) di sisi blog ketika halaman postingan di-scroll atau digulung.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0KoaEUsYGiXYsWZOj67n-5-2AhSX2Kens6JUWis0UJ3ldVczFR0FF24cwC6MALR_a68c5SmtbBiZo5fQa5yeB4GVcQ4HOswd8cJSGchMUnsxflhfTHwENEnnJEjl356AegI7WHX0jtoE/s1600/recommended_random_post_blogger.PNG
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0KoaEUsYGiXYsWZOj67n-5-2AhSX2Kens6JUWis0UJ3ldVczFR0FF24cwC6MALR_a68c5SmtbBiZo5fQa5yeB4GVcQ4HOswd8cJSGchMUnsxflhfTHwENEnnJEjl356AegI7WHX0jtoE/s72-c/recommended_random_post_blogger.PNG
Jelas in Blog
https://jelasinblog.blogspot.com/2014/08/recommended-random-posts-blogger.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/08/recommended-random-posts-blogger.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content