Comment ajouter une IMAGE d'icône à côté d'un lien hypertexte

Comment ajouter une IMAGE d'icône à côté d'un lien hypertexte

Ajout d'icônes ou images à côté des liens hypertexte en effet des marques vos liens. Le didacticiel aujourd'hui vous permettra ajouter une icône à côté de tout lien que vous voulez. Il est différent de notre post précédent où j'ai partagé comment pouvez vous ajouter des icônes pour les liens hypertexte utilisant CSS3. La plupart d'entre vous ont demandé que comment pouvez vous ajouter une icône à côté juste une simple URL sans extension de fichier, donc ce poste répondra à toutes vos questions.

Ajout d'icônes à côté des liens hypertexte dans Blogger

1. Aller À Blogger > conception > modifier HTML

2. Cochez la case « Développez modèles Widget »

3. Recherche pour ce faire,

]] >< / b:skin >

4. Juste avant elle collez le code ci-dessous,

.MBT-lien hypertexte-1 {
Background : url (Ajouter icône lien ici) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}

Apportez ces modifications :

Remplacer ADD ICON lien ici avec l'URL de votre icône. Vous pouvez utiliser une des icônes ci-dessous ou d'entre tous. Cliquez avec le bouton droit sur une icône et sélectionnez «copie Image emplacement» ou «Copier l'Image URL"

Vous pouvez également utiliser les icônes de votre préférence et enregistrer les Images sur blogger.

Si vous souhaitez utiliser trois ou quatre icônes simplement garder en ajoutant le même code CSS donné ci-dessus en changeant seulement le chiffre numéro c'est-à-dire 1, 2, 3, 4, comme cela,

.MBT-lien hypertexte-1 {
Background : url (Ajouter icône lien ici) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
.MBT-lien hypertexte-2 {
Background : url (Ajouter icône lien ici) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
.MBT-lien hypertexte-3 {
Background : url (Ajouter icône lien ici) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
.MBT-lien hypertexte-4 {
Background : url (Ajouter icône lien ici) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
et ainsi de suite......

5. Enregistrez votre modèle et passer à la prochaine partie du tutoriel

Comment ça marche ?

Maintenant, par exemple si vous souhaitez établir un lien à votre utilisateur de télécharger un Ebook, vous devez simplement ajouter la classe CSS pour le lien i.e classe = « mbt-lien hypertexte-1 » comme indiqué ci-dessous,

< a classe = « mbt-lien hypertexte-1 » href="http://xyz.com « > Télécharger SEO Guide conseils </a>

Après avoir coller le lien ci-dessus dans le mode HTML de votre éditeur de blogueur et publier le poste, vous verrez l'icône qui apparaît à côté de votre lien comme indiqué ci-dessous,

Espérons que cela est évident. Si vous en aviez besoin d'aide juste let me know. Paix et bénédictions !