Cách tạo widget bài mới nhất có ảnh cho blogspot

Widget bài mới nhất có ảnh cho blogspot. 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 nay Bít Tuốt Blog 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.

Xem DEMO

 Để 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/AVvXsEhLuaP5etvImcXg7-T7M2foR6iwXNUYrfE3vne5GCPE6t3SUByVJgrQISpCiPFHhZjcxDZH3UsVCojb2-jI1-a8IyNe-A0YbYvqooM4V7svlk7LoWqeGF8Zs7e3CrNgg2vV7ZrLiu7L5l8/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ó

• var numfeed = 5; ==> Số bài viết hiển thị
• var urlblog = "http://bittuot.blogspot.com/"; ==> Bạn thay http://bittuot.blogspot.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://bittuot.blogspot.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/AVvXsEiklUHFaBMX9s93Y-1f0D7bfvOe6Y2LpWBiXf8EIVu3i0dG_cRmam24MOiyBLHi401pGhxYuEvQSR2AZUnewk0RtzRmIB5nfa7_BHXGsehvDhm_xFlNQCeHAIdI0j1qkvYzmuaylNzf3PQ/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>

Mọi thắc mắc vui lòng các bạn comment phía dưới để được giải đáp nhé. Nếu thấy hữu ích thì nhấn Like, +1 để ủng hộ mình nhé. Chúc các bạn thành công !

Bài viết được viết bởi  bittuot.blogspot.com - Bít tuốt Blog - Thủ Thuật Blogspot