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

16 tháng 1
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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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 = 5var showpoststhumbs = truevar readmorelink = truevarshowcommentslink = truevar 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; width95%;} 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 

33 nhận xét:
  1. Thưởng thức hậu quả là s bác :V

    Trả lờiXóa
  2. Anh thích cái này rồi nha, sáng sớm là ghé thăm em trước ý, buổi sáng may mắn :)

    Trả lờiXóa
  3. Thưởng thức hậu quả, vl bác
    Mak bài hay lắm

    Trả lờiXóa
  4. [i]https://i.imgur.com/MD1ZK4i.png[/i]

    Trả lờiXóa
  5. Xin 1 slot liên kết với ạ :D
    Title: Ảnh Đẹp Blog
    Url: https://chuyenmucanhdep.blogspot.com/

    Trả lờiXóa
  6. Cho xin link fb bác em hỏi cái này với

    Trả lờiXóa
  7. [i]https://i.imgur.com/XFBEusz.png[/i]

    Trả lờiXóa
  8. [i]https://i.imgur.com/DhTWAJY.png[/i]

    Trả lờiXóa
  9. Xin chào bạn !!! TKW TIPS là Blog mới được thành lập vào ngày 8/2/2018 mong các bạn qua tương tác cũng như ủng hộ mình làm Blog với url : tkwtips.blogspot.com nhé !

    Trả lờiXóa
  10. Chúc mừng năm mới nha, nhiều sức khỏe và luôn thành công trong cuộc sống nhé e :D Bonus thêm là kiếm đc nhiều tiền thì mời a đi ăn nhé :v

    Trả lờiXóa
  11. Chúc năm mới công ty em nhiều phát triển nha. Có cơ hội a ra miền Bắc nhớ dắt a vào công ty em chơi nha. Happy New Year :)

    Trả lờiXóa
  12. Năm mới đã đến, chúc anh Tuấn thật nhiều sức khỏe, đạt được nhiều thành công trong năm tới nhé <3

    Trả lờiXóa
  13. Chúc anh Siin năm mới khỏe re nhoa

    Trả lờiXóa
  14. Năm mới tết đến chúc Tuấn có nhiều sức khỏe và thành công trong cv nha

    Trả lờiXóa
  15. Cảm ơn mọi người, mình xin chúc mọi người sức khỏe, hạnh phúc tràn trề trong dịp năm mới về, ngày càng thành công trên con đường mình đã chọn <3

    Trả lờiXóa

Bình luận mới