Comment ajouter un très beau widget Sitemap sur Blogger

Comment ajouter un très beau widget Sitemap sur Blogger - Un Sitemap est la chose la plus essentielle que chaque blogueur devrait ajouter dans son blog. Ce n'est pas juste une page, mais cela aide beaucoup à réduire immédiatement le taux de rebond en fournissant une navigation directe vers une étiquette spécifique. Le widget Sitemap du site que nous allons ajouter aujourd'hui affiche une liste d'articles sur le dernier ordre publié sous chaque catégorie. Ce widget est basé sur ajax. Il va s'afficher rapidement sans affecter les performances de votre blog. Nous allons aller loin et voir Comment ajouter ce widget Sitemap dans Blogger. Vous pouvez consulter un aperçu du widget en cliquant sur le bouton ci-dessous.

• Voir le résultat

Commençons l'étape-1 (Ajout CSS)

Avant de commencer, nous vous recommandons de faire une sauvegarde de votre modèle, afin d'éviter tout problème, et garder la conception de votre blog en lieu sûre.

connecter à votre compte Blogger et aller à >> Modèles >> Modifier le code HTML et rechercher la balise ]]></b:skin> et juste au-dessus collez le code suivant.

CSS/* Sitemap CSS Par mon-blogger-code.blogspot.com */
.mapasite {
    margin-bottom: 10px;
    background-color: #F8F8F8
}
.mapasite.active .mapa {
    display: block
}
.mapasite .mapa {
    display: none
}
.mapasite h2 {
    background-color: #EEE;
    color: #000;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 2px;
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 700
}
.mapasite h2 .botao {
    font-size: 18px;
    line-height: 1.2em
}
.botao .fa-minus-circle {
    color: #f30
}
.mapapost {
    overflow: hidden;
    margin-bottom: 20px;
    height: 70px;
    background-color: #FFF
}
.mapa {
    padding: 40px
}
.map-thumb {
    background-color: #F0F0F0;
    padding: 10px;
    display: block;
    width: 65px;
    height: 50px;
    float: left
}
.map-img {
    width: 65px;
    height: 50px;
    overflow: hidden;
    border-radius: 2px
}
.map-thumb a {
    width: 100%;
    height: 100%;
    display: block;
    transition: all .3s ease-out!important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important
}
.map-thumb a:hover {
    -webkit-transform: scale(1.1) rotate(-1.5deg)!important;
    -moz-transform: scale(1.1) rotate(-1.5deg)!important;
    transform: scale(1.1) rotate(-1.5deg)!important;
    transition: all .3s ease-out!important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important
}
.mapapost .wrp-titulo {
    padding-top: 10px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3em;
    padding-left: 25px;
    padding-right: 10px;
    display: block;
    overflow: hidden;
    margin-bottom: 5px
}
.mapapost .wrp-titulo a {
    
}
.mapapost .wrp-titulo a:hover {
    color: #f30;
    text-decoration: underline
}
.map-meta {
    display: block;
    float: left;
    overflow: hidden;
    padding-left: 25px;
}
.mapasite h2 .botao {
    float: right
}

Étape 2 (Ajout d'un script HTML)

Maintenant, c’est la partie la plus essentielle du tutoriel et vous devez le faire très soigneusement. Dans le modèle, recherchez la balise </ body> et collez le code HTML suivant juste au-dessus.

JS<script type='text/javascript'> 
            //<![CDATA[
var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var no_image_url = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5hNhtENCa35fBND1dN40Pya4qI3I_1UNSvZEzECHSYIwuS8jq9vIpsMUT9j47LKZCh2ffXEeTV1zxiogFk3Ntawbu7D8tnSG-U9IbZJ01c2khgAo75a9OwL6lV3pxWKuXTPoM1aol5jQ/s1600-r/nth.png";

           var static_page_text = $.trim($('.static_page .post-body').text());
if (static_page_text === "[sitemap]") {
    var postbody = $('.static_page .post-body');
    $.ajax({
        url: "/feeds/posts/default?alt=json-in-script",
        type: 'get',
        dataType: "jsonp",
        success: function(dataZ) {
            var blogLabels = [];
            for (var t = 0; t < dataZ.feed.category.length; t++) {
                blogLabels.push(dataZ.feed.category[t].term)
            }
            var blogLabels = blogLabels.join('/');
            postbody.html('<div class="siteLabel"></div>');
            $('.static_page .post-body .siteLabel').text(blogLabels);
            var splabel = $(".siteLabel").text().split("/");
            var splabels = "";
            for (get = 0; get < splabel.length; ++get) {
                splabels += "<span>" + splabel[get] + "</span>"
            }
            $(".siteLabel").html(splabels);
            $('.siteLabel span').each(function() {
                var mapLabel = $(this);
                var mapLabel_text = $(this).text();
                $.ajax({
                    url: "/feeds/posts/default/-/" + mapLabel_text + "?alt=json-in-script",
                    type: 'get',
                    dataType: "jsonp",
                    success: function(data) {
                        var posturl = "";
                        var htmlcode = '<div class="mapa">';
                        for (var i = 0; i < data.feed.entry.length; i++) {
                            for (var j = 0; j < data.feed.entry[i].link.length; j++) {
                                if (data.feed.entry[i].link[j].rel == "alternate") {
                                    posturl = data.feed.entry[i].link[j].href;
                                    break
                                }
                            }
                            var posttitle = data.feed.entry[i].title.$t;
                            var author = data.feed.entry[i].author[0].name.$t;
                            var get_date = data.feed.entry[i].published.$t,
                                year = get_date.substring(0, 4),
                                month = get_date.substring(5, 7),
                                day = get_date.substring(8, 10),
                                date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year;
                            var tag = data.feed.entry[i].category[0].term;
                            var content = data.feed.entry[i].content.$t;
                            var $content = $('<div>').html(content);
                            var src2 = data.feed.entry[i].media$thumbnail.url;
                            htmlcode += '<div class="mapapost"><div class="map-thumb"><div class="map-img"><a href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/></div></div><h3 class="wrp-titulo"><a href="' + posturl + '">' + posttitle + '</a></h3><div class="map-meta"><span class="p-author">' + author + '</span><span class="p-date">' + date + '</span></div></div>'
                        }
                        htmlcode += '</div>';
                        mapLabel.replaceWith('<div class="mapasite"><h2>' + mapLabel_text + '<span class="botao"><i class="fa fa-plus-circle"></i></span></h2>' + htmlcode + '</div>');
                        $(document).on('click', '.mapasite h2', function() {
                            $(this).parent('.mapasite').addClass('active');
                            $(this).find('.botao .fa').removeClass('fa-plus-circle').addClass('fa-minus-circle');
                        });
                        $(document).on('click', '.mapasite.active h2', function() {
                            $(this).parent('.mapasite').removeClass('active');
                            $(this).find('.botao .fa').addClass('fa-plus-circle').removeClass('fa-minus-circle');
                        });
                    }
                });
            });
        }
    });
}
            //]]>
</script>

Maintenant, enregistrez votre modèle et accédez aux pages pour ajouter le Sitemap.

Remarque: le widget fonctionne sur jQuery, vous devez donc ajouter ce plugin dans votre template s'il n'est pas encore installé

Copier le code du plugin jquery et coller le avant la balise </head>

Jquery
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>

Étape 3 ( - La plus importante! - l'ajout du Sitemap dans vos pages)

À présent, c’est la partie la plus essentielle du tutoriel et vous devez être très attentif. Allez dans le tableau de bord de votre Blogger> Pages> Ajouter une nouvelle page.

Sur le nouveau contenu de la page après avoir ajouté le titre de la page et masqué les commentaires à l'aide des options, ajoutez le code suivant dans la zone de contenu de la page.

[sitemap]

Pour mieux comprendre, regarder l'image en bas

Maintenant, cliquez sur le bouton Publier et consultez la page Sitemap nouvellement ajouté.😉

Conclusion

Félicitations !! Vous l'avez fait. Maintenant que vous avez appris comment ajouter un widget Sitemap dans Blogger. Visitez votre blog et vérifiez le widget génial en direct. Si vous avez aimé ce tutoriel, partagez-le avec vos amis, nous travaillons fort pour développer d'autres widgets aussi géniaux, restez toujours connectés avec nous. au revoir et à bientôt !! 😊