Friday, February 13, 2015

Widget Random Post Slide Out


widget Random Post Muncul Ketika Di Scroll/ Recomended Post Slide Out seperti Wordpress By Muiz-Techno
Recommended random posts/Random post Slide Out yang disertai gambar adalah tema artikel kali ini. Widget ini berguna bagi anda yang ingin meningkatkan SEO Blog anda karena dari recomended post ini pengunjung yang sedang membaca artikel blog anda akan mendapat informasi dipinggir blog tentang artikel acak yang baru saja Anda Posting.Sebelumnya saya sudah membagikan artikel tentang cara membuat widget Recent Post Super simple.

DEMO Ada Di Blog Saya Tapi Berbeda Style.

widget Random Post Muncul Ketika Di Scroll/ Recomended Post Slide Out seperti Wordpress By Muiz-Techno
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...

Tetapi Kalau Anda ingin Widget recomended post seperti saya, anda bisa berkomentar dan akan di posting oleh saya kalau banyak yang komentar postingan ini.
loading...

Anda Sedang Membaca Artikel Tentang Widget Random Post Slide Out Dan Artikel Ini URL Permalinknya Adalah http://muiztech.blogspot.com/2015/02/widget-random-post-slide-out.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner

loading...