Khusus Percobaan 21

<div id="slider">
    <div class="container">
        <div class="slide"> ... </div>
        <div class="slide"> ... </div>
        <div class="slide"> ... </div>
        <div class="slide"> ... </div>
        <div class="slide"> ... </div>
    </div>
</div>
<nav id="slider-nav"></nav>

/* Slider */
#slider {
  width:300px; /* dimensi lebar */
  height:200px;; /* dimensi tinggi */
  margin:0 auto;
  background-color:black;
  overflow:hidden; /* Sembunyikan muatan elemen '.container' yang berlebih dari '#slider' */
}

#slider .slide {
  width:300px; /* dimensi lebar */
  height:200px; /* dimensi tinggi */
  float:left;
}

#slide-1 {background-color:#F5B800}
#slide-2 {background-color:#9999FF}
#slide-3 {background-color:#FFCC99}
#slide-4 {background-color:#AFCAAF}
#slide-5 {background-color:#9F8BB1}

/* Navigasi */
#slider-nav {
  display:block;
  width:300px;
  margin:10px auto;
  text-align:center;
}

#slider-nav a {
  display:inline-block;
  width:15px;
  height:15px;
  background-color:#bbb;
  font-size:0;
  color:transparent;
  overflow:hidden;
  text-indent:-99px;
  margin:0 2px 0 0;
  border:2px solid white;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
}

#slider-nav .active {
  background-color:green;
}

(function($) {

    var $slider = $('#slider'),
        $container = $slider.find('.container'),
        $nav = $('#slider-nav'),
        $slide = $container.children(),
        s_length = $slide.length,
        s_wide = $slider.width() * s_length,
        s_height = $slider.height(),
        autoSlide = null;

    $container.css({
        'position':'relative',
        'width':s_wide,
        'height':s_height
    });

    $slide.each(function(index) {
        var i = index + 1;
        $nav.append('<a href="#slide-'+i+'">'+i+'</a>');
        $(this).attr('id', 'slide-'+i);
    });

    $nav.find('a').on("click", function(pos) {
        $nav.find('.active').removeClass('active');
        $(this).addClass('active');
        pos = $(this).index() * $slider.width();
        $container.animate({left:'-'+pos+'px'}, 600);
        clearInterval(autoSlide);
        autoSlide = setInterval(slideShow, 3000);
        return false;
    }).first().addClass('active');

    function slideShow() {
        if ($nav.find('.active').next().length) {
            $nav.find('.active').next().trigger("click");
        } else {
            $nav.find('a').first().trigger("click");
        }
    } autoSlide = setInterval(slideShow, 3000);

})(jQuery);

.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;
}

<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>

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