Chào mừng các bạn đã ghé thăm blog nhỏ này của mình.Như các bạn cũng biết trong một blogspot thì những thứ như menu điều hướng,ramdom posts,.. là những thứ cần thiết vì nó khiến đọc giả tìm được đến các bài đăng mà họ cần.Hôm nay chúng tôi sẽ đem đến cho các bạn một mẫu bài đăng ngẫu nhiên khá giản dị được làm theo phong cách material design

Bước 1:Chuẩn bị

Phải chắc chắn rằng blog của bạn đã có thư viện Jquery.Bạn không cần phải lo nghĩ về việc nó làm blog của bạn load lâu hơn bởi vì hầu hết các giao diện không phải là giao diện mặc định của blogger đều sử dụng đến thư viện này.Thư viện Jquery sẽ giúp ta thao tác nhanh với các phần tử,...Nếu blog của bạn chưa có thì vui lòng thêm mã này sau thẻ <head> hoặc <head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Bước 2

Các bạn hãy tìm đến thẻ ]]></b:skin> và thêm đoạn css này trước đó

.b-thumbnail {
    position: relative;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    background-color: #f6f6f6;
}
.b-sm-title {
    font-size: 13px;
    font-weight: 700;
    transition: all .3s ease-in-out;
}
.b-sidebar .b-content-item{position:relative;padding-left:92px;margin-bottom:10px;padding-bottom:10px;-webkit-box-shadow:0 1px 0 0 rgba(131,144,158,.15);box-shadow:0 1px 0 0 rgba(131,144,158,.15)}
.b-sidebar .b-content-item.no-pic{padding-left:0}
.b-sidebar .b-content-item:last-child{margin-bottom:0;padding-bottom:0;-webkit-box-shadow:none;box-shadow:none}
.b-sidebar .b-content-item .thumbnail{width:80px;border-radius:3px;position:absolute;top:0;left:0;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.b-sidebar .b-content-item .thumbnail:hover{opacity:.8}
.b-sidebar .b-content-item .thumbnail:after{border:1px solid rgba(0,0,0,.1);bottom:0;content:"";left:0;position:absolute;right:0;top:0;border-radius:3px}
.b-sidebar .b-content-item .info{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;min-height:60px;width:100%}
.b-sidebar .b-content-item .info>a{width:100%}
.b-sidebar .b-content-item .info>h4{margin:0;padding:0}
.b-sidebar .b-content-item .info .b-sm-title{display:-moz-box;display:-webkit-box;-webkit-line-clamp:2;-moz-box-orient:vertical;-webkit-box-orient:vertical;box-orient:vertical;overflow:hidden;word-break:break-word}
.b-sidebar .b-content-item .info .b-sm-metadata{margin:5px 0 0}
.b-sidebar-top{margin-bottom:24px;background-color:#fff;border-radius:3px}
.b-sidebar-top-inner{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}
.b-sidebar-top-inner .b-content-item{-ms-flex:1;flex:1 1;position:relative;padding:12px 0px 12px 12px}
.b-sidebar-top-inner .b-content-item .thumbnail{width:100%;border-radius:3px;margin-bottom:10px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.b-sidebar-top-inner .b-content-item .thumbnail:hover{opacity:.8}
.b-sidebar-top-inner .b-content-item.no-pic{padding-left:0}
.b-sidebar-top-inner .b-content-item:first-child{padding:12px 6px 12px 12px}
.b-sidebar-top-inner .b-content-item:last-child{padding:12px 12px 0 12px}
.b-sidebar-top-inner .b-content-item .info{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%;padding:0 6px 0 0}
.b-sidebar-top-inner .b-content-item .info>a{width:100%}
.b-sidebar-top-inner .b-content-item .info>h4{margin:0;padding:0}
.b-sidebar-top-inner .b-content-item .info .b-sm-title{display:-moz-box;display:-webkit-box;-webkit-line-clamp:2;-moz-box-orient:vertical;-webkit-box-orient:vertical;box-orient:vertical;overflow:hidden;word-break:break-word;font-weight:500}
.b-sidebar-top-inner .b-content-item .info .b-sm-metadata{margin:5px 0 0}
.b-thumbnail-4x3:before{padding-top:75%}
.b-thumbnail:before{content:"";display:block}

Các bạn đặt đoạn code này vào nơi cần hiển thị tiện ích(thường là ngay dưới phần header)

<div class='row'>
<div class='col-16'>
<section class='b-block b-sidebar-top'>
<div class='b-sidebar-top-inner' id='result_post_top' style='display:none;'>
<!-- Via code https://blog.siingroup.com -->
<script type='text/javascript'>
//<![CDATA[
var rdp_numposts=6;var rdp_snippet_length=150;var rdp_info='yes';var rdp_comment='bình luận';var rdp_disable='Tắt bình luận';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];if(entry!=undefined){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://i.imgur.com/IIdtni8.png"}}};var thumb=rdp_thumb.replace("s72-c","s300");document.write('<a class="b-content-item" target="_blank" href="'+rdp_posturl+'" title="'+rdp_posttitle+'">');document.write('<div class="thumbnail b-thumbnail b-thumbnail-4x3" style="background-image: url(&quot;'+thumb+'&quot;);"></div>');document.write('<div class="info"><span class="b-sm-title">'+rdp_posttitle+'</span></div>');document.write('</a>')}}};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>')};document.addEventListener('DOMContentLoaded',function(){$('#result_post_top').attr('style','display:;')});
//]]>
</script>
</div>
</section>
</div>
</div>

Lời kết:

Chúc các bạn thành công
view source:blog.siingroup.com

Nguyễn Diện Blog

Beautyful Random Posts Widget

Bước 1:Chuẩn bị

Bước 2

Tiếp theo:

Lời kết:

Điều hướng bài đăng

Bài đăng phổ biến

Nhận xét

Ads here