Bài viết ngẫu nhiên cho blogspot ẩn hiện bên thanh trượt

By Unknown

Thứ Ba, 19 tháng 8, 2014

Bài viết ngẫu nhiên (Random Posts) được khá nhiều blogger giới thiệu trước đây nhưng đa số điều viết cố định bên Widget. Ở bài viết này củng giới thiệu cho các bạn bài viết ngẫu nhiên cho blogspot nhưng mình không cho cố định tại Widget mà nó ẩn hiện bên thanh trượt  khi chúng ta kéo xuống giữa trang của bài viết nó hiện ra các bài viết được lấy ra ngẫu nhiên các bài viết trong  blog của bạn.

DEMO

Một tiện ích khá hay và chuyên nghiệp đúng không các bạn.

Bài viết ngẫu nhiên cho blogspot ẩn hiện bên thanh trượt

Chúng ta tiến hành cài đặt tiện ích bài viết ngẫu nhiên vào template thôi nào ?
Bước 1: Đăng nhập vào tài khoản blogger của bạn
Bước 2: Vào Mẫu
Bước 3: Chỉnh sửa HTML
Để hoàn thành tiện ích này chúng ta cần một đoạn CSS và 1 chút jQuery .

CSS bài viết ngẫu nhiên (Random Posts) cho blogspot

/*Random Post*/
.slidebox {
    position:fixed;
    bottom:100px;
    right:-300px;
    width:290px;
    height:300px;
    font-size:30px;
    color:white;
    background:#10CF4D;
    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:#03C0FC;
    border-bottom:3px solid #084AF5;
    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:3px solid #084AF5;
    transition:all .3s ease-in-out;
}
.closeslidebox:hover{
    background:#cacaca;
}
#random-posts img{
    float:left;
    margin:0 10px 10px 0;
    background:#FFF;
    width:75px;
    height:75px;
    padding:0;
    transition:all .3s ease-in-out;
    border-radius:50px;
}
#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;
}

Chúng ta nhấn Ctrl+F tìm dến thẻ ]]></b:skin> chép đoạn CSS trên và dán trước thẻ ]]></b:skin> 

Javascript bài viết ngẫu nhiên (Random Posts cho blogspot

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='slidebox'>
  <div class='header-slidebox'>Có thể bạn quan tâm ?</div>
<ul id='random-posts'>
<script type='text/javascript'>
//<![CDATA[
var rdp_numposts=3;
var rdp_snippet_length=100;
var rdp_info='yes';
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>');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>

Sau khi chèn CSS xong các bạn chép đoạn Javascript trên và chèn trên thẻ </body>

Bước 4: Lưu lại và xem kết quả

Lưu ý:

• var rdp_numposts=3 : Số lượng bài viêt
• var rdp_info='yes' : Ngày đăng bài và comment nếu bạn không muốn ẩn thì thay yes bằng no

Tag : Chia sẻ, CSS, jQuery