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

Pourquoi créer un widget article recommander ?

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.

Etape 1 : Ouvrez l’éditeur HTML/CSS

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

Etape 2 : Ajouter le code HTML

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>

Etape 4 : Ajouter le code CSS

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;
}

Etape 5 : Ajoutez le code JQuery

​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 !

3 réponses à “Comment créer un widget article recommander sur votre blog Weebly ?”

  1. Avatar de Lisa
    Lisa

    Cet article est très intéressant, il a beaucoup a ma sœur qui souhaite créer des Template et elle m’avait dit qu’on ne trouvait pas de tutos weebly en français. Elle est ravie de cette nouvelle catégorie.

  2. Avatar de spidery

    Heⅼlo friends, fastidіous piece of writing and nice urging commented at this place, I
    am actually enjoуing by these.

  3. Avatar de rl hitboxes

    I’m impressed, I have to admit. Rarely do
    I come across a blog that’s both educative and engaging, and without a doubt,
    you have hit the nail on the head. The problem is something which too few
    men and women are speaking intelligently about.

    I am very happy I stumbled across this in my search for something relating to this.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *