Side Recent Posts (Bài viết mới nhất) 2 cột (1:2) cực đẹp cho Blogspot

Đây là side khá đẹp phù hợp cho tất cả Blogspot được Tuấn Lê edit tại N Light 6 Pro Theme. Nó sẽ tăng tính chuyên nghiệp cho Blog của bạn cũng như tạo độ bắt mắt thu hút nhiều độc giả đến với Blog bạn hơn. Bắt đầu làm đẹp cho Blog nào !

XEM DEMO

Các bước thực hiện

Bước 1: Chèn đoạn CSS sau vào trước thẻ </head>

<style>
a{text-decoration:none}
</style>
<style>
a{text-decoration:none}


/* Featured Post by linkthuthuat*/
.featured-post {
max-width: 1120px;
margin: auto;
; font-family: Roboto
}
#featured-posts-section{
overflow: hidden;
background: #607D8B;
padding: 20px 0 0;
}
.featured-post a{font-size:1.2em;color:#fff; font-family: Roboto}
.main-post.featured-post a{margin:0;font-size:18px; font-family: Roboto}
.featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0 20px 0 0}
.featured-post .secondary-post{ float: right;width:32%;margin:0 0 20px 0}
.featured-post .secondary-post:nth-child(2) {width:32%;margin:0}
.featured-post .main-post{width:65.9%;padding:0}
.featured-post span{font-family: Roboto; background-color:rgba(0,0,0,0.7);padding:5px 6px;color:#fff;text-transform:uppercase;font-size:10px;font-style:normal;top:10px;left:10px;z-index:2;font-weight:700;position:absolute}
.featured-post img{height:100%;transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out}
.featured-post .main-post img{height:350px;width:100%;object-fit:cover}
.featured-post .secondary-post img{height:165px;object-fit:cover;width:100%}
.featured-post header{position:absolute;bottom:0;left:0;padding:20px;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
background: -webkit-gradient(left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(59%,rgba(0,0,0,0.59)),color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#000000',GradientType=0);
width: 100%;
padding: 10px 15px;}
.featured-post h4{font-size:15px;line-height:1.3; font-family: Roboto}
span.label-info a.label-block:nth-child(n+2),.showpageOf {display:none;}
@media screen and (max-width:768px) {
h1.post-title.entry-title a, h2.post-title.entry-title a {display:inline-block;margin:15px 0;}
#featured-posts-section{display:none}}
</style>

Bước 2: Chèn đoạn JS sau vào sau thẻ </head>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderposts(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++)if("alternate"==n.link[m].rel){i=n.link[m].href;break}for(var m=0;m<n.link.length;m++)if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var h=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<h.length;u++)if(parseInt(f)==h[u]){f=p[u];break}if(0==t){var v='<div class="main-post col-post"><a href="'+i+'"><span class="blue">'+l+'</span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title"><a href="'+i+'" title="">'+o+"</a></h3></header></div>";document.write(v)}else{var v='<div class="secondary-post col-post" style="margin-right:0"><span class="blue">'+l+'</span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="200" width="320"></img></a><header><h4><a href="'+i+'">'+o+"</a></h4></header></div>";document.write(v)}j++}}imgr=new Array,imgr[0]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numposts="3";
//]]>
</script>

Bước 3: Chèn đoạn code sau vào nơi muốn hiển thị (thường là sau Menu hoặc trướcclass="main-wrapper")

<div class="ct-wrapper" id="featured-posts-section">
<div class="featured-post padding clearfix">
<script type="text/javaScript">
document.write("<script src=\"/feeds/posts/default/?max-results="+featured_numposts+"&orderby=published&alt=json-in-script&callback=sliderposts\"><\/script>");
</script>
</div>
</div> 

Vậy là xong ! Blog của bạn sau khi có side này mình tin sẽ rất đẹp.
Chúc các bạn thành công ! 

#Blogspot