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.



 Để 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/AVvXsEg52dCUFUqxh5L3ptLg_rPJeB-D1KxHpQlwRpzfDyt8RAXowB16m1PYOl8Hz0Xto8UCyIuvsbn-ndWzhq0LWMmpeZdN5bkwMLpqDTmaJc-xJnq9OZQbgHvlGU9AIK22SIOV97lMyjImljA/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/AVvXsEgKHIwM-JdTzWkO1WzB3X-d4I1XeSUzFdjYelsHFQq-j9r6Zw-vKa41nnF0e1Z6-uOKovi52CZ2ftYw4Srb45tL3KTApyUioqbhSLaky0XZ9Pw5GyvbYm2Prpnznd3cu49QZSi8Ja__jWQ/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

Nếu bạn cảm thấy hay hãy ấn theo dõi này :)
Đánh Giá Bài Viết Đễ Ad Cải Thiện Nội Dung Chất Lượng Bài Viết
Facebook Google twitter
Từ khóa: Cách, tạo, widget, bài, mới, nhất, , ảnh, cho, blogspot, Cách tạo widget bài mới nhất có ảnh cho blogspot edit
Cùng Chuyên Mục
Bài Viết Mới

Tin Tức Online
Xem Thêm Tất Cả »
Bài Viết Ngẫu Nhiên
  • Code popup mở tab mới 1lần/1IP/1ngày cho website và blogspot
    11.08.2015 - 0 Comments
    Code popup mở tab mới 1lần/1IP/1ngày cho website và blogspot. Code popup nhảy ra tab mới khi truy cập…
  • KineMaster Pro v3.4.0.7906 - ứng dụng tạo video clip đỉnh nhất trên android
    25.07.2016 - 0 Comments
    Hỗ trợ : 4.1+Nếu bạn đang sử dụng một thiết bị Android và cần tìm một ứng dụng chỉnh sửa Video chuyên nghiệp?…
  • Thơ chế vui định nghĩa về Chồng
    12.03.2014 - 0 Comments
    Thơ chế vui định nghĩa về ChồngChồng là loài sống bằng cơm Lại ham món phở, bia ôm vỉa hè. Chồng là…
  • Giải đáp câu hỏi: Con gái ghét gì nhất ở con trai ?
    31.03.2014 - 0 Comments
    Giải đáp câu hỏi: Con gái ghét gì nhất ở con trai ? Hãy cùng tìm hiều về những người con trai mà con gái…
  • Lệnh Vice City - Các mã lệnh trong Vice City
    25.05.2013 - 0 Comments
    Lệnh vice city - Các mã lệnh trong Vice City (Game cướp đường phố).Sau đây Bít tuốt xin cung cấp cho các bạn…
Copyright © 2016 - All Rights Reserved
Template by Lê Hiển - Powered by Blogger Liên kết: Kênh Tải Miễn Phí