Langkah 1. Tambahkan Kode HTML
Di sebelah kiri, ambil elemen "Embed Code" dan tambahkan ke situs Weebly Anda. Sekarang salin kode HTML di bawah ini dan tambahkan ke elemen "Embed Code":
<div class="paling Populer"></div>
Catatan: Di mana Anda menambahkan HTML ini, widget Anda yang paling populer akan muncul. Anda dapat menambahkan kode HTML ini ke situs Weebly Anda sebanyak yang Anda mau.
Di sebelah kiri, ambil elemen "Embed Code" dan tambahkan ke situs Weebly Anda. Sekarang salin kode HTML di bawah ini dan tambahkan ke elemen "Embed Code":
<div class="paling Populer"></div>
Catatan: Di mana Anda menambahkan HTML ini, widget Anda yang paling populer akan muncul. Anda dapat menambahkan kode HTML ini ke situs Weebly Anda sebanyak yang Anda mau.
Langkah 2. Buka Editor HTML/CSS Weebly
Di bagian atas, klik 'Tema', dan di kiri bawah, klik 'Edit HTML/CSS'.
Di bagian atas, klik 'Tema', dan di kiri bawah, klik 'Edit HTML/CSS'.
Langkah 3. Tambahkan Kode CSS
Di sebelah kiri di bawah "STYLES", klik "main.less". Di sebelah kanan, gulir ke bawah ke kode CSS blog Anda. Salin kode CSS di bawah ini dan tambahkan tepat di bawah kode CSS blog Anda:
/* Most Popular Blog Posts */
.article {
display: flex;
margin-bottom: 20px;
}
.article:not(:last-child) {
margin-bottom: 10px;
}
.articleImage {
max-width: 55px;
width: 100%;
height: 55px;
margin-right: 10px;
}
.articleImage .wsite-image {
padding-top: 0px!important;
padding-bottom: 0px!important;
}
.articleImage a {
display: flex;
}
.articleImage img {
height: 55px;
object-fit: cover;
border-radius: 50%;
}
Di sebelah kiri di bawah "STYLES", klik "main.less". Di sebelah kanan, gulir ke bawah ke kode CSS blog Anda. Salin kode CSS di bawah ini dan tambahkan tepat di bawah kode CSS blog Anda:
/* Most Popular Blog Posts */
.article {
display: flex;
margin-bottom: 20px;
}
.article:not(:last-child) {
margin-bottom: 10px;
}
.articleImage {
max-width: 55px;
width: 100%;
height: 55px;
margin-right: 10px;
}
.articleImage .wsite-image {
padding-top: 0px!important;
padding-bottom: 0px!important;
}
.articleImage a {
display: flex;
}
.articleImage img {
height: 55px;
object-fit: cover;
border-radius: 50%;
}
Langkah 4. Tambahkan Kode JQuery
Di sebelah kiri di bawah "ASSETS", klik file "custom.js". Di sebelah kanan, tambahkan kode jQuery di bawah ini langsung di bawah "jQuery(function($) {":
// Most Popular Blog Posts
var blogPosts = $();
$.get('/blog.html', function(data) {
var a = $(data).find(".blog-page-nav-previous").length;
var b = $(data).find(".blog-page-nav-previous a").attr("href");
$(data).find(".blog-post").each(function() {
var comments = $(this).find(".blog-comments a").html();
var title = $(this).find(".blog-title a").parent().html();
var image = $(this).find(".wsite-image").parent().html();
var commentSplit = comments.split(" ");
var commentCount = commentSplit[0];
var commentInteger = parseInt(commentCount);
blogPosts = blogPosts.add('<div class="article">' + '<div class="articleImage">' + image + '</div>' + '<div class="articleTitle">' + title + '</div>' + '<span class="articleComment">' + commentInteger + '</span>' + '</div>');
});
function getMore() {
if (a == 1) {
$.get(b, function(data) {
var c = $(data).find(".blog-page-nav-previous a").length;
var d = $(data).find(".blog-page-nav-previous a").attr("href");
$(data).find(".blog-post").each(function() {
var comments = $(this).find(".blog-comments a").html();
var title = $(this).find(".blog-title a").parent().html();
var image = $(this).find(".wsite-image").parent().html();
var commentSplit = comments.split(" ");
var commentCount = commentSplit[0];
var commentInteger = parseInt(commentCount);
blogPosts = blogPosts.add('<div class="article">' + '<div class="articleImage">' + image + '</div>' + '<div class="articleTitle">' + title + '</div>' + '<span class="articleComment">' + commentInteger + '</span>' + '</div>');
});
if (a == c) {
b = d;
getMore();
}
else {
blogPosts.sort(function(a, b) {
var valueA = $(a).find("span").text();
var valueB = $(b).find("span").text();
if (valueA < valueB) return 1;
if (valueA > valueB) return -1;
return 0;
});
blogPosts == blogPosts.find(".articleComment").remove();
var articleSlice = blogPosts.slice(0,3);
$(".mostPopular").empty().append(articleSlice);
$(".article").each(function() {
var articleLink = $(this).find(".articleTitle a").attr("href");
$(this).find(".articleImage a").attr('href', articleLink);
});
}
});
}
else {
blogPosts.sort(function(a, b) {
var valueA = $(a).find("span").text();
var valueB = $(b).find("span").text();
if (valueA < valueB) return 1;
if (valueA > valueB) return -1;
return 0;
});
blogPosts == blogPosts.find(".articleComment").remove();
var articleSlice = blogPosts.slice(0,3);
$(".mostPopular").empty().append(articleSlice);
$(".article").each(function() {
var articleLink = $(this).find(".articleTitle a").attr("href");
$(this).find(".articleImage a").attr('href', articleLink);
});
}
}
getMore();
});
Di sebelah kiri di bawah "ASSETS", klik file "custom.js". Di sebelah kanan, tambahkan kode jQuery di bawah ini langsung di bawah "jQuery(function($) {":
// Most Popular Blog Posts
var blogPosts = $();
$.get('/blog.html', function(data) {
var a = $(data).find(".blog-page-nav-previous").length;
var b = $(data).find(".blog-page-nav-previous a").attr("href");
$(data).find(".blog-post").each(function() {
var comments = $(this).find(".blog-comments a").html();
var title = $(this).find(".blog-title a").parent().html();
var image = $(this).find(".wsite-image").parent().html();
var commentSplit = comments.split(" ");
var commentCount = commentSplit[0];
var commentInteger = parseInt(commentCount);
blogPosts = blogPosts.add('<div class="article">' + '<div class="articleImage">' + image + '</div>' + '<div class="articleTitle">' + title + '</div>' + '<span class="articleComment">' + commentInteger + '</span>' + '</div>');
});
function getMore() {
if (a == 1) {
$.get(b, function(data) {
var c = $(data).find(".blog-page-nav-previous a").length;
var d = $(data).find(".blog-page-nav-previous a").attr("href");
$(data).find(".blog-post").each(function() {
var comments = $(this).find(".blog-comments a").html();
var title = $(this).find(".blog-title a").parent().html();
var image = $(this).find(".wsite-image").parent().html();
var commentSplit = comments.split(" ");
var commentCount = commentSplit[0];
var commentInteger = parseInt(commentCount);
blogPosts = blogPosts.add('<div class="article">' + '<div class="articleImage">' + image + '</div>' + '<div class="articleTitle">' + title + '</div>' + '<span class="articleComment">' + commentInteger + '</span>' + '</div>');
});
if (a == c) {
b = d;
getMore();
}
else {
blogPosts.sort(function(a, b) {
var valueA = $(a).find("span").text();
var valueB = $(b).find("span").text();
if (valueA < valueB) return 1;
if (valueA > valueB) return -1;
return 0;
});
blogPosts == blogPosts.find(".articleComment").remove();
var articleSlice = blogPosts.slice(0,3);
$(".mostPopular").empty().append(articleSlice);
$(".article").each(function() {
var articleLink = $(this).find(".articleTitle a").attr("href");
$(this).find(".articleImage a").attr('href', articleLink);
});
}
});
}
else {
blogPosts.sort(function(a, b) {
var valueA = $(a).find("span").text();
var valueB = $(b).find("span").text();
if (valueA < valueB) return 1;
if (valueA > valueB) return -1;
return 0;
});
blogPosts == blogPosts.find(".articleComment").remove();
var articleSlice = blogPosts.slice(0,3);
$(".mostPopular").empty().append(articleSlice);
$(".article").each(function() {
var articleLink = $(this).find(".articleTitle a").attr("href");
$(this).find(".articleImage a").attr('href', articleLink);
});
}
}
getMore();
});
Langkah 5. Tambahkan URL Blog
Dalam kode jQuery yang baru saja Anda tambahkan pada langkah sebelumnya, tambahkan URL blog Anda ke kode jQuery seperti yang ditunjukkan di bawah ini dengan warna Hijau :
// Most Popular Blog Posts
var blogPosts = $();
$.get('/blog.html', function(data) {
var a = $(data).find(".blog-page-nav-previous").length;
...
Click "SAVE".
Dalam kode jQuery yang baru saja Anda tambahkan pada langkah sebelumnya, tambahkan URL blog Anda ke kode jQuery seperti yang ditunjukkan di bawah ini dengan warna Hijau :
// Most Popular Blog Posts
var blogPosts = $();
$.get('/blog.html', function(data) {
var a = $(data).find(".blog-page-nav-previous").length;
...
Click "SAVE".