L’ajout de cet élégant widget de médias sociaux vous aidera à rendre votre blog plus attrayant, vous aidera à attirer plus de visiteurs.
Oidgets peut être très utile. Ce sont de petits codes/scripts, qui n’ont pas besoin de beaucoup d’espace mais qui ajouteront des fonctionnalités supplémentaires utiles à votre blog ou site Web. Ajouter des widgets dans le blogueur blog est vraiment facile. Vous n’avez pas besoin de connaître de codage avancé ou quoi que ce soit. Tu peux aller à mise en page et cliquez sur ajouter un gadget, sélectionnez-en un et enregistrez ; si facile. Vous pouvez également ajouter un widget personnalisé en sélectionnant ‘ajouter html/javascript‘ widgets.
Quand j’ai commencé à bloguer sur blogueur, j’avais l’habitude de rechercher différents types de widgets à utiliser sur mon blog. Je voudrais juste jouer avec différents types de widgets et voir à quoi ressemble mon blog et garder celui qui me semble bon. Je demanderais aussi à mes amis de choisir un design. Il me faudrait des heures pour décider quel widget conserver.
Il y a littéralement des milliers de widgets disponibles et la plupart d’entre eux fonctionnent encore très bien. Les développeurs sont créer nouveaux widgets pour blogueur plate-forme car elle est très populaire de nos jours.
Si tu veux obtenir des visiteurs récurrentspuis un widget d’icône sociale attrayant est le meilleur moyen d’y parvenir. Widgets élégants attirera toujours les regards, de cette façon, les gens cliqueront sur votre widget et aimeront ou s’abonneront à vos pages pour d’autres mises à jour. De nos jours, presque tout le monde utilise les médias sociaux et c’est le meilleur moyen d’obtenir des mises à jour instantanées, des nouvelles concernant les blogs ou les produits préférés.
A vrai dire, presque tout le monde utilise un widget de médias sociaux. Blogueur en a un mais c’est très simple à regarder. Évidemment, vous voudriez rendre votre blog agréable et élégant, pas vieux et peu attrayant. C’est une bonne chose que le blogueur vous permette d’utiliser html/javascript codes et dans cet article, je vais vous montrer comment vous pouvez très facilement ajouter un widget personnalisé dans votre blog de blogueur.
Ajout de cet élégant widget de médias sociaux vous aidera à rendre votre blog plus attrayant, vous aidera à attirer plus de visiteurs et aidera également les gens à obtenir engagé avec vous dans les médias sociaux.
Commençons –
Étape 2) Choisi ton blog souhaité dans lequel vous voudriez ajouter ce widget (Si vous avez plusieurs blogs sur le même compte)
Étape 3) Du tableau de bord blogueuraller à Thème et cliquez sur MODIFIER LE HTML.
* Pour un nouveau tableau de bord mis à jour, cliquez sur les 3 points verticaux et cliquez sur modifier le html *
Étape 4) Rechercher le sous le code. Vous pouvez appuyer sur CTRL + F pour élever le barre de recherche.
Étape 5) Copiez les codes ci-dessous et pâte eux juste avant ce qui précède “]]>”code.
[body{ background : #ccc; }
h2{ font-family: cursive; font-weight: 100; font-size: 40px; text-align: center; padding: 20px; margin: 0; color: #888; }
#social-wrapper{ background : #000; height : 400px; width : 50%; margin : auto; }
#social-wrapper a{ float : left; text-align : center; color : #FFF; font-size : 45px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; height : 50%; }
#social-wrapper i{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
#social-wrapper a:hover{ background : #888; }
#social-wrapper .fb{ background : #3b5998; }
#social-wrapper .tw{ background : #4099FF; }
#social-wrapper .yt{ background : #e52d27; }
#social-wrapper .gp{ background : #D34836; }
#social-wrapper .fb{ width : 75%; }
#social-wrapper .gp{ width : 25%; }
#social-wrapper .tw , #social-wrapper .yt{ width : 50%; }
.ahsancy{ position : fixed; right : 10px; bottom : 5px; color : #888; text-decoration : none; }
/* Media Queries */
@media screen and (max-width: 1000px){ #social-wrapper .fb{ width : 100%; }
#social-wrapper .tw , #social-wrapper .yt , #social-wrapper .gp{ width : 33.3333333333%; }
}
@media screen and (max-width: 650px){ #social-wrapper .tw , #social-wrapper .yt , #social-wrapper .gp , #social-wrapper .fb{ width : 50%; } } @media screen and (max-width: 300px){ #social-wrapper .tw , #social-wrapper .yt , #social-wrapper .gp , #social-wrapper .fb{ width : 100%; height : 25%; }
}]
Étape 6) Cliquer sur sauvegarder et enregistrer le modèle.
Maintenant, nous devons ajouter un gadget du mise en page possibilité de rendre le widget visible sur votre blog et de le personnaliser.
Étape 7) Aller à mise en page
Étape 8) Cliquer sur ajouter un gadget et sélectionnez “HTML/JAVASCRP” de la fenêtre contextuelle.
Étape 9) Copiez les codes ci-dessous et pâte ça sur le zone de contenu.
[<link href=’//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css’ rel=’stylesheet’/> <h2>Join With US</h2>
<div id=”social-wrapper”>
<a class=”fb” href=”https://www.facebook.com/a.habib.cy” target=”_blank”> <i class=”fa fa-facebook”></i> </a>
<a class=”gp” href=”https://instagram.com/#″ target=”_blank”> <i class=”fa fa-instagram”></i> </a>
<a class=”yt” href=”https://www.youtube.com/channel/ahsanhabibcy” target=”_blank”> <i class=”fa fa-youtube”></i> </a>
<a class=”tw” href=”https://twitter.com/ahsanhabibcy” target=”_blank”> <i class=”fa fa-twitter”></i> </a> </div>
<a class=”ahsancy” href=”https://facebook.com/bdbloggerhub″ target=”_blank”> Created by Ahsan Habib CY</a>]
Étape 10) Changer la liens rouges avec ceux que vous souhaitez et cliquez sur sauvegarder. Ne changez rien d’autre ou cela pourrait ne pas fonctionner.
C’est ça. Vous avez ajouté avec succès le widget attrayant d’icônes de médias sociaux dans votre blog de blogueur.
Derniers mots
J’espère que mon tutoriel a été facile à suivre. Si vous rencontrez toujours des problèmes lors de l’ajout du widget ou si vous avez des questions, veuillez laisser un commentaire ci-dessous. J’apprécierais vraiment. Partagez-le avec vos amis si vous l’avez aimé. Merci d’avoir lu, paix.