Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact
Accueil / Tutoriels / Ajouter les boutons « Follow » à votre blog sans plugin

Ajouter les boutons « Follow » à votre blog sans plugin

Màj le 16 avril 2015Laissez un commentaire

Il y a quelques semaines, nous avons publié « Ajouter les boutons suivre/follow à WordPress et blogger » et aussi un article sur comment « Ajouter mini boutons de suivi avec effet flip à votre blog la wordpress » . Aujourd’hui et dans le même sujet, on va apprendre comment ajouter les boutons « Follow » à votre blog WordPress ou Blogger .

Ce widget contient les principaux réseaux social : Facebook, Twitter, Google plus et Linkedin en plus de l’inscription via Rss et l’abonnement Youtube.

Avant de voir le code du widget, voici une démonstration :

boutons-follow

Insérer les boutons « Follow » dans votre blog:

Pour Blogger:

  1. Allez à la mise en page >> Ajouter un gadget, puis choisissez HTML / JavaScript
  2. Collez ce code à l’intérieur.
  3. Remplacer les codes les liens des réseaux sociales par les votre.

Pour WordPress:

Aller sur votre tableau de bord> apparence >widgets> Choisissez un widgets « texte », puis y coller le code ci-dessous, enfin sauvegarder. Mettez ce widgets dans la barre latérale c’est mieux .

Code à copier:

<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/wpcours">Inscription via RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/wpcours">Nous Suivre sur Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/wpcours">Nous Suivre sur Facebook</a></li>
<li><a class="google" href="https://plus.google.com/">Nous Suivre sur Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/blogtipsntricks">Connect with me on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/user/chandeep10">Nous Suivre sur YouTube</a></li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/
.btnt-chronicl-social { width: 320px; margin: -10px; } 
.btnt-chronicl-social ul { margin: 0; padding: 0; }
.btnt-chronicl-social ul li { list-style:none; padding: 0; text-transform: none; }
.btnt-chronicl-social ul li a { color: #fff; display:block; }
.btnt-chronicl-social ul li a:hover { color: #c9c9c9; background-color: #333; }
.btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; background-size: 20px; padding: 17.5px 45px; }
/*]]>*/
</style>

Je vous recommande d’héberger les icônes ci-dessous sur votre propre serveur, et de changer les liens vers ces dernières par les votre.
Facebook-1

google

LinkedIn-1

RSS-1

Twitter

Youtube-1

 

Maintenant il ne reste que de sauvegarder votre Widget et de voir le résultat sur votre propre blog. N’oubliez pas de partager cette article.



Share
Tweet
whatsapp
Share
Pin it

Cela devrait aussi vous intéresser :

  • Comment faire pour désactiver la sélection de texte dans Blogger
  • Comment désactiver les éditeurs de thème et/ou plugins de WordPress
  • Fixer erreur de l’établissement de connexion à la base de données
  • Permettre aux utilisateurs de joindre des fichiers dans les commentaires WordPress
  • Afficher les articles similaires (related post) en grille pour genesis
  • Ajouter « Nofollow » aux liens externes sans plugin

Catégorie(s): Tutoriels Mots clés : wordpress guide

Laisser un commentaire Annuler la réponse

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

Abonnez-vous
Pour recevoir nos tutoriels
creer site web

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de wpcours.com et recevez nos tutoriels Wordpress Gratuitement.

Articles récents

  • Comment ajouter une animation de préchargement à WordPress
  • Ajouter des fichiers Javascript et CSS à l’en-tête et au pied de page dans WordPress
  • Comment corriger l’erreur de syntaxe (Parse Error) dans WordPress facilement
  • Trouver et réparer les liens cassés dans WordPress (Méthodes gratuites)
  • Comment ajouter automatiquement des titres en tant que liens d’ancrage dans WordPress

© 2019 ·compta-cours.com · Mentions · Contact