Tạo Widget Bài Viết Mới Cực Đẹp Cho Blog

Mình thấy widget này khá đẹp nên share lại cho anh em sài!

Bước 1: Truy cập vào Bố cục.

Bước 2: Chọn vị trí cần đặt sau đó chọn Thêm Tiện ích -> HTML/Javascript.

Bước 3: Ở tiêu đề các bạn có thể điền là Bài Viết Mới hoặc bất cứ từ nào bạn thích và sau đó dán code này xuống phần nội dung.

<script type="text/javascript"> function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){varr,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)varl=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Fzi1BzfWKdbhrAjbQQRoCFhRG1FERZp4Mi5YovhDtxIz4_SKi8nYOr0z2FxtDgfMam6KvMSShI0FXzlLFHWo7NbHgdTnb7xQ_mRxrjvX8th0ShO8-XFfIihlT1ERZg1AiboqOCPWyyR_/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=newArray;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==posts_date&&document.write('<span class="post-date">'+v+" "+A[parseInt(w,10)]+" "+f+" </span> | "),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comment"==l&&(l="1 Comment"),"0 Comment"==l&&(l="No Comment"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Xem bài viết</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")} </script><script type="text/javascript"> var posts_no = 5; var showpoststhumbs = true; var readmorelink = true; varshowcommentslink = true; var posts_date = true; </script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script><noscript>Trình duyệt của bạn không hỗ trợ Javascript</noscript><style type="text/css">#HTML1 .widget-content{margin: auto; width: 95%;} img.recent-post-thumb{width:50px;height:50px;float:right;margin:-4px -20px 0 0;border:4px solid #00A0B0;border-radius:100%}.recent-posts-container{float:left;width:100%;min-height:55px;margin:5px 0 5px 0;padding:0;font-size:12px}ul.recent-posts-container{counter-reset:countposts;list-style-type:none;background:#fff}ul.recent-posts-container li:before{content:counter(countposts,decimal);counter-increment:countposts;z-index:2;position:absolute;font-size:16px;color:#FFFFFF;background:#00A0B0;padding:7px 13px;border-radius:100%;margin-top:32px;margin-left:-21px}ul.recent-posts-container li{padding:5px 0;min-height:50px;list-style-type:none;margin:-2px 5px 5px 5px;border-bottom:2px solid #00A0B0}ul.recent-posts-container{border:2px solid #00A0B0}.recent-posts-container a{text-decoration:none}.recent-posts-container a:hover{color:#222}.post-date{color:#8F9596;font-size:11px}.recent-post-title a{font-size:14px;color:#616662}.recent-post-title{padding:0 17px}.recent-posts-detailsa{color:#888}.recent-posts-details{margin-left:12px;padding:5px}a.readmorelink{color:#FFFFFF;background:#00A0B0;padding:2px;border-radius:3px} </style><divclass='clear'></div>

Bước 4: Ấn lưu và thưởng thức hậu quả :v