Hướng Dẫn Tạo Widget Bài Viết Mới Có Ảnh Thumbnail Trên Blogger

Thêm widget bài mới nhất có ảnh thumbnail trên blogger. Hướng dẫn cách tạo widget bài mới nhất có ảnh miêu tả cho blogspot.(Widget có thể hiểu là 1 tiện ích nhằm trang trí, thêm 1 chức năng cho blogspot bạn).

Chào các bạn hôm na xin hướng dẫn với các bạn cách tạo tạo widget bài mới nhất có ảnh cho blogspot. Đặc điểm của widget này là nó sẽ hiển thị bài viết mới nhất trên blog của bạn trong đó gồm có hình ảnh, Tiêu đề bài viết và mô tả sơ qua bài viết đặc biệt là nó có cả phần xem bài viết cũ hơn hoặc mới hơn kèm theo. Tiện ích này bạn có thể thêm vào thanh bên phải hoặc bên trái blog giúp người đọc có thể xem được các bài viết mới nhất từ blog của bạn.

Để tạo widget bài mới nhất có ảnh cho blogspot các bạn thực hiện theo các bước sau:

Bước 1: Tìm đoạn code  ]]></b:skin> rồi copy đoạn code dưới đây lên trên nó.

#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmFBIr1OmCevgnxTOZFUn-IbRMZF700Rv1XeL5A9JJHd2APyHvS4jEiUksNIK27m3m-Wh4UQYdwQ4EtBxk_2C3150sv82kzl4dGKhtk0rNHlK239rUnaonFmq3lxb5iGBF3HGIr-y4SOg/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

Bước 2: Tìm thẻ đóng </head> rồi copy phần code dưới đây lên trên nó. Trong đó:

• var numfeed = 5; ==> Số bài viết hiển thị.
• var urlblog = "http://wWw.Phanmem3S.Com"; ==> Bạn thay http://wWw.Phanmem3S.Com thành tên blogspot của bạn.
• var charac = 100; ==> Số ký tự miêu tả bài viết.

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://wWw.PhanMem3S.Com";
var charac = 100;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.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 showterbaru(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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiArF1vCIBjM6AtJVBzH2iSDSf3NO9nVPSOccJKtc2hG4Py6Cvwmo2qGLTIkOOaqJHjBpoz2gdLt5iZZfV_HT39yRMmLnx62-Rq51cnhmgNtfpOROi68Nv1hkwPLjpir6txIm2PrKdCCpY/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6>
<a href='" + posturl + "'>" + posttitle + "</a></h6>
";
showblogfeed += "<p>
" + maskolisfeed(postcontent,charac) + "...</p>
";
showblogfeed += "</div>
";
}
document.getElementById("terbaru").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("mas-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=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'>
</div>
";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

Bước 3: Vào Bố Cục (Layout) ==> Thêm 1 tiện ích HTML/Javascript ở vị trí bạn muốn hiển thị.

Bạn copy đoạn code sau vào trong tiện ích HTML/Javascript và đặt tên cho tiên ích của bạn.

<div id="terbaru"></div>

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

Nếu thấy hữu ích thì nhớ Like hoặc +1 để ủng hộ bạn nhé. Chúc các bạn thành công !

Chia sẻ trên Google Plus +1

About Unknown