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*/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>
.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;
}
Javascript bài viết ngẫu nhiên (Random Posts cho blogspot
<b:if cond='data:blog.pageType == "item"'>
<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)+"…";};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'>×</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
