Mon Blogger Code

Accélérez le chargement du blog avec AdSense Lazy Load

noreply@blogger.com (Mon Blogger Code) — Sat, 22 Dec 2018 03:06:00 +0000

Pour les gens qui utilisent leurs blogs pour avoir des sources de revenus, ils connaissent certainement Google AdSense. Oui, AdSense est la régie publicitaire de Google utilisant les sites web ou les vidéos YouTube comme support pour ses annonces. Pour qu'un webmestre devienne partenaire d'Adsense et génère des revenus publicitaires pour son propre compte, il doit publier du contenu sur son propre site et y faire figurer le code Adsense fourni par Google.

En revanche, AdSense est l’un des contributeurs au chargement, car les annonces affichées par JS AdSense réduiront la vitesse de chargement de notre blog, même si JS AdSense utilise déjà la technologie asynchrone, mais cela fera tout de même attendre le chargement du blog.

Ici, je vais donner un exemple d'image de comparaison avant et après l'utilisation de cette astuce AdSense Lazy Load. Vous trouverez ci-dessous un exemple d'image avant d'utiliser l'astuce Lazy Load AdSense :

Vérifier avec GTmetrix

Et en utilisant Google PageSpeed Insights

En consultant Mon Blogger Code sur GTmetrix, le score 62% PageSpeed Score et 60% YSlow Score. Et pour PageSpeed Insights, 91% résultats pour Desktop et 34% pour Mobile. Pas vite en effet. Mais après avoir installé le code AdSense Lazy Load, les résultats étaient meilleurs qu'avant, comme dans l'image ci-dessous :

Et en utilisant Google PageSpeed Insights

Après l’avoir installé le script AdSense Lazy Load le score pour PageSpeed Insights, 100% résultats pour Desktop et 81% pour Mobile. Oui, ce n'est pas encore parfait pour Mobile, mais au moins, il y a eu une augmentation par rapport à avant.

Eh bien, pour les amis qui veulent accélérer le chargement de leur blog, veuillez suivre les conseils suivants.

Accélérez le chargement du blog avec AdSense Lazy Load

La façon dont le code fonctionne est assez simple, c'est-à-dire que l'annonce apparaît après le défilement de la page. AdSense JS n'apparaîtra donc pas avant le défilement de la page du site.

Ces conseils sont destinés aux amis ayant installé AdSense sur leur blog. Pour ceux qui ne l'ont pas encore fait, le code que je partagerai peut être utilisé pour d'autres besoins, tels que le chargement d'un lien JS externe.

Ouvrez Blogger >> Cliquez sur le menu Thèmes >> Cliquez sur le bouton Modifier HTML >> Ajoutez le code ci-dessous avant </body> ou </body>

JS<script type='text/javascript'>
//<![CDATA[
// Lazy Load AdSense
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script>

Sinon, assurez-vous de supprimer tous les liens AdSense JS généralement installés dans le code de bloc d'annonces AdSense. Comme ceci :

JS<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Ce code peut également être combiné avec le lien JS Adblock Killer que j'ai partagé dans un article Comment installer la dernière version d'Adblock Killer. Pour ceux d'entre vous qui ont fait le tour, vous pouvez utiliser ce code :

JS<script type='text/javascript'>
//<![CDATA[
// Lazy Load AdSense
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://rawcdn.githack.com/Arlina-Design/quasar/23207858/arlinablock.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script>

Après avoir ajouté le code, cliquez sur le bouton Enregistrer le thème et terminez.

Vous vous demandez peut-être si ce code est sans danger pour notre programme AdSense?

La réponse est bien sûr en toute sécurité. Parce que Google a également suggéré d’accélérer le chargement du blog et d’installer le code d’image Lazy Load pour accélérer le chargement des images sur les pages du site.

Cela affectera-t-il les revenus de notre blog AdSense?

Je ne sais pas pour l'instant, car je viens de l'installer moi-même. Regardons simplement les progrès, si le revenu est réduit, ce n'est peut-être pas notre fortune 😊 hehe ... Euh, la solution est que vous pouvez révoquer le code et le restaurer comme avant.

En conclusion, donnez la priorité aux besoins. Si vous souhaitez bloguer plus rapidement, vous pouvez utiliser l’astuce ci-dessus, mais si vous n'êtes toujours pas sûr de la diminution des revenus AdSense (qui vont probablement) diminuer, vous souhaitez simplement l’installer. Mais pour moi, c’est ce que je considère être une nouvelle expérience. Ce que j’apprécie ici, c’est la progression "L’installation de ce code aura-t-elle une incidence sur AdSense?" Eh bien, cette curiosité me rend plus excité même s'il y a des risques qui doivent être acceptés

OK, c'est la fin de ce tutoriel pour Accélérer le chargement du blog avec AdSense Lazy Load. J'espère que cela sera utile pour tous les amis au revoir et à bientôt !! 😊

Comment installer le widget Google Traduction

noreply@blogger.com (Mon Blogger Code) — Mon, 10 Dec 2018 14:54:00 +0000

Comment installer le widget Google Traduction - On trouve souvent des sites Web qui installent des widgets de traduction avec des rangées de styles de drapeaux provenant de divers pays et servant à traduire une page dans une langue particulière. Blogger lui-même a déjà un widget Google Translate par défaut avec la même fonction avec 3 styles différents, à savoir Vertical, Horizontal et Déroulant.

Eh bien cette fois, je vais partager avec vous ce widget Google Traduction avec un style différent que vous pouvez installer dans la barre latérale ou le pied de page du blog. Voici comment l'appliquer :

Ouvrez votre blogger >> Mise en page >> Cliquez ensuite sur Ajouter un gadget >> Cliquez sur HTML / JavaScript >> Copier et coller tout le code ci-dessous >> Enregistrer le widget.

<style type="text/css">
#translator-wrapper {
  display:block;
  width:90%;
  max-width:300px;  
  border:none;  
  background-color:#fff;
  color:#444;
  overflow:hidden;
  position:relative;
  height:40px;
  line-height:40px;
  border:1px solid #e0e0e0;
}
#translator-wrapper select {
  border:none;
  background:transparent;
  font-family:'Verdana',Arial,Sans-Serif;
  font-size:12px;
  width:100%;
  color:#444;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-appearance:none;
  cursor:text;
  padding:5px 10px;
}
#translator-wrapper a,
#translator-wrapper a:hover {
  display:block;
  background-color:#4791d2;
  border:none;
  color:#fff;
  margin:0 0;
  text-decoration:none;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  cursor:pointer;
  width:14%; 
  transition:all 0.3s ease;  
}
#translator-wrapper a:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:6px solid transparent;
  border-left-color:white;
  position:absolute;
  top:50%;
  left:45%;
  margin-top:-5px;
}
#translator-wrapper a:hover {opacity:0.9;}
#translator-wrapper a:active {opacity:0.9;}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
  border:none;
  outline:none;
  cursor:pointer;
}
option {
  background:#444;
  color:#e0e0e0;
}
</style>
<div id="translator-wrapper">
    <select id="translate-language">
        <option value="en" selected="selected">English</option>
        <option value="id">Indonesian</option>
        <option value="af">Afrikaans</option>
        <option value="sq">Albanian</option>
        <option value="ar">Arabic</option>
        <option value="hy">Armenian</option>
        <option value="az">Azerbaijani</option>
        <option value="eu">Basque</option>
        <option value="be">Belarusian</option>
        <option value="bn">Bengali</option>
        <option value="bg">Bulgarian</option>
        <option value="ca">Catalan</option>
        <option value="zh-CN">Chinese</option>
        <option value="hr">Croatian</option>
        <option value="cs">Czech</option>
        <option value="da">Danish</option>
        <option value="nl">Dutch</option>
        <option value="en">English</option>
        <option value="eo">Esperanto</option>
        <option value="et">Estonian</option>
        <option value="tl">Filipino</option>
        <option value="fi">Finnish</option>
        <option value="fr">French</option>
        <option value="gl">Galician</option>
        <option value="ka">Georgian</option>
        <option value="de">German</option>
        <option value="el">Greek</option>
        <option value="gu">Gujarati</option>
        <option value="ht">Haitian Creole</option>
        <option value="iw">Hebrew</option>
        <option value="hi">Hindi</option>
        <option value="hu">Hungarian</option>
        <option value="is">Icelandic</option>
        <option value="id">Indonesian</option>
        <option value="ga">Irish</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="kn">Kannada</option>
        <option value="ko">Korean</option>
        <option value="la">Latin</option>
        <option value="lv">Latvian</option>
        <option value="lt">Lithuanian</option>
        <option value="mk">Macedonian</option>
        <option value="ms">Malay</option>
        <option value="mt">Maltese</option>
        <option value="no">Norwegian</option>
        <option value="fa">Persian</option>
        <option value="pl">Polish</option>
        <option value="pt">Portuguese</option>
        <option value="ro">Romanian</option>
        <option value="ru">Russian</option>
        <option value="sr">Serbian</option>
        <option value="sk">Slovak</option>
        <option value="sl">Slovenian</option>
        <option value="es">Spanish</option>
        <option value="sw">Swahili</option>
        <option value="sv">Swedish</option>
        <option value="ta">Tamil</option>
        <option value="te">Telugu</option>
        <option value="th">Thai</option>
        <option value="tr">Turkish</option>
        <option value="uk">Ukrainian</option>
        <option value="ur">Urdu</option>
        <option value="vi">Vietnamese</option>
        <option value="cy">Welsh</option>
        <option value="yi">Yiddish</option>
    </select><a id="translate-me" href="#" title="Translate"></a>
</div>
<script type="text/javascript">
(function() {
    var mylang = "id", // Your website language
        anchor = document.getElementById('translate-me');
    anchor.onclick = function() {
        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
    };
})();
</script>

Voir le résultat

Pour définir la largeur du widget, les couleurs et autres, vous pouvez ajuster le thème de votre blog.

Bonne chance au revoir et à bientôt !! 😊

La fonction Robot.txt sur Blogger

noreply@blogger.com (Mon Blogger Code) — Sat, 01 Dec 2018 19:17:00 +0000

La fonction Robot.txt sur Blogger - Le fichier Robot.txt est un outil très important, pour faciliter l’exploration et l’indexation des blogs dans le SE (moteur de recherche).

Le Robot.txt est simplement une convention qui Commande les robots des moteurs de recherche d'explorer vos pages de site ou bien empêche également l'indexation de toutes les pages.

Par exemple, vous ne voulez pas que certaines pages de votre site soient affichées sur les moteurs de recherche! et avec le Robot.txt, nous pouvons utiliser cette fonction pour bloquer la page.

Tous les blogspot comportent des robots txt fournis par blogger, avec la confuguration par défaut robot.txt comme ci-dessous :

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: https://mon-blogger-code.blogspot.com/sitemap.xml

Les significations du code Robot.txt :

User-agent: Mediapartners-Google - L'agent utilisateur de Google indique que ce blog appartient à Google.
Disallow: - Non autorisé
User-agent: * - Tous les robots des moteurs de recherche.
Disallow: /search - Non autorisé à explorer le dossier de recherche, etc.
Allow: / - Permet aux pages d'être explorées, à l'exception de celles qui ont Disallow.
Sitemap: - https://mon-blogger-code.blogspot.com/sitemap.xml : Adresse de votre flux blog / plan du blog.

Et bien voila ca etait qu’une petite explication sur les fonctions du Robot.txt. j'espère que cette article vous sera utile 😊

Comment choisir un bon nom de site pour votre blog

noreply@blogger.com (Mon Blogger Code) — Sun, 25 Nov 2018 23:41:00 +0000

Comment choisir un bon nom de site pour votre blog - Pour choisir un bon nom de blog il doit y avoir beaucoup de considération dans votre esprit, et selon vos goûts.

choisir un nom de site Web peut prendre votre temps et votre esprit si vous n'avez pas de concepts et d'idées clairs.

Mon Blogger Code va vous fournir 3 règles simples que vous pouvez suivre pour choisir le nom d’un site ou d’un blog qui soit bon et correct.

1. Un nom qui doit décrire votre site web

Il est probable que beaucoup de gens vont voir un lien vers votre blog avant de décider de prendre réellement le temps de lire (par exemple dans un moteur de recherche). ils peuvent trouver ce qui est discuté par le site / blog, s’il est pertinent par rapport à ce qu’il cherche, bien sûr, il laissera tomber le choix et cliquera sur votre blog dans le moteur de recherche.

2. Un nom doit être facile de se souvenir

Nous supposons que votre site Web parlera de robots et de la façon de les fabriquer. Ensuite, nommez votre site Web par exemple "Robotic | Tutoriel sur la création de ressources et de robots ". Cela semble court et facile à retenir.

3. Un nom doit être identique au nom du domaine

Autant que possible, créez un titre de blog qui correspond au nom de domaine ou au moins doit être approprié. Cela est parfois négligé par certaines personnes, peut-être parce que trouver un nom de domaine encore disponible aujourd'hui est assez difficile car il y a trop de sites Web. Gardez à l'esprit que si vous choisissez un nom de domaine défavorable, vous risquez de perdre des lecteurs à l'avenir. Imaginez que si vous avez un nom de domaine qui ne correspond pas au sujet de votre site Web ou au titre de votre site Web, cela peut poser problème, car parfois des personnes accèdent à votre blog via le titre de votre blog sur un autre site Web, imaginez qu’un jour il se souvienne seulement du titre, Parce que vous avez un nom de domaine qui ne correspond pas au titre, il est probable que le visiteur trouvera cela difficile s'il souhaite revenir à votre site Web.

En gros, voila 3 façons pour choisir un bon nom de domaine. J'espère que cela peut éliminer votre petite confusion. Pour ceux qui ont déjà trompés dans leurs choix d’un nom de domaine, haha désolé cet article va vous perturber sur vos anciens choix de nom domaine / blog.

Mais ne vous inquiétez pas trop, gardez à l'esprit que le contenu d'un blog / site est plus important que tout, si vous avez un bon contenu alors le nom de domaine peut être un problème dépourvu de sens, concentrez-vous sur un contenu utile.

ajouter un slider responsive pour les postes récents blogger

noreply@blogger.com (Mon Blogger Code) — Fri, 23 Nov 2018 19:29:00 +0000

Ajouter Un Slider Responsive Pour Les Postes Récents Blogger - Cette fois-ci, Sur "Mon Blogger Code" je vais vous expliquer comment installer un "Slider Responsive" pour les postes récents Blogger.

Eh bien commencent Immédiatement 😊

1. Connectez-vous à votre blogger >> Thème >> Modifier le code HTML

Puis copiez et collez le code ci-dessous juste avant la balise ]]></b:skin> ou </style>

CSS/* CSS Slider Responsive Postes Récents */
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background:none;background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

Dans le CSS ci-dessus, j'utilise la police Oswald. Modifiez-le et ajustez-le au thème de votre blog.

2. Copiez et collez le code ci-dessous juste au-dessus de la balise </body>

JS<script type="text/javascript" src="https://res.cloudinary.com/mon-blogger-code/raw/upload/v1542996855/slider-posts.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"URL-BLOG-ANDA",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Changer "URL-BLOG" avec l'URL de votre blog.

3. Copiez et collez le code ci-dessous la ou vous voulez que le slider apparaisse ou bien en dessus de content-wrapper ou menu-wrapper

HTML<div id="featuredpost"></div>

4. Enfin enregistrer le modèle et afficher les résultats.

Si vous souhaitez que ce Slider ne figure que sur la page principale, veuillez ajoutez une balise conditionnelle Exemple :

HTML<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="featuredpost"></div>
</b:if>

Et si quelqu'un trouve des difficultés dans l'installation, j'ai fourni une autre version pratique. Il vous suffit de copier tout le code ci-dessous dans Mise en page >> Ajouter un gadget >> HTML / JavaScript et de coller tout le code >> Enregistrer

CSS<style>
/* CSS Slider Responsive Postes Récents */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://res.cloudinary.com/mon-blogger-code/raw/upload/v1542996855/slider-posts.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"URL-BLOG",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Si vous souhaitez que ce Slider n'apparaît que sur la page principale, veuillez envelopper le widget avec une balise conditionnelle spéciale sur la page principale. Exemple :

Cliquez sur Thème >> modifier le code HTML >> Supposons que le code de votre Slider soit #HTML4

HTML<b:widget id='HTML4' locked='false' title='' type='HTML'>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
    </b:widget>

Ajoutez des tags conditionnels au widget comme ceci :

HTML<b:widget id='HTML4' locked='false' title='' type='HTML'>
      <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
    </b:widget>

Voir le résultat

Informations :

MaxPost : Le nombre de tous les articles qui apparaîtront dans la liste.
ImageSize : La taille maximale de l'image (plus la taille est grande, plus la densité de pixels de l'image apparaîtra, mais plus le temps nécessaire au chargement de la page sera long)
Interval : temps nécessaire pour que la publication soit déplacée (exemple: 10000, ce qui signifie 10 secondes)
Autoplay : (True) Post se déplacera automatiquement, (False) Post ne se déplacera pas automatiquement.

Si vous rencontrez des difficultés concernant l'installation, n'hésitez pas à les mentionner dans la zone des commentaires. au revoir et à bientôt !! 😊

Comment surmonter le problème Thumbnail Share Partager Publier sur Facebook

noreply@blogger.com (Mon Blogger Code) — Thu, 22 Nov 2018 16:34:00 +0000

Comment surmonter le problème "Thumbnail Share" Partager Publier sur Facebook - Comment fixer les problèmes Thumbnail Share des articles de blog qui n'apparaissent pas lors du partage sur Facebook.

Cela se produit lorsque le moteur de recherche de Facebook ne parvient pas à récupérer les données de la page lorsque l'article du blog est partagé avec Facebook, ce qui est très dérangeant car même si les dimensions de l'image affichée sont très petites, elles ne mesurent que 90x90 pixels. Je vais donc proposer une solution en ajoutant une balise méta Facebook Open Graph sur le blog.

Pour commencer, veuillez suivre les étapes ci-dessous :

Remarque : avant de commencer, il est conseillé de faire une sauvegarde de votre modèle en premier.

Ouvrez Blogger >> Cliquez sur Thème >> Modifier le code HTML.

Copiez et collez le code Meta ci-dessous juste en bas de la balise <head>

HTML<!-- [ Social Media meta tag ] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='DESCRIPTION DU CONTENU ALTERNATIVE ICI' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='CODE-APPLICATION ICI' property='fb:app_id'/>
<meta content='CODE-ADMIN ICI' property='fb:admins'/>
<meta content='fr_FR' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

A l'étape suivante, Copiez et collez le code ci-dessous juste en bas de la balise <body>

JS<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'CODE-APPLICATION',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/fr_FR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Enregistrez le modèle.

DESCRIPTION :

Description du contenu alternative ici : Une description alternative apparaît si le poste n'a pas une description.

Code-Application ici : Remplissez le code de votre application Facebook.

Code-Admin ici : Entrez le code du profil ou le code de votre page Facebook.

Information supplémentaire :

Assurez-vous que l'image téléchargée a des dimensions non inférieures à 600 × 315 pixels. Si ce n'est pas suffisant, Facebook redimensionne l'image à 90x90 pixels. Il est bon d'utiliser des images de dimensions 1200 × 630 pixels, 800 × 420 pixels et 600 × 315 pixels.

Une fois que tout est mis en œuvre, veuillez vérifier l'un des articles de votre blog sur l'URL ici :

DÉBUGUER

Après avoir appliqué la procédure, la mise à jour automatique de votre blog sera stocké sur le système de recherche de Facebook. En savoir plus

J'espère que vous avez trouvé cette Article utile et facile.

Si vous rencontrez des problèmes concernant l'installation, n'hésitez pas à les mentionner dans la zone des commentaires. au revoir et à bientôt !! 😊

Comment installer des commentaires Responsive Facebook sur Blogger

noreply@blogger.com (Mon Blogger Code) — Wed, 21 Nov 2018 17:47:00 +0000

Comment installer des commentaires Responsive Facebook sur Blogger - Toujours en discussion, le deuxième tutoriel d'aujourd'hui, Mon Blogger Code, expliquera comment installer des commentaires Facebook Responsive sur Blogger. L'avantage d'installer des commentaires Facebook sur un blog permet aux visiteurs de commenter directement les articles qu'ils lisent en utilisant un compte Facebook.

Lisez aussi : Comment surmonter le problème "Thumbnail Share" Partager Publier sur Facebook

Comment installer des commentaires Responsive Facebook sur Blogger

1. Ajouter la balise META Facebook ci-dessous dans votre modèle juste en dessous de <head>

HTML<meta content='Facebook admin ID code' property='fb:admins'/>
<meta content='Facebook Application ID Code' property='fb:app_id'/>

Remarque: Si vous avez déjà fait les étapes ci-dessus, passez à l'étape suivante.

2. Ajouter le code ci-dessous avant la balise </head>

JS<script>(function(d, s, id) {
               var js, fjs = d.getElementsByTagName(s)[0];
               if (d.getElementById(id)) return;
               js = d.createElement(s); js.id = id;
               js.src = &quot;//connect.facebook.net/id_ID/sdk.js#xfbml=1&amp;version=v2.9&amp;appId=562901580420523&quot;;
               fjs.parentNode.insertBefore(js, fjs);
               }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
            </script>

3. Ajoutez ensuite le code ci-dessous juste en dessous du code <data:post.body/>

HTML<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/fr_FR/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if>

4. Enregistrez le modèle.

Pour afficher le nombre de commentaires Facebook sur la page d’index et la publication, veuillez ajouter le code ci-dessous à la balise Méta ou aux informations de publication en fonction du modèle utilisé :

HTML<a expr:href='data:post.url + &quot;#fb-comment&quot;'><span class="fb-comments-count" expr:data-href='data:post.url'></span> facebook comments</a>

Félicitations !! au revoir et à bientôt !! 😊

Installer des commentaires Facebook et Blogger Responsive

noreply@blogger.com (Mon Blogger Code) — Wed, 21 Nov 2018 16:55:00 +0000

Installer des commentaires Facebook et Blogger Responsive - Les commentaires sur Facebook et Blogger côte à côte sont deux choses très liées, car nous savons que dans les commentaires de blogger, l'administrateur ne propose généralement que la colonne de commentaire par défaut du blogger et que certains visiteurs peuvent ne pas avoir de compte Google, mais un compte Facebook.

Nous devons donc également mettre la colonne de commentaires sur Facebook aux côtés des commentaires Blogger afin que les visiteurs qui n'ont pas un compte Google puissent commenter à l'aide de leur compte Facebook. Le code Responsive des commentaires Facebook est associé à un tutoriel du blog Mon Blogger Code sur l'article Comment installer des commentaires Responsive Facebook sur Blogger

Comment installer côte à côte les commentaires Responsive Facebook et Blogger

1. Connectez-vous à blogger >> Thème >> Modifier le code HTML Copiez le code ci-dessous et collez le avant la balise ]]></b:skin> ou </style>

CSS/* Commentaires Facebook et Blogger */
.komentargabungan-page,.komentargabungan-tab{display:inline-block;background:#fafafa;color:#fff;float:left;margin:0 10px 0 0;cursor:pointer;font-weight:bold;position:relative;font-size:110%;z-index:10}
.komentargabungan-page{background:rgba(255,255,255,1);width:100%;max-width:100%;margin:0 0 20px}
#blogger-comments-page h4{display:none}
#blogger-comments-page p{color:#444;}
#blogger-comments-page {padding:0px 5px;display:none;}
.komentargabungan-tab{background:#3b5998;padding:12px;transition:all .3s;}
.komentargabungan-tab:nth-child(2) {background:#fda753;transition:all .3s;}
.komentargabungan-tab:hover:nth-child(2) {background:#e1954a;}
.komentargabungan-tab-icon {height:14px;width:auto;margin:0 3px}
.komentargabungan-tab:hover{background-color:#324c82;}
.inactive-select-tab {background:#aaa}
.inactive-select-tab,.komentargabungan-tab:hover {background-color:#324c82;}

2. Copiez ensuite le code ci-dessous et collez le avant la balise </body>

JS<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize",function(){var o=location.protocol+"//"+location.host+location.pathname,t=$("#container-commentfb").width();$("#container-commentfb").html('<div class="fb-comments" data-href="'+o+'" width="'+t+'" data-num-posts="10"></div>'),FB.XFBML.parse()});
//]]>
</script>

3. Dans le modèle, il y a deux codes <div class='comments' id='comments'>, copier le code ci-dessous et collez le juste en dessous des deux codes, <div class='comments' id='comments'>

HTML<div class='komentargabungan-tab' id='fb-comments' onclick='javascript: commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
<fb:comments-count expr:href='data:post.url'/> Commentaires Facebook</div>
<div class='komentargabungan-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'>
<data:post.numComments/> Commentaires Blogger</div>
<div class='clear'/>
</div>
<div class='komentargabungan-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if></div>
<div class='comments komentargabungan-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/fr_FR/all.js#xfbml=1'/>
<script type='text/javascript'>
function commentToggle(selectTab) {$(&quot;.komentargabungan-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.komentargabungan-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}
</script>

4. Enregistrez le modèle et consultez les résultats sur le blog.

J'espère que cette article vous sera utile au revoir et à bientôt 😊

Comment créer des images Responsive sur Blogger

noreply@blogger.com (Mon Blogger Code) — Tue, 20 Nov 2018 20:49:00 +0000

Comment créer des images Responsive sur Blogger - Des problèmes surviennent souvent lorsque vous essayez d'envoyer des images d'une largeur supérieure à la taille du contenu d'un article de blog ou que l'image ne répond pas lorsque vous modifiez la taille de votre navigateur.

Voir le résultat

Dans la démonstration ci-dessus, l'image intérieure dépasse la largeur du contenu car celle-ci est supérieure à la largeur du contenu.

Avec ce là, je vais vous donner quelques conseils sur la façon de surmonter l'image qui ne répond pas en vous donnant un code CSS pour l'image.. (Cette astuce est pleinement applicable à tous les modèles de blog).

Veuillez ouvrir votre blog >> Thème >> Modifier le code HTML >> Copier et coller le code CSS ci-dessous avant la balise ]]></b:skin> ou </style>

CSS.post-body img {
  max-width:100%;
  height:auto;
}

Enregistrez ensuite les modifications et consultez les résultats.

Voir le résultat

C'est facile, n'est-ce pas ? Félicitations !! au revoir et à bientôt !! 😊

Meta Tags SEO Friendly pour Blogger

noreply@blogger.com (Mon Blogger Code) — Tue, 20 Nov 2018 15:41:00 +0000

Meta Tags SEO Friendly pour Blogger - Les balises méta de blogger ont également été expliquées par de nombreux blogueurs. Mais dans cet article, je vais expliquer les tags Meta Friendly SEO pour les blogs.

L’installation d’une balise méta est également l'une des optimisations les plus importants de blogs afin que les blogs et les articles que nous publions aient une identité claire. Ainsi, les robots de Google peuvent facilement classer les blogs et les articles à trier dans SERP.

SEO Meta Tags pour les blogueurs

La fonction méta tag :

Fondamentalement, la balise méta se compose de plusieurs balises d'élément importantes, notamment :

La balise Meta Description : La balise Meta Description est utilisée pour fournir un aperçu du contenu de votre page Web. ca taille recommandée et de 200 caractères. Et essayez de faire en sorte que cette description soit :

<meta content=' Écrivez une description ici'  name='description'/>

La balise Meta keywords : est une balise meta du langage html. Cela signifie que c'est une balise qui se trouve dans le code source html d'une page (non visible donc pour l'internaute) et qui indique au moteur de recherche certaines informations (certaines métadonnées).

En l'occurrence elle indique que les mots compris dans cette balise sont les mots clés de la page. C'était une balise très utilisée en SEO : les moteurs Altavista et Infoseek le prenait en compte ; il suffisait de mettre les mots clés de la page dans cette balise pour se positionner sur ces mots.

<meta name="keywords" content="keyword1, keyword2, keyword3, ...>

La balises meta robots : est une balise HTML qui permet de contrôler la façon dont les moteurs de recherches explorent et indexent une page.

Concrètement, cela permet à un Webmaster d'interdire à un moteur de recherche comme Google ou Bing d'indexer une page ou de suivre les liens qu'elle contient.

Généralement, un webmaster est ravi que les moteurs d'indexation des principaux moteurs de recherche indexent la totalité de son site. Plus son site apparaîtra dans les résultats de recherche, plus il aura du trafic "naturel".

Cependant, il peut arriver qu'un Webmaster ne souhaite pas que certaines pages de son site puissent apparaître dans les résultats des moteurs de recherche (URL de back-office, contenu premium pour ses visiteurs uniquement, pages pas encore terminée...). La balise meta robot est un des moyens possibles pour bloquer cette indexation.

<meta name="robots" content="index follow">

Eh bien, les trois composants importants de cette balise méta, s’ils sont combinés, sont les suivants:

<meta content=' Écrivez une description ici' name='description'/>
<meta content='keyword1 keyword2 keyword3 ...' name='keywords'/>
<meta content='index, follow' name='robots'/>

Meta Tag SEO Friendly

Les balises Meta Tag SEO Friendly : ce sont des balises Optimisé pour le référencement ayant plusieurs fonctions. En d'autres termes, chaque étiquette explique la différence entre une page d'accueil et une seule page. Les balises méta telles que celle-ci sont également appelées balises méta dynamiques ou souvent appelées balises méta automatiques. Les composants de la balise meta sont combinés comme ci-dessous.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<meta content='Ecrire une description de votre blog' name='description'/>
<meta content='keyword1, keyword2, keyword3' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> | Titre de votre blog</title>
<meta expr:content='data:blog.pageName + &quot;,Ecrire une description de votre blog&quot;' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;,keyword1, keyword2, keyword3&quot;' name='Keywords'/>
<meta content='index, follow' name='robots'/>
</b:if>

Eh bien, maintenant comment puis-je mettre les balises meta dans le blog? Pour cela, voir le tutoriel sur l’installation d’une balise META, que je vais expliquer plus bas.

Comment installer des balises méta sur un blog

Connectez-vous à votre Blogger >> Cliquez sur Thème >> Modifier le code HTML >> Ajoutez ensuite le code ci-dessus juste en dessous de la balise <head>

Je pense qu'il est assez facile d'installer la méta-tag dans Blogger. Je termine donc l'article sur les balises Meta Friendly SEO pour Blogger. Félicitations !! au revoir et à bientôt !! 😊

Mettre un pourcentage sur la barre de défilement blogger

noreply@blogger.com (Mon Blogger Code) — Mon, 19 Nov 2018 14:07:00 +0000

Installer un pourcentage sur la barre de défilement Blogger - Dans cette article je vais vous montrer comment installer la fonction de pourcentage sur la barre de défilement du blog. Peut-être avez-vous remarqué ce pourcentage sur d'autres blogs.

En réalité, le pourcentage de barres de défilement n'est pas un élément important pour un blog. Mais il n'y a rien de mal à essayer, et même dans ce cas, cela dépend de chaque goût.

En ajoutant ce pourcentage il va vous donner une jolie décoration du blog, en plus de ça les visiteurs pourront voir le pourcentage de pages défiler. Si cette valeur atteint le bas de la page, la valeur en pourcentage sera de 100%.

Comment le mettre en œuvre est assez simple, veuillez suivre les étapes suivantes:

1- Tout d'abord, copiez le code en bas et collez le juste au-dessus de la balise ]]></b:skin> ou </style>

CSS#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

2- Ensuite, ajouter le code en bas après la balise </head>

HTML<div id='scroll'></div>

3- Ajouter le code ci-dessous juste au-dessus de la balise </body>

JS<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

4- Ensuite, enregistrer le modèle et afficher les résultats.

Voir le résultat

Si vous avez suivez les étapes sans aucune faute, votre blog doit avoir un pourcentage à côté de la barre de défilement.

C'est facile, n'est-ce pas ? Félicitations !! au revoir et à bientôt !! 😊

Comment rapidement indexé votre blog sur les moteurs de recherches

noreply@blogger.com (Mon Blogger Code) — Sun, 18 Nov 2018 18:35:00 +0000

Comment rapidement indexé votre blog sur les moteurs de recherches - On se demande souvent comment indexé notre blog rapidement par Google ou sur d’autres moteurs de recherche. En fait, les astuces de référencement pour que les articles de blog apparaissent rapidement dans l'index de Google ont été largement commentées par des blogueurs et des experts en référencement, mais je vais partagé avec vous mon experience sur ce sujet.

L'indexation par les moteurs de recherche est très important pour la progression et le développement de votre blog. Sans être indexé, votre blog sera solitaire et semblera mort, même si vous écrivez un contenu frais et de qualité, mais que votre contenu sera enterré. le contenu de votre blog est reconnu et indexé par des moteurs de recherche tels que Google, Bing (Yandex) et d'autres moteurs de recherche, car près de 60% des visiteurs viendront du moteur de recherche. Il existe plusieurs techniques ou stratégies que vous devez appliquer pour être indexé rapidement.

Soumettre un sitemap au moteur de recherche Google / Bing / Yandex.

Un sitemap est une technique qui facilite le travail d'indexation des moteurs de recherche. Il ne s'agit pas d'une table des matières comme sur une page, mais d'un sitemap au format XML. Un XML est un langage uniquement approuvé par les moteurs de recherche. Les utilisateurs de Wordpress peuvent créer sitemap avec des plugins. Pour les utilisateurs de Blogspot, il est généralement intégré, comme dans l'exemple ci-dessous :

https://mon-blogger-code.blogspot.com/sitemap.xml
https://mon-blogger-code.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
https://mon-blogger-code.blogspot.com/feeds/posts/default?orderby=updated

Veuillez envoyer votre sitemap à la console de recherche Google. Pour Bing / Yahoo, envoyez-le à Bing Webmaster Tools.

Créer un lien "dofollow" vers votre page de publication.

Pour être indexé rapidement, vous devez créer un lien vers votre page de publication. Ne vous contentez pas des liens menant uniquement à la page d’accueil, créer des liens dofollow qui pointent vers votre contenu. Cela rendra également votre blog populaire et fiable aux yeux des moteurs de recherche. Les moteurs de recherche tels que Google sont très satisfaits des blogs qui contiennent des liens dofollow pertinents qui pointent vers les pages de votre blog. DA et PA peuvent également être obtenus.

Le moyen le plus rapide d’être indexé par Google et le bookmarking social / les médias sociaux.

Un moyen très rapide d'indexer votre blog sur les moteurs de recherche consiste à partager votre contenu sur des sites de médias sociaux ou des réseaux de partage, tels que Google+, Twitter, Facebook, Linkedin, Pinterest, etc. En outre, votre blog générera également du trafic sur ces sites de médias sociaux.

Des liens internes Dans votre Blog.

Si vous souhaitez que les nouvelles pages de votre blog soient indexées rapidement, les liens internes seront très utiles. Mentionnez votre nouvelle page avec des liens de texte d'ancrage et mettez à jour les pages (mises à jour) déjà indexées en incluant un lien vers votre nouvelle page (assurez-vous que la discussion sur votre contenu précédent correspond à votre nouveau contenu).

Lier les pages de votre site ne consiste pas uniquement à créer des liens externes. Il est également très important de créer des liens sur votre site Web (liens internes) qui rappelleront aux moteurs de recherche la présence de nouveaux contenus sur votre site.

Utiliser le ping pour alerter (Google, Bing, annuaires) des mises à jour.

Le Ping était à l’origine une méthode permettant aux blogueurs d’avertir les moteurs de recherche de nouveaux contenus sur leurs blogs. Cependant, il a été développé pour que tout le monde puisse l'utiliser pour mettre à jour non seulement des blogs mais également des sites Web traditionnels.

Le Ping est un moyen très utile pour alerter les moteurs de recherche et les annuaires des mises à jour de votre contenu.

Il existe de nombreux sites de service de ping en ligne disponibles.

Voici quelque site connu en internet :

Ajouter des commentaires avec vos liens dans des blogs connus.

Les moteurs de recherche explorent régulièrement les blogs avec des lecteurs actifs. En commentant dans des tels blogs, vous obtiendrez un impact sur la popularité de vos pages seront indexées rapidement. Essayez de commenter les derniers articles dans des blogs déjà connus et dont le classement est élevé. Il s'agit d'un moyen très efficace d'obtenir de nouvelles pages indexées rapidement et de vous assurer que vous utilisez les pages que vous souhaitez indexer en tant qu'URL de votre site Web et aussi commenter non seulement le lien de votre page d'accueil, mais aussi des lien vers vos meilleurs articles.

Mettre à jour le contenu du blog / site régulièrement.

Assurez-vous de mettre à jour régulièrement votre site. Le nouveau contenu est important pour obtenir de nouvelles pages indexées. Si le contenu de votre blog est obsolète, les moteurs de recherche ne l'exploreront pas régulièrement, mais si vous maintenez votre blog à jour et actualisé (même si vous mettez à jour les pages d'index), les moteurs de recherche continueront à revenir. La raison pour laquelle de nombreux blogs ont de bonnes notes et un contenu indexé rapide n’est rien d’autre parce que le propriétaire du blog met souvent à jour son site avec du nouveau contenu.

Conception mobile conviviale et Responsive Design.

Inévitablement, les utilisateurs de gadgets pour smartphones et tablettes dépassent maintenant ceux d'utilisateurs de PC et d'ordinateurs portables. Il est donc impératif pour nous maintenant de modifier notre ancien modèle pour qu'il soit réactif et compatible avec les appareils mobiles, afin que les visiteurs qui visitent notre site / blog n'aient pas de difficulté à lire le contenu. C'est sur notre blog, surtout que Google a implémenté l'algorithme MOBILEGEDDON, qui nous oblige à créer un site Web / blog convivial pour mobile, ce qui aura bien évidemment un impact important sur le référencement de nos pages et notre classement sur Google, notamment sur mobile. Donc, pour ceux qui utilisent encore d'anciens modèles, veuillez effectuer une mise à niveau afin d'être compatible avec les appareils mobiles et d'être rapidement indexé par Google.

Ce sont là quelques conseils sur la façon de comment rapidement indexé votre blog sur les moteurs de recherches selon mon expérience.

J'espère que cette article vous sera utile au revoir et à bientôt 😊

Comment éliminer les Widgets qui ne peuvent pas être supprimer

noreply@blogger.com (Mon Blogger Code) — Sat, 17 Nov 2018 16:41:00 +0000

Comment éliminer les Widgets qui ne peuvent pas être supprimer - Mon Blogger Code partagera avec vous un petit tutoriel sur la façon de vaincre les widgets qui ne peuvent pas être supprimer.

Souvent, dans blogger on a l'habitude de modifier nos modèles ou bien de les personnaliser au choix, mais parfois en tombe sur des modèles de blog dont certains widgets ne peuvent pas être supprimés, ce qui crée de la confusion alors on décide de remplacer le modèle.

Pour remédier à cela, je vais fournir une solution pour ceux qui veulent supprimer un widget qui ne peut pas être supprimé. Voici le tutoriel :

1. Connectez-vous à votre blogger >> Sélectionnez Thème >> Modifier le code HTML >> Recherchez les widgets que vous souhaitez supprimer, par exemple le widget : Popular Posts

HTML<b:widget id='PopularPosts1' locked='true' title='Popular Posts' type='PopularPosts'>...</b:widget>

Remplacer le code qui est marqué par false, comme ça

HTML<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>...</b:widget>

2. Enregistrez le modèle >> Mise en page, recherchez le widget "Popular Posts", cliquez sur Modifier, puis sur Supprimer.

Répétez la méthode vous souhaitez supprimer d'autres widgets qui ne peuvent pas être supprimés.

J'espère que cette article vous sera utile au revoir et à bientôt 😊

Installer Smooth Back To Top sur Blogger

noreply@blogger.com (Mon Blogger Code) — Fri, 16 Nov 2018 03:31:00 +0000

Installer Smooth Back to Top sur Blogger - Sur ce tutoriel je vais vous montrer comment installer un bouton Retour au haut sur votre blog.

Le rôle et la fonction du bouton "Retour au haut" sont très importants, parce qu'il facilite la tâche des visiteurs qui souhaitent faire défiler la page en haut en cliquant simplement sur ce bouton.

Remarque : si votre modèle comporte déjà un bouton «Retour en haut» supprimez-le d'abord.

Voici les étapes de l'installation :

1. Connectez-vous à Blogger Tableau de bord >> sélectionnez Thème >> puis cliquez sur Modifier le code HTML, copiez le code ci-dessous et collez le après la balise <head> ou avant </head>

CSS<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Si vous avez déja la bibliothèque "Font Awesome" dans votre modèle alors, ignorez la première étape pour passer à l'étape suivante.

2. Copiez le code CSS ci-dessous et collez le avant la balise ]]></b:skin> ou </style>

CSS.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

3. Copiez le code jQuery et HTML ci-dessous et collez le avant la balise </body>

JS<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
    $(document).on( 'scroll', function(){
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
    $('.smoothscroll-top').on('click', scrollToTop);
});
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

4. Enregistrer le modèle et afficher les résultats.

Voir le résultat

Le bouton avec un effet de rebond supplémentaire

JS<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
    $(document).on( 'scroll', function(){
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

Voir le résultat

Note : Pour les paramètres de couleur et autres, vous pouvez les modifier à nouveau selon vos goûts.

Félicitations !! au revoir et à bientôt !! 😊

Comment ajouter un script Anti IFrame sur Blogger

noreply@blogger.com (Mon Blogger Code) — Thu, 15 Nov 2018 16:40:00 +0000

Comment ajouter un script Anti IFrame sur Blogger - et à quoi sert ce script anti IFrame?

Un script anti-IFrame est utilisé pour briser la fonction iframe elle-même. Par exemple j'ai une image qui a été indexée par Google Image, lorsque d'autres personnes veulent voir l'image ou une image, généralement, Google Image affiche les images des résultats de la recherche sur le devant et sur le site où l'image est en arrière-plan. En d'autres termes, nous ne serons pas directement dirigés vers le site de l'image.

Désormais, si vous installé ce script anti-iframe dans le modèle de votre blog lorsque un internaute clique sur l'image, il sera automatiquement redirigé vers l'URL de votre blog. Ainsi, vous obtiendrez également du trafic supplémentaire à partir des résultats de recherche d'images sur Google Image.

D'accord, maintenant la procedure est très simple copier et collez le code en bas au-dessus la balise </head>

JS<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
        if (top.location != self.location) {
          top.location = self.location
        }
</script>
</b:if>

Remarque : Avec un peu de balises conditionnelles supplémentaires, le script anti-iframe ci-dessus ne fonctionnera que sur les pages de postes de votre blog et ne rencontrera pas d'erreurs. Parce que blogger affiche uniquement la page d’index / page d’accueil.

J'espère que cette article vous sera utile au revoir et à bientôt 😊

Comment optimiser les images automatiquement pour le (SEO) Référencement

noreply@blogger.com (Mon Blogger Code) — Thu, 15 Nov 2018 03:12:00 +0000

Comment optimiser les images automatiquement pour le (SEO) Référencement - Cette opération est effectuée de sorte que les images de votre page de blog soient indexées automatiquement par les moteurs de recherche tels que Google, Bing... afin que vous ne soyez pas dérangé par leur ajout manuel (<img alt = "description de l'image" height = "125" scr = "/ image.png" width = "125" /> lors de la publication de photos). De cette manière, chaque image aura la même description que le titre de l'image. Par conséquent, vous devez donner le nom approprié à chaque image qui sera publiée.

Pourquoi l'optimisation des images devrait-elle être un référencement automatique?

Parce que l'image sur la page du blog est l'un des médias pouvant être utilisés pour le trafic sur les moteurs de recherche, car certains internautes aiment beaucoup faire des recherches en parcourant des images.

Voici comment installer un code de référencement automatique dans l'image

1- Recherchez le code </ body> dans votre modèle de blog,

2- Copiez et collez le code ci-dessous, juste au-dessus du code </ body>.

JS<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

3- Enregistrez le modèle.

En conclusion chaque image d'article aura automatiquement un code convivial pour le référencement.

Félicitations !! au revoir et à bientôt !! 😊

Comment se débarrasser des pinces et tournevis dans Blogger

noreply@blogger.com (Mon Blogger Code) — Wed, 14 Nov 2018 15:42:00 +0000

Comment éliminer les pinces et les tournevis dans Blogger - Les pinces et les tournevis apparaissent sur la page d'accueil d'un blog si nous sommes connectés. leur fonction est d’afficher une option éditer rapidement, directement sur votre blog.

Cette fonction est également importante lorsque nous souhaitons éditer

un gadget rapidement. En cliquant sur l'icône pinces et tournevis, nous sommes directement dirigés vers l'élément de page qui sera édité.

Mais il y a aussi des utilisateurs de Blogger qui n'aiment pas l'aspect des pinces et des tournevis. Donc pour les éliminer, la méthode est assez simple, veuillez suivre les étapes ci-dessous.

1. Connectez-vous au blog

2. Entrez dans le menu Thème

3. Modifier le code HTML

4. Recherchez la balise ]]></b:skin> ou </style>

Ajouter le code CSS suivant juste avant la balise ]]></b:skin> ou </style>

CSS.quickedit{
display:none;visibility:hidden;}

5. Enregistrez le modèle et affichez les résultats.

J'espère que cette astuce vous sera utile 😊

Comment supprimer le Gadget Powered by Blogger Attribution

noreply@blogger.com (Mon Blogger Code) — Tue, 13 Nov 2018 20:12:00 +0000

Comment supprimer le Gadget Powered by Blogger Attribution - Dans la plupart des Templates fournis par blogger on trouve toujours qu'ils contiennent le Gadget d'attribution de blogger. Cependant, si vous utiliser toujours le modèle par défaut de blogger alors ce Gadget d'attribution sera installé automatiquement. Le problème se pose lorsque des blogueurs souhaitent utiliser le modèle par défaut, mais aussi à l'occasion supprimer se Gadget d'attribution de blogger et ça pour plusieurs raisons.

Exemple du widget d'attribution par blogger 👇

Même s'il ne peut pas être supprimé manuellement, nous pouvons toujours supprimer l'attribution de blogger dans le modèle par défaut en ajoutant un code CSS pour masquer ce widget d'attribution via la modification du modèle HTML.

Pour supprimer l'attribution de blogger sur les modèles par défaut il y'a deux méthode :

Méthode 1 :

Aller au tableau de bord blogger → Aller à Thème → Modifier le HTML Cliquez n'importe où dans l'éditeur de code et appuyez sur CTRL + F et rechercher la balise </ head>

Copier ce code et coller le juste avant la balise </ head>

CSS<style> 
#attribution1{
display: none; }
</style>

Maintenant, cliquez sur « Enregistrer le modèle ».

Méthode 2 :

Aller au tableau de bord blogger → Aller à Thème → Modifier le HTML Cliquez n'importe où dans l'éditeur de code et appuyez sur CTRL + F et rechercher la balise ]]></b:skin>

Copier ce code et coller le avant la balise ]]></b:skin>

CSS#Attribution1 {height:0px;visibility:hidden;display:none}

Maintenant, cliquez sur « Enregistrer le modèle ».

Félicitations! Votre Blog est désormais sans le Gadget Powered by Blogger Attribution 😄

Comment ajouter un très beau widget Sitemap sur Blogger

noreply@blogger.com (Mon Blogger Code) — Fri, 09 Nov 2018 00:32:00 +0000

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

Comment ajouter un message sur le consentement Cookie Blogger

noreply@blogger.com (Mon Blogger Code) — Thu, 08 Nov 2018 17:15:00 +0000

Comment ajouter un message sur le consentement Cookie Blogger - À partir du 26 mai 2012, les sites Web britanniques / sociétés ou les sites Web ayant des visiteurs de pays européens sont tenus d'obtenir l'accord des utilisateurs du site Web en ce qui concerne le stockage ou la récupération de toute information sur un ordinateur, une tablette ou un téléphone mobile. Ce qui signifie qu'un administrateur de site Web doit informer ses visiteurs de la manière dont les cookies, c'est-à-dire les informations les concernant, sont stockés et utilisés en ligne. Laissez-les également choisir d'autoriser ou non le stockage de cookies.

Fondamentalement, la loi a été conçue pour protéger la vie privée de l'utilisateur, les cookies pouvant également être utilisés à des fins illégales. Les cookies sont une partie essentielle des navigateurs et des sites Web. Ils peuvent être utilisés pour rendre votre expérience de navigation plus fluide de différentes manières, par exemple en enregistrant vos préférences personnalisées, en vous souvenant de votre nom d'utilisateur ou des champs de texte que vous avez entrés auparavant. Bien qu'il existe de nombreux avantages à l'utilisation de cookies, certains inconvénients sont également indiqués, car les cookies tiers activés sur le site Web peuvent être utilisés pour des achats publicitaires, tels que les produits que vous avez achetés récemment, les produits que vous visualisez et, plus tard, que ces informations peuvent utiliser pour vous alimenter en annonces ciblées. . Vous vous demandez peut-être ce que sont réellement les cookies et pourquoi ils sont utilisés?

Qu'est-ce qu'un cookie?

Les cookies sont une petite information que le site Web demande au navigateur de stocker sur votre appareil. Les cookies sont principalement utilisés pour rendre votre expérience de navigation plus fluide en mémorisant vos préférences afin que, lors de votre prochaine visite sur le même site Web, le navigateur récupère les informations stockées. Presque tous les navigateurs utilisent des cookies et les utilisateurs ont le droit de visualiser ou de supprimer tout cookie à tout moment.

Pourquoi les cookies sont utilisés?

Comme je l'ai dit précédemment, les cookies sont principalement utilisés pour :

Rappelez-vous vos préférences
Identifier les utilisateurs
Affichage des publicités les plus pertinentes pour un utilisateur
Personnaliser l'expérience utilisateur en stockant des informations à leur sujet

Suis-je obligé de me conformer à cette loi?

Oui, si vous possédez un site Web utilisant des cookies et ayant des visiteurs de pays européens, alors vous êtes tenu de respecter la loi.

Est-ce qu'un blog "Blogger" utilise les cookies?

Oui, un blog Blogger utilise des cookies pour diverses raisons. Voici un article officiel de Blogger sur cette loi.

Surtout si vous utilisez Google Analytics ou Google Adsense, vous devez obtenir un consentement de cookies de vos visiteurs.

Comment installer le consentement des cookies?

Si vous utilisez des modèles par défaut, Blogger active automatiquement l'autorisation de cookie sur les blogs Blogspot, mais si vous souhaitez modifier le look de la notice avec le le thème de votre blog, comme vous avez peut-être remarqué la couleur du bouton de mon cookie notice, et aussi la couleur principale de mon Modèle.

Si vous utilisez déjà le consentement par défaut du cookie de Blogger, vous devez d'abord le supprimer en ajoutant ce petit morceau de code.

Connexion au compte Blogger
Aller à Thème> Modifier le code HTML
Ajoutez le code suivant avant </head> ou </head> tag

JS<script type="text/javascript">cookieChoices = {};</script>

Ce code désactivera le consentement par défaut des cookies de Blogger.

Ajout et personnalisation du cookie consentement

1. Maintenant, visitez Insites Cookieconsent

2. Personnaliser le consentement selon vos besoins

3. Après la personnalisation, copiez le code généré et ajoutez-le avant la balise </head> ou </head><!-<head/>->

J'espère que vous avez trouvé ce guide utile et facile.

Si vous rencontrez un problème concernant l'installation du consentement, n'hésitez pas à le mentionner dans la zone de commentaire.