Comment créer un widget article recommander sur votre blog Weebly ?

Comme vous le savez, Google n’indexe pas votre site entier, mais page par page. Il est de ce faite important que vos pages soit relier entres elles avec des liens. Garder les visiteurs le plus longtemps que possible sur votre blog est tout aussi important si vous souhaitez que votre site soit mieux référencer dans les moteurs de recherches.

Un widget de contenu recommandé recommandera d’autres billets de blog parmi vos articles aux visiteurs une fois qu’ils atteignent le bas d’un article. Il s’agit d’un outil fantastique pour garder vos visiteurs sur votre site plus longtemps, ainsi que de s’assurer que les anciens billets de blog sont aussi disponibles et visibles pour vos visiteurs que vos nouveaux billets de blog.

Une fois qu’un billet de blog est visité, le widget va automatiquement scanner toutes vos pages de blog et choisir au hasard 3 d’entre eux. Si l’un de ces 3 billets de blog se trouvent être celui sur lequel le visiteur est, le widget va revenir en arrière et trouver un article à lui proposer. Tout cela se produit en quelques secondes.

​Dans l’éditeur de votre site, en haut, cliquez sur ‘Thème’, et en bas à gauche, cliquez sur ‘Modifier HTML/CSS’.

Sur la gauche sous « Partiels », cliquez sur « blog ».tpl ». Sur la droite, localisez le code HTML suivant :
​
​<div class= »blog-post-separator »></div>Maintenant, copiez le code HTML ci-dessous et collez-le directement sous le code HTML ci-dessus :
​
​​<div class= »recommended »>
<h2 class= »recommendedPostTitle »>You Might Also Like</h2>
<div class= »recommendedPosts »>
<div class= »recommendedPost »>
<a class= »recommendedImage recommendedImageOne »></a>
<div class= »recommendedTitle recommendedTitleOne »></div>
</div>
<div class= »recommendedPost »>
<a class= »recommendedImage recommendedImageTwo »></a>
<div class= »recommendedTitle recommendedTitleTwo »></div>
</div>
<div class= »recommendedPost »>
<a class= »recommendedImage recommendedImageThree »></a>
<div class= »recommendedTitle recommendedTitleThree »></div>
</div>
</div>
</div>

Sur la gauche sous « STYLES », cliquez sur « main.less ». Sur la droite, faites défiler vers le bas et localiser les codes CSS de votre blog. Copiez les codes CSS ci-dessous et ajoutez-les directement sous les codes CSS de votre blog dans le fichier « main.less » :

​/* Recommended Content Widget */
.wsite-blog-index .recommended {
display:none;
}
.recommendedPostTitle {
margin-bottom: 15px;
}
.recommendedPosts {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.first ~ .first {
display: none;
}
.recommendedPost {
width: 31%;
}
.recommendedPost:not(:last-child) {
margin-bottom: 10px;
}
.recommendedImage {
display: flex;
margin-bottom: 5px;
}
.recommendedImage img {
height: 140px;
object-fit: cover;
width: 100%!important;
}

​Sur la liste de dossier à gauche, sous « ASSETS », cliquez sur le fichier « custom.js ». Sur la droite, ajoutez le code jQuery ci-dessous directement sous le nom de « jQuery(fonction($) :

// Recommended Content Widget
var url = window.location.href;
var urlSplit = url.split(‘/’).slice(0,4).join(‘/’);
var blogPostCheck = $(« .wsite-blog-post »).length;

if (blogPostCheck == 1) {
var blogPosts = [];
function getAnother() {
var randomArticle = blogPosts.sort(function() {
return Math.round(Math.random())-0.5;
}).slice(0,3); // Grab 3 random blog posts

localStorage.setItem(‘postCheck’, randomArticle);

var currentPost = window.location.href;

if(localStorage.getItem(‘postCheck’).indexOf(currentPost) !== -1) {
getAnother();
}
else {
var firstPost = randomArticle.slice(0,1);
var secondPost = randomArticle.slice(1,2);
var thirdPost = randomArticle.slice(2,3);
$.get(firstPost, function(data) {
$(data).find(« .wsite-image img »).appendTo(« .recommendedImageOne »).addClass(« first »);
});
$.get(secondPost, function(data) {
$(data).find(« .wsite-image img »).appendTo(« .recommendedImageTwo »).addClass(« first »);
});
$.get(thirdPost, function(data) {
$(data).find(« .wsite-image img »).appendTo(« .recommendedImageThree »).addClass(« first »);
});

$
(« .recommendedTitleOne »).append(firstPost);
$(« .recommendedTitleTwo »).append(secondPost);
$(« .recommendedTitleThree »).append(thirdPost);

var linkOne = $(‘.recommendedTitleOne a’).attr(‘href’);
$(‘.recommendedImageOne’).attr(‘href’, linkOne);

var linkTwo = $(‘.recommendedTitleTwo a’).attr(‘href’);
$(‘.recommendedImageTwo’).attr(‘href’, linkTwo);
var linkThree = $(‘.recommendedTitleThree a’).attr(‘href’);
$(‘.recommendedImageThree’).attr(‘href’, linkThree);
}
}
$.get(urlSplit, function(data) {
var a = $(data).find(« .blog-page-nav-previous »).length;
var b = $(data).find(« .blog-page-nav-previous a »).attr(« href »);
var postSearchOne = $(data).find(« .blog-title a »).each(function() {
blogPosts.push(this);
});

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 »);
var postSearchTwo = $(data).find(« .blog-title a »).each(function() {
blogPosts.push(this);
});
if (a == c) {
b = d;
getMore();
}
else {
getAnother();
}
});
}
else if (a != 1) {
getAnother();
}
}
getMore();
});
}

Cliquez sur sauvegarder et publiez votre site, vous verrez alors le widget recommander à la fin de chacun de vos articles. Si le widget ne s’affiche, vider le cache de votre navigateur.

J’espère que cet article vous a plu et que vous profiterez de votre nouveau widget, n’hésitez pas à me partager vos impressions et votre blog dans les commentaires. A bientôt pour un nouveau tutoriel weebly !