De jolis réseaux sociaux pour votre sidebar [Blogger]


Hey, ça vous dit d'avoir de jolis réseaux sur votre sidebar ? Découvrez 3 façons d'avoir de jolies icônes de réseaux sociaux.


Sommaire


Installation


Pour mettre les codes, il vous suffit d'aller dans votre interface Blogger et de cliquer sur "Mise en page". On va tomber sur le squelette de votre blog et on va aller chercher le rectangle sidebar. Si vous avez votre sidebar à gauche, ce sera "sidebar-left-1", si votre sidebar est à droite, ce sera "sidebar-right-1". En cliquant sur "+ Ajouter un gadget".



Une fenêtre pop-up s'ouvre et propose une liste de gadgets. On va cliquer sur le petit + à côté de "HTML/Javascript" et une autre fenêtre s'ouvre. Les codes seront à mettre dans "Contenu".

Attention :  Il faudra remplacer le # du <a href="#" target="_blank"> par le lien de votre réseau social. 

Barre numéro 1


<div id="RS">
<a href="#" target="_blank"><img id="facebook" src="http://bit.ly/2o4LwBM"/></a>
<a href="#" target="_blank"><img id="youtube" src="http://bit.ly/2EIeG3j"/></a>
<a href="#" target="_blank"><img id="twitter" src="http://bit.ly/2swCkej"/></a>
<a href="#" target="_blank"><img id="instagram" src="http://bit.ly/2swCkej"/></a>
<a href="#" target="_blank"><img id="googleplus" src="http://bit.ly/2o13EN6"/></a>
</div>

<style>
#facebook {
height: 50px; /* Taille de l'image */
}

#facebook:hover {
opacity: 0.7; /* Opacité de l'image au passage de la souris */
}

#youtube {
height: 50px; /* Taille de l'image */
}

#youtube:hover {
opacity: 0.7; /* Opacité de l'image au passage de la souris */
}

#twitter {
height: 50px; /* Taille de l'image */
}

#twitter:hover {
opacity: 0.7; /* Opacité de l'image au passage de la souris */
}

#instagram {
height: 50px; /* Taille de l'image */
}

#instagram:hover {
opacity: 0.7; /* Opacité de l'image au passage de la souris */
}

#googleplus {
height: 50px; /* Taille de l'image */
}

#googleplus:hover {
opacity: 0.7; /* Opacité de l'image au passage de la souris */
}
</style>

Barre numéro 2


Même cas de figure que pour la barre numéro 1 !  "Mise en page" → "+ Ajouter un gadget" → "HTML/Javascript". On va coller les codes suivants dans "Contenu", comme d'habitude et il faudra remplacer le # du <a href="#" target="_blank"> par le lien de votre réseau social. 
<div id="RS">
<a href="#" target="_blank"><img id="facebook" src="http://bit.ly/2oqka9A"/></a>
<a href="#" target="_blank"><img id="youtube" src="http://bit.ly/2EVftuz"/></a>
<a href="#" target="_blank"><img id="twitter" src="http://bit.ly/2sU7z2P"/></a>
<a href="#" target="_blank"><img id="instagram" src="http://bit.ly/2ETHh6v"/></a>
<a href="#" target="_blank"><img id="pinterest" src="http://bit.ly/2ESAXIq"/></a>
</div>

<style>
#facebook {
height: 22px; /* Taille de l'image */
}

#youtube {
height: 22px; /* Taille de l'image */
}

#twitter {
height: 22px; /* Taille de l'image */
}

#instagram {
height: 22px; /* Taille de l'image */
}

#pinterest {
height: 22px; /* Taille de l'image */
}
</style>

Barre numéro 3

Pour cette troisième barre, il y a une étape supplémentaire à faire. Il vous faut rajouter un script dans le code de votre blog. Ce code va nous permettre d'afficher des icônes dans notre blog. Pour voir la liste de toutes les icônes, je vous invite à aller ICI.

Pour installer le code, il vous suffit d'aller dans votre interface Blogger et de cliquer sur "Thème". On va tomber sur deux boutons : "Personnaliser" et "Modifier le code HTML". On va cliquer sur "Modifier le code HTML".


On tombe sur tout le code de votre blog, mais pas d'inquiétude, on est juste là pour ajouter une ligne.


Juste sous la balise <head>, on va coller :

<script defer='defer'src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

Comme ceci :


On sauvegarde en cliquant sur 'Enregistrer le thème" et ensuite, on refait les étapes de la première barre pour ajouter un gadget HTML : "Mise en page" → "+ Ajouter un gadget" → "HTML/Javascript". On va coller les codes suivants dans "Contenu", comme d'habitude.

Les icônes qu'on va utiliser sont les icônes de réseaux sociaux. À vous de choisir quels réseaux sociaux vous souhaitez afficher ou non, mais je vous les mets tous pour que vous ayez le choix.

<!-- Facebook -->
<div id="facebook-i"><i class="fab fa-facebook-f"></i><a href="#" target="_blank"> Facebook</a></div>

<!-- Youtube -->
<div id="youtube-i"><i class="fab fa-youtube"></i><a href="#" target="_blank"> Youtube</a></div>

<!-- Twitter -->
<div id="twitter-i"><i class="fab fa-twitter"></i><a href="#" target="_blank"> Twitter</a></div>

<!-- Instagram -->
<div id="instagram-i"><i class="fab fa-instagram"></i><a href="#" target="_blank"> Instagram</a></div>

<!-- Google Plus -->
<div id="googleplus-i"><i class="fab fa-google-plus-g"></i><a href="#" target="_blank"> Google+</a></div>

<!-- Pinterest -->
<div id="pinterest-i"><i class="fab fa-pinterest-p"></i><a href="#" target="_blank"> Pinterest</a></div>
Voici le code du gadget que je vous propose (pensez bien à remplacer le # du <a href="#" target="_blank"> par vos liens de réseaux sociaux):
<div id="RS">
<div id="facebook-i"><i class="fab fa-facebook-f"></i><a href="#" target="_blank"> Facebook</a></div>
<div id="youtube-i"><i class="fab fa-youtube"></i><a href="#" target="_blank"> Youtube</a></div>
<div id="twitter-i"><i class="fab fa-twitter"></i><a href="#" target="_blank"> Twitter</a></div>
<div id="instagram-i"><i class="fab fa-instagram"></i><a href="#" target="_blank"> Instagram</a></div>
<div id="googleplus-i"><i class="fab fa-google-plus-g"></i><a href="#" target="_blank"> Google+</a></div>
</div>

<style>

#facebook 
color: #fff; /* Couleur → #fff équivaut à blanc */
text-decoration: none; /* Enlève le souligné auto des liens */
font-size: 20px; /* Police du lien */
}

#facebook-i { 
background-color: #3b5998; /* Couleur → #3b5998 équivaut au bleu de Facebook */
color: #fff; /* Couleur → #fff équivaut à blanc */
padding-left: 2px; /* Espace entre lîcône et le bord gauche */
padding-top: 2px; /* Espace entre l'icône et le haut */
}

#youtube {
color: #fff; /* Couleur → #fff équivaut à blanc */
text-decoration: none; /* Enlève le souligné auto des liens */
font-size: 20px; /* Police du lien */
}

#youtube-i { 
background-color: #cc181e; /* Couleur → #cc181e équivaut au rouge de youtube */
color: #fff; /* Couleur → #fff équivaut à blanc */
padding-left: 2px; /* Espace entre lîcône et le bord gauche */
padding-top: 2px; /* Espace entre l'icône et le haut */
}

#twitter {
color: #fff; /* Couleur → #fff équivaut à blanc */
text-decoration: none; /* Enlève le souligné auto des liens */
font-size: 20px; /* Police du lien */
}

#twitter-i { 
background-color: 00aced; /* Couleur → 00aced équivaut au bleu de twitter */
color: #fff; /* Couleur → #fff équivaut à blanc */
padding-left: 2px; /* Espace entre lîcône et le bord gauche */
padding-top: 2px; /* Espace entre l'icône et le haut */
}

#instagram {
color: #fff; /* Couleur → #fff équivaut à blanc */
text-decoration: none; /* Enlève le souligné auto des liens */
font-size: 20px; /* Police du lien */
}

#instagram-i { 
background:url('http://bit.ly/2CjadDj'); /* l'adresse URL équivaut aux couleurs d'Instagram */
color: #fff; /* Couleur → #fff équivaut à blanc */
padding-left: 2px; /* Espace entre lîcône et le bord gauche */
padding-top: 2px; /* Espace entre l'icône et le haut */
}

#googleplus {
color: #fff; /* Couleur → #fff équivaut à blanc */
text-decoration: none; /* Enlève le souligné auto des liens */
font-size: 20px; /* Police du lien */
}

#googleplus-i { 
background-color: #dd4b39; /* Couleur → #dd4b39 équivaut aux couleurs de Google Plus */
color: #fff; /* Couleur → #fff équivaut à blanc */
padding-left: 2px; /* Espace entre lîcône et le bord gauche */
padding-top: 2px; /* Espace entre l'icône et le haut */
}
</style>

J'ai un problème dans mon code / J'aimerais un autre design d'icônes

S'il y a un souci dans votre code, il vous suffit de me laisser un commentaire sous cet article ou de m'envoyer un message sur ma page Facebook ! J'y réponds tous les jours sans exception !

Si vous souhaitez un autre design d'icônes, il vous suffit de m'envoyer un message sur ma page Facebook et je vous créerai le code.