Accueil
Blogger
CSS

Installer un magnifique gadget Réseaux Sociaux dans Blogger

Dans ce tutoriel, on verra comment ajouter facilement des boutons d’abonnement "Réseaux sociaux" au design moderne et élégant dans un gadget Blogger.
Installer un magnifique gadget Réseaux Sociaux dans Blogger

En complément de votre blog et de vos newsletters,vous pouvez également créer des pages sur les réseaux sociaux afin de booster votre présence dans le web et offrir une autre alternative à vos lecteurs pour suivre votre actualité.

Une fois cette tâche accomplie, vous pouvez installer des boutons d’abonnement dans votre blog pour faire la promotion de vos pages et permettre à vos visiteurs d’y accéder directement en un seul clic.

Dans ce tutoriel, on verra comment les ajouter facilement dans un gadget Blogger. Ce dernier est doté d'un design élégant et attrayant et sera installé dans la barre latérale (sidebar) ou dans le pied de page (footer) de votre blog.

Ces boutons d’abonnement comme les boutons de partage qu’on a vu dans l'article précédent sont très légers (composés d’un simple code HTML et CSS) et ne sont pas ceux proposés par les réseaux sociaux. Ainsi, lorsque vos lecteurs navigueront sur votre blog ou utiliseront ces boutons pour accéder à vos pages, leurs actions ne seront pas identifiées.

Ce gadget contient 7 boutons de réseaux sociaux, à savoir :
  1. Facebook
  2. Twitter
  3. YouTube
  4. Pinterest
  5. Instagram
  6. LinkedIn
  7. Vimeo



Pour tester le bon fonctionnement de ces boutons d'abonnement, on a ajouté les liens de nos pages sur Facebook, Twitter et YouTube. Donc, n'hésitez pas à visitez nos pages !



    Prérequis avant l'installation du gadget réseaux sociaux

    La bibliothèque d'icônes Font Awesome

    Rappel : avant d'entamer toute modification du code HTML de votre thème, je vous conseille vivement d'enregistrer une copie de votre thème. Si vous ne savez pas comment procéder, cliquez ici.

    Ce gadget utilise des icônes "Font Awesome", donc on va vérifier si la bibliothèque est bien installée dans notre thème, sinon il faudra l'ajouter.
    1. Cliquez sur "Thème"> "Modifier le code HTML"
    2. Une boite contenant le code HTML de votre thème s'affichera
    3. Cliquez n'importe où à l'intérieur du code HTML
    4. Appuyez ensuite sur Ctrl et F en même temps ou Cmd et F pour Mac, une petite barre de recherche doit apparaître en haut à gauche dans la nouvelle interface de Blogger.
    5. Dans la barre de recherche, saisissez maxcdn.bootstrapcdn
    Si vous trouvez le code suivant, passez à la prochaine étape : 

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

    Sinon, ajoutez le code suivant au-dessus de la balise </head> 

    
<script type='text/javascript'>

//<![CDATA[

function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }

loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

//]]>

</script>


    Insérer le code HTML et CSS des boutons de réseaux sociaux dans le gadget Blogger

    1. Cliquez d’abord sur le menu "Mise en page" dans votre tableau de bord
    2. Cliquez ensuite sur "Ajouter un gadget" dans votre barre latérale ou votre pied de page au choix.
    3. Dans la boite de dialogue qui s’affichera par la suite, défilez vers le bas jusqu’au "Gadget HTML/JavaScript" et sélectionnez-le.
    4. Ajoutez le code suivant dans votre gadget HTML/JavaScript et enregistrer les modifications.
    
<div class=" social-media">
   <ul class="social-network social-circle">
      <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#" class=" icoPinterest" title="Pinterest"><i class="fa fa-pinterest"></i></a></li>
      <li><a href="#" class="icoInstagram" title=" Instagram "><i class="fa fa-instagram"></i></a></li>
      <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
      <li><a href="#" class="icoYoutube" title="Youtube"><i class="fa fa-youtube"></i></a></li>
      <li><a href="#" class="icoVimeo" title="Vimeo"><i class="fa fa-vimeo"></i></a></li>
   </ul>
</div>
<style>
.social-media{text-align:center}
ul.social-network{list-style:none;display:inline;margin-left:0!important;padding:0}
ul.social-network li{display:inline;margin:0 0 0 5px}
.social-network a.icoFacebook:hover{background-color:#3B5998}
.social-network a.icoTwitter:hover{background-color:#3cf}
.social-network a.icoPinterest:hover{background-color:#c8232c}
.social-network a.icoVimeo:hover{background-color:#0590B8}
.social-network a.icoLinkedin:hover{background-color:#007bb7}
.social-network a.icoYoutube:hover{background-color:#c4302b}
.social-network a.icoInstagram:hover{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
.social-network a.icoRss:hover i,.social-network a.icoFacebook:hover i,.social-network a.icoTwitter:hover i,.social-network a.icoYoutube:hover i,.social-network a.icoInstagram i,.social-network a.icoPinterest:hover i,.social-network a.icoVimeo:hover i,.social-network a.icoLinkedin:hover i{color:#fff}
a.socialIcon:hover,.socialHoverClass{color:#44BCDD}
.social-circle li a{display:inline-block;position:relative;margin:5px auto 0;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;text-align:center;width:50px;height:50px;font-size:20px;background-color:#D3D3D3}
.social-circle li i{margin:0;line-height:50px;text-align:center}
.social-circle li a:hover i,.triggeredHover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-ms--transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;-ms-transition:all .2s;transition:all .2s}
.social-circle i{color:#fff;-webkit-transition:all .8s;-moz-transition:all .8s;-o-transition:all .8s;-ms-transition:all .8s;transition:all .8s}
</style>

    Ajoutez les liens de vos pages sur les réseaux sociaux dans les boutons d'abonnement

    Remplacez le symbole # dans les lignes suivantes par l’adresse URL de votre page.

    Facebook

    <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
                           
    Twitter

    <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                           
    Pinterest

    <li><a href="#" class=" icoPinterest" title="Pinterest"><i class="fa fa-pinterest"></i></a></li>
           
    Instagram

    <li><a href="#" class="icoInstagram" title=" Instagram "><i class="fa fa-instagram"></i></a></li>
                           
    Linkedin

    <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
           
    Youtube

    <li><a href="#" class="icoYoutube" title="Youtube"><i class="fa fa-youtube"></i></a></li>
           
    Vimeo

    <li><a href="#" class="icoVimeo" title="Vimeo"><i class="fa fa-vimeo"></i></a></li>

    Supprimer les boutons des réseaux sociaux

    Il suffit de supprimer la ligne contenant le réseau social et qui est entourée par les deux balises <li> et </li> . Par exemple pour enlever le bouton Facebook je vais supprimer la ligne :

    <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>


    Voilà ! C’est tout pour ce tutoriel consacré à la création des boutons d’abonnement dans Blogger pour vos différentes pages sur les réseaux sociaux.

    Vous pouvez également suivre nos dernières astuces Blogger sur Facebook ou Twitter et regardez nos tutoriels vidéo sur notre chaine YouTube.

    Merci à vous et n'hésitez surtout pas à partager ce tutoriel sur les réseaux sociaux si vous jugez qu'il pourrait être utile à d'autres personnes.