Share Code Widget Recent Post

Recent Posts Widget for Blogger with Thumbnails and Summaries

Voz Share 9:06 PM 24/04/2020 0 Comments
Xin chào các bạn !
Hôm này mình xin chia sẻ Code Widget Recent Post dành cho blogger. Các bạn cũng có thể để hiển thị bài viết của blog chính lên các blog vệ tinh.
Ảnh minh họa

Chúng ta bắt đầu vào việc nhé!

Bước 1 : Các bạn chèn Css bên dưới vào bên trên trước thẻ </head>.


@import url(https://fonts.googleapis.com/css?family=Oswald);

  body {

  background:#eee;

  padding:0;

  margin:0;

}



a,a:visited {

  color:#555;

  outline:none;

  text-decoration:none;

}



a:hover,a:focus,a:visited:hover {

  color:#22a1c4;

  text-decoration:none;

}



.terbaru-container {

  background:#fff;

  width:320px;

  margin:20px auto;

  padding:15px;

  border:1px solid #ccc;

}



#cg-terbaru {

  border:1px solid #585858;

  width:100%;

  margin:0 auto;

}



#terbaru {

  margin:0;

}



.cg-elemen {

  margin:5px 0;

  padding:5px;

  height:79px;

  background:#fff url("http://smruthycollege.com/images/shadow2.png") no-repeat





scroll center bottom;

  overflow:hidden;

  padding-bottom:20px;

}



.cg-elemen img {

  padding:0;

  float:left;

  height:70px;

  margin-right:15px;

  width:70px;

}



.cg-elemen h6,.cg-elemen h6 a {

  font-size:14px !important;

  font-weight:500;

  margin:0;

  color:#222;

  font-family:"Oswald";

  line-height:18px;

  text-transform:uppercase;

  text-aligaln:"center";

}



.cg-elemen p {

  font-size:12px;

  font-family:"Oswald";

  text-align:left;

  color:#555;

  line-height:normal;

  margin:5px 0;

}



#cg-loading {

  color:#888;

  font-family:inherit;

  font-size:100px;

  letter-spacing:-10px;

  text-align:center;

  text-shadow:-5px 0 1px #444;

  background:#fff





url(https://4bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif)





no-repeat 50% 50%;

  height:470px;

}



#cg-navigasifeed {

  color:#bbb;

  font-family:Oswald;

  font-size:12px;

  text-align:center;

  margin:0;

}



#cg-navigasifeed a {

  color:#141414 !important;

  font-family:inherit !important;

  font-size:12px !important;

  font-weight:400 !important;

  display:block;

  padding:5px 10px;

}



#cg-navigasifeed span {

  padding:5px 10px;

}



#cg-navigasifeed .next {

  float:right;

}



#cg-navigasifeed .previous {

  float:left;

}



#cg-navigasifeed .home {

  text-align:center;

}



#cg-navigasifeed a:hover,#cg-navigasifeed span.noactived {

  color:transparant !important;

}



@media screen and (max-width:700px) {

  .terbaru-container,#terbaru,#cg-navigasifeed {

    width:auto;

  }

}



@media screen and (max-width:300px) {

  .cg-elemen img {

    display:none;

  }

}

Bước 2: Các bạn chèn file Js vào trước thẻ </body>.

var numfeed=5;
var startfeed=0;

var urlblog="https://vozblogger.blogspot.com/";

var charac=50;

var urlprevious,
urlnext;



function cyberghost(ghost, banget) {

        var showfeed=ghost.split("<");

        for (var i=0; i < showfeed.length; i++) {

                if (showfeed[i].indexOf(">") !=-1) {

                        showfeed[i]=showfeed[i].substring(showfeed[i].indexOf(">") + 1, showfeed[i].length);

                }

        }

        showfeed=showfeed.join("");

        showfeed=showfeed.substring(0, banget - 1);

        return showfeed;

}



function showvozblogger(json) {

        var entry,
        posttitle,
        posturl,
        postimg,
        postcontent;

        var showblogfeed="";

        urlprevious="";

        urlnext="";

        for (var k=0; k < json.feed.link.length; k++) {

                if (json.feed.link[k].rel=='previous') {

                        urlprevious=json.feed.link[k].href;

                }

                if (json.feed.link[k].rel=='next') {

                        urlnext=json.feed.link[k].href;

                }

        }

        for (var i=0; i < numfeed; i++) {

                if (i==json.feed.entry.length) {

                        break;

                }

                entry=json.feed.entry[i];

                posttitle=entry.title.$t;

                for (var k=0; k < entry.link.length; k++) {

                        if (entry.link[k].rel=='alternate') {

                                posturl=entry.link[k].href;

                                break;

                        }

                }

                if ("content"in entry) {

                        postcontent=entry.content.$t;

                }

                else if ("summary"in entry) {

                        postcontent=entry.summary.$t;

                }

                else {

                        postcontent="";

                }

                if ("media$thumbnail"in entry) {

                        postimg=entry.media$thumbnail.url;

                }

                else {

                        postimg="https://1.bp.blogspot.com/-eiX9aalicz8/VWEORfDN71I/AAAAAAAAHdg/vfHyEfYKBh0/s1600/no_image.gif";

                }

                showblogfeed+="<div class='cg-elemen'>";

                showblogfeed+="<a =href='"+posturl+"' target='_blank'><img src='"+postimg+"' /></a>";

                showblogfeed+="<h6><a href='"+posturl+"'>"+posttitle+"</a></h6>";

                showblogfeed+="<p>"+cyberghost(postcontent, charac)+"...</p>";

                showblogfeed+="</div>";

        }

        document.getElementById("vozblogger").innerHTML=showblogfeed;

        showblogfeed="";

        if (urlprevious) {

                showblogfeed+="<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";

        }

        else {

                showblogfeed+="<span class='noactived previous'>&#9668; Previous</span>";

        }

        if (urlnext) {

                showblogfeed+="<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";

        }

        else {

                showblogfeed+="<span class='noactived next'>Next &#9658;</span>";

        }

        showblogfeed+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>";

        document.getElementById("cg-navigasifeed").innerHTML=showblogfeed;

}



function navigasifeed(url) {

        var p,
        parameter;

        if (url==-1) {

                p=urlprevious.indexOf("?");

                parameter=urlprevious.substring(p);

        }

        else if (url==1) {

                p=urlnext.indexOf("?");

                parameter=urlnext.substring(p);

        }

        else {

                parameter="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script"

        }

        parameter+="&callback=showvozblogger";

        incluirscript(parameter);

}



function incluirscript(parameter) {

        if (startfeed==1) {

                removerscript();

        }

        document.getElementById("vozblogger").innerHTML="<div id='cg-loading'></div>";

        document.getElementById("cg-navigasifeed").innerHTML="";

        var archievefeed=urlblog+"/feeds/posts/default"+parameter;

        var vozblogger=document.createElement('script');

        vozblogger.setAttribute('type', 'text/javascript');

        vozblogger.setAttribute('src', archievefeed);

        vozblogger.setAttribute('id', 'MASLABEL');

        document.getElementsByTagName('head')[0].appendChild(vozblogger);

        startfeed=1;

}



function removerscript() {

        var elemen=document.getElementById("MASLABEL");

        var parent=elemen.parentNode;

        parent.removeChild(elemen);

}

onload=function() {

        navigasifeed(0);

}

Bước 4: Các bạn mở phần bố cục và dán code html bên dưới vào nơi bạn muốn hiển thị.

  <div class="vozblogger-container">
    <div id="vozblogger"></div>


    <div id="cg-navigasifeed"></div>




  </div>

Ok! Vậy là xong.
Lưu Ý:
Thay link : https://vozblogger.blogspot.com/  thành link blog của bạn.
Chúc các bạn thành công!

Created by Voz Blogger
DMCA.com Protection Status
  • Bình Luận
  • Lưu ý

  • Một số lưu ý khi bình luận

    Không đăng bình luận có nội dung khiêu dâm, 18+

    Không đăng bình luận có liên quan đến chính trị, nhà nước.

    Không đăng bình luận có nội dung phản động, kích động chiến tranh, thù địch.

    Không đăng bình luận có nội dung phản cảm, bêu rếu, nói xấu.

    Không đăng bình luận có nội dung tục tiểu, bậy bạ hay thậm chí "vô học".

    Không đăng bình luận có liên kết spam, dẫn đến những trang có nội dung xấu.

    Được đăng bình luận có mang tính đóng góp, xây dựng bài viết / blog.

    Được đăng bình luận có liên quan đến nội dung bài viết.

    Có thể góp ý, hay báo lỗi bài viết (thiếu ý, sai chính tả hay thiếu hình ảnh minh họa).

Post a Comment

Previous Post Next Post