Ajouter des icônes à côté des liens hypertexte à l'aide de CSS3

Ajouter des icônes à côté des liens hypertexte à l'aide de CSS3

Feuille de Style en cascade est le cœur des designers et avec les dernières technologies web telles que CSS3, la conception est devenu encore plus intéressante. Grâce aux sélecteurs de la valeur de l'attribut de CSS3, maintenant vous pouvez style toute extension de fichier ou de la balise.

J'utilise la propriété CSS3 attribut sélecteur dans ce tutoriel pour ajouter des icônes à des liens hypertexte. Auparavant, nous devions utiliser JavaScript pour ajouter une icône à côté du lien hypertexte sur votre blog blogger ou votre site Web, mais maintenant vous pouvez le faire facilement en utilisant CSS3. L'icône dépendra du type de l'extension de fichier. Si votre lien est pointant vers un fichier mp3 il ajoute alors un symbole de la musique à côté du lien et ainsi de suite. Voir la démo qui montre 13 liens de format de fichier,

Comment ajouter des icônes pour les liens hypertexte de 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 Hyperlink icônes----------* /
a [href * = « .js »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZaCONRRs5ONpKgCPGQWkNYmItpBIjovyFyR0ONt4DKy53d06HTctBWP5AcPyRAYg33Qp9xdeLFjHKfAtEGeupJ_9yIY498uSZzp92IOO6NqYa01VCf8KgowJXAPXNOk7WFrAeZvxCG24/s400/file_js.png) no-repeat 0 0 ;
rembourrage : 7px 0 0 25px ;
}
a [href * = « .gif »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7TBUlW781byNM4zvoRdEy2wwuFdcsmkMBcjZHTZmm9KnurzfIMOpbwrbii_II__trfvIjEsG4ZtLe769Waxmel2BIM1vekA0mnoun2fh51EyOEaY9_nPa7W0J8vjuuB00XoChjdDi5lQ/s400/file_gif.png) no-repeat 0 0 ;
rembourrage : 7px 0 0 25px ;
}
a [href * = « .doc »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsAD3MRHVpam48ZkafZI0JpzugonCb4uJqNqXpG65Kq6_Kpob3Q_5ZbF5X2x_y27afPYW8iH0mj7vBeeCW6dcn_7X90-Zl6wBLrYP3WcwBEBvDVZr_tBEQQecN7cjbVTSW33w27a0dVXE/s400/file_doc.png) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
a [href * = « .rar »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMkQ7tiUVO3e9wyRypZq0TeIQcZuLIGD6grh6o57IbWKKKlLkj88V6oNvczqiiiX7UWQvjBLwU33jPfhJzvbsf6sXu-KngHLeVFGluEiA6VmSPvclP3J3r_5hxPCSWSj2KuL7dxNNq5Z0/s400/file_rar.png) no-repeat 0px 0px ; padding : 7px 0 0 25px ;
}
a [href * = « .zip »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhROXFMujbg63vuLoNAV6NzB6vpEHu_T0pFQUJwmtclJh9Lxwr_8oLz2JFOqhPuvHYPLWa9vsNUMpXVsTuXFncMI_dBgw_ebUVcVM4UdRmePRuSsB8EyQH3cgJdIp3Us9QPXCb7CsH07Vo/s400/file_zip.png) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
a [href * = «. MP4 »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnnMDzfRSLXMVbRGG2FeTwtugfFwN0wjYiEUs0gnD7uMymnDaRVuS912bvdEKKGvVxFzc6e2j-kpVy647dMbcQVhCrVL2Ub65yoXN2EEfpAhKr6t8xISjHI__Df-s2xrhqnwS4EkuRUNY/s400/file_mp4.png) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
a [href * = « .php »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQyBC2gESJLtOsBxZ3dxqKkcjBYH_8dKUfaHp9NqbVODQYKEdfUragocsyvX1iLFxu2dr-YyGcVOjE9RqDHuNOCU3ZaVhTltUVJFDHf-iOoHD1qAH3vLZ0n0Yb_5wEmNyS34523Iiy4A/s400/file_php.png) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
a [href * = « .xml »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipeDzndxvvu2IgoIDHujGJChymDfCvM0NbNE8JZfMUqX4jbGrVU6qLE7Hw3adp-9rPveSLaTqme2R9Rj1JZKmTfISGxTi1IRZkrhCHawQioqltJQKo9yBUCmrM9lwfEN7JaOgZzCy6k68/s400/file_xml.png) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
a [href * = « .pdf »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQlZDhBfR4qfHKN_9tAX8jkE0grZAZUmj3p4kfnPfKyoUROZRh8tZWdRY4-L8PykK9VUYDrCN8nE3J_DTAgDetPaWm34Wg1hPaowgIIjE_KvBKMItois9VsEDtgTgZnYolkX-3RWZHIo0/s400/file_pdf.png) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
a [href * = « .xls »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCAAyJFfTJ7i1_kzCxSwc0K0zp6KLEFKLyDiIMf4uXy19QhDRjnBIXXco6eFuCFu1d6x6cgaxwLwRgYvrX1p4NZvxXH0KcoSOmbPMQhBI2HfngS-fJtjQ___WbhSeoIjaIxFBBdQdv7pI/s400/file_xls.png) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
a [href * = « .mpg »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEindUdfRbX1qm9hteiShLQQhZtECUQB7do61tb853q5c7f22A_C8U0QiOolO_-ObfBygMTANOMJUPMxPlrSMpjwT8S5-LWcFxWr7JlgtA_LzKQKJ5YGOcEgPLbaBvIHlIgkIu23IfY2NWA/s400/file_mpg.png) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
a [href * = « .bmp »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgizNsGolNVSY-wVLUGG7CtZxeofQn4GrWpXPUFahak5DK3g1C3LKvdIN2YScb-u86_JJgUQU7CpxjB270FkwdhCxn4ilDdFaR3Bd5-qlr1ftrrGGjI3hY8dFl1VFZp308iozAwUncDOFM/s400/file_bmp.png) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
a [href * = « .avi »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikNvEoDEAkCeTS7DSibJBxCZq50SghRuUZM5PqR7S5VqvfvV9fOaSYR3MsJeew2KpsbKNG1P3douPzQ68jsw72A9WS5pnroCfu3tzA4HnVY0-7b6oRq3CVbntm-_CnLxrlOK7b2fzoGbs/s400/file_avi.png) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
a [href * = « MP3 »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg0-P5rmTgUGiExoQg7yXxCdtuqnQyXBO8rGlJsh4dxHCZV9jzMGz4hUBwH-GP3MD5UZQoGWNsd9uB8hmDKnRwCCsikHrq7l3fQLIPUouHWQEl8HjZc4s7z1pw6XYVpOkc0_hTt_RmeuI/s400/audio_alt.png) no-repeat 0px 0px ;
rembourrage : 7px 0 0 25px ;
}
a [href * = « mailto »] {
fond : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4L-3UaLrk-jrfQ-Yuk9FWERxRF3mdZPqJUAWaEaW1rUF80fFFVU6yoolbFZYkKTGkjQx-aX2DIXfUuqgv5GjOZEGEdVFDqNzP0gYokqylSMtvkUtGJdgQxJhg6Ji002HykB7Ov9w2lCE/s400/e_mail.png) no-repeat 0px 0px ;
padding: 0 0 0 25px ;
}

4. Enregistrez vos modèles et vous avez terminé !

Comment ça marche ?

Les icônes apparaissent lorsque l'extension de fichier est détectée dans le lien. Par exemple, si j'ajoute un lien à fichier pdf comme ceci,

< a href="http://www.mybloggertricks.com/xyz.pdf» > Télécharger le E-book </a>

Puis le lien s'affichera comme ceci à publier

Maintenant, ajoutez tout Ebook ou tout lien vers l'image dans vos messages blogger, encadrés ou pied de page n'importe où vous voulez et vous trouverez des jolis icônes apparaissant à côté du lien. Vous pouvez également utiliser les icônes de votre choix en modifiant simplement les liens d'image icône dans le code ci-dessus. Le code est vraiment facile à modifier et j'espère qu'après avoir lu une grande partie de nos tutoriels vous pouvez au moins modifier ce code. S'amuser et de me faire savoir si vous face à tout problème. Profitez