Slide Recommended Widget With Random Posts Blogger

Hal ini tentunya sudah banyak beredar dengan tutorial yang +Kang Ismet buat yang diambil dari jquery sliding statis social widget. Dan kali ini aku akan menciptakan hal serupa adalah slide recommended widget yang diisi dengan random posts yang disertai gambar.

Baca juga: Membuat Sliding Statis Social Widget

Namun kali ini aku akan menciptakan widget recommended ini dengan jquery yang lebih sederhana sehingga akan lebih simpel dipahami dan simpel dalam penulisannya. Seperti telah kita ketahui, widget ini akan terbuka (slide) di sisi blog dikala halaman postingan di-scroll atau digulung dan disembunyikan kembali dengan menekan tombol close. Silahkan lihat demonya pada link di bawah ini.

DEMO ON BLOG | DEMO ON JSFIDDLE

Untuk mencobanya, silahkan copy kode-kode di bawah ini.

Kode CSS

 .slidebox {
     position:fixed;
     bottom:100px;
     right:-300px;
     width:290px;
     height:150px;
     font-size:30px;
     color:white;
     background:#333;
     transition:all .4s ease-in-out;
     padding-right:10px;
     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 arahan di bawah ini di atas arahan </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="Slide Recommended Widget With Random Posts Blogger"><img alt="Slide Recommended Widget With Random Posts Blogger Slide Recommended Widget With Random Posts Blogger" title="Slide Recommended Widget With Random Posts Blogger" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="Slide Recommended Widget With Random Posts Blogger">'+rdp_posttitle+'</a></div>');document.write('<div class="readmorerandom"><a href="'+rdp_posturl+'" rel="nofollow" title="Slide Recommended Widget With Random Posts Blogger">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 dikala halaman blog di-scroll, dan sehabis ditutup dengan klik tombol close maka widget ini tidak akan muncul lagi walaupun halaman digulung berulang-ulang.

Jika ingin widget ini dapat keluar lagi dikala halaman di-scroll lagi sehabis tombol close diklik, silahkan hapus arahan berikut ini pada kumpulan arahan javascript yang paling bawah.

 $('.slidebox').fadeOut();

Selesai... Selamat mencoba...

Sumber https://www.kompiajaib.com/

Share this post