Widgets blogger|

3 styles de boutons pour les réseaux sociaux

Vous voulez que vos lecteurs visitent vos pages facebook, votre compte twitter votre chaine youtube, votre page google+, ou qu'ils s'abonnent à vos derniers messages, voici 4 façons d'y arriver.

Connectez-vous à votre http://draft.blogger.com/
Choississez "ajouter un gadget" ==> choisissez "HTLM/Javascript" cliquez sur le +
Copiez le code suivant et collez le dans le champ

Style 1

Style 2

Code à  copier et à  coler

<style>p#hb_socialicons img {

 /* Spinning Social Icons Widget By HelperBlogger */

    -moz-transition: all 0.8s ease-in-out;

    -webkit-transition: all 0.8s ease-in-out;

    -o-transition: all 0.8s ease-in-out;

    -ms-transition: all 0.8s ease-in-out;

    transition: all 0.8s ease-in-out;

}

p#hb_socialicons img:hover {

    -moz-transform: rotate(360deg);

    -webkit-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    transform: rotate(360deg);

}

/* Spinning Social Icons Widget By HelperBlogger */

</style>  

<center><p id="hb_socialicons">

    <a href="http://www.facebook.com/nom de votre page ou profil/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKnIf20hc7fW9IiTU_i3CCUbcqiKblZpP1hivQWPdLEOjDPWWYrJ2OiD_zT-vSIepEtLdUNNE0vrH2GEA3V9uETMMee3SAzk1bGtmIBx-CIl5O6oN0ZvNT2MAalN6yXoZkNM9MO8Zg_O4/s1600/helperblogger.com-facebook.png" /></a>

    <a href="http://www.twitter.com/votre compte twitter/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAFA-9TiEDbKHP1sZJu1Kz43UFQgeVY5LPeLgIneEz5ETLZv-RXLBqspicHpWQ_K6Rl1RcvaMZcpVJd6xA3oOuXXYnuG-KBC7pEe_DMAmg4LPMZp1L533PgDvGztkU2T_dUPEHHG-ZWSk/s1600/helperblogger.com-twitter.png" /></a>

    <a href="https://plus.google.com/u/0/votre ID google plus">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKpRZLNRExG4aIYZtnSuqGJ11ZHpM1XxjIPz5r9XdtDa-gnFdKavWwXQKM293iD5Mz4ERDxYnas7NvGJ_MsvEwc4rR7gM0nhiy5IuVpHu2XRmGLMiwTFwAOKRuPcLhbVNQ0LRMqaPU-Ug/s1600/helperblogger.com-google_plus.png" /></a>

    <a href="http://www.feeds.feedburner.com/nom de votre flux feedburner/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf35OV3-yzZ57Bf9L9N1pbkqMD1nAu5s1EqsqDR2dPzMh0ELiveKepBD7gU4AXYqGEeoJPjT4LIY8EAWlnvDDmoa40z7YAk4iAIliisKc0GhqpXJgykcVrG-RZQS1zCRMA3haI9JQ3o6M/s1600/helperblogger.com-rss.png" /></a>

    <a href="http://www.youtube.com/votre profil youtube/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSxHsYwcjIZ6fdA8_wZC_T4VDhawrz-V010yX9xJWMuirlgx7zJwG5y90hyphenhyphenYMWlzCl-QMbOG5mTfLZml9-WKOeDtXx_p5lmABflSnx_oDuFx0vfFjDeZhf89k6gTlh5RRmi3IKfbzK7iw/s1600/helperblogger.com-youtube.png" /></a>

</p></center>

Style 3

Code à copier et à coller

<style>p#hb_socialicons img {

/* Spinning Social Icons Widget By HelperBlogger */

-moz-transition: all 0.8s ease-in-out;

-webkit-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;

-ms-transition: all 0.8s ease-in-out;

transition: all 0.8s ease-in-out;

}

p#hb_socialicons img:hover {

-moz-transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

-o-transform: rotate(-360deg);

-ms-transform: rotate(-360deg);

transform: rotate(-360deg);

}

/* Spinning Social Icons Widget By HelperBlogger */

</style>

<center><p id="hb_socialicons">

<a href="http://www.facebook.com/nom de votre page ou profil/">



<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKnIf20hc7fW9IiTU_i3CCUbcqiKblZpP1hivQWPdLEOjDPWWYrJ2OiD_zT-vSIepEtLdUNNE0vrH2GEA3V9uETMMee3SAzk1bGtmIBx-CIl5O6oN0ZvNT2MAalN6yXoZkNM9MO8Zg_O4/s1600/helperblogger.com-facebook.png" /></a>

    <a href="http://www.twitter.com/votre compte twitter/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAFA-9TiEDbKHP1sZJu1Kz43UFQgeVY5LPeLgIneEz5ETLZv-RXLBqspicHpWQ_K6Rl1RcvaMZcpVJd6xA3oOuXXYnuG-KBC7pEe_DMAmg4LPMZp1L533PgDvGztkU2T_dUPEHHG-ZWSk/s1600/helperblogger.com-twitter.png" /></a>

    <a href="https://plus.google.com/u/0/votre ID google plus">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKpRZLNRExG4aIYZtnSuqGJ11ZHpM1XxjIPz5r9XdtDa-gnFdKavWwXQKM293iD5Mz4ERDxYnas7NvGJ_MsvEwc4rR7gM0nhiy5IuVpHu2XRmGLMiwTFwAOKRuPcLhbVNQ0LRMqaPU-Ug/s1600/helperblogger.com-google_plus.png" /></a>

    <a href="http://www.feeds.feedburner.com/nom de votre flux feedburner/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf35OV3-yzZ57Bf9L9N1pbkqMD1nAu5s1EqsqDR2dPzMh0ELiveKepBD7gU4AXYqGEeoJPjT4LIY8EAWlnvDDmoa40z7YAk4iAIliisKc0GhqpXJgykcVrG-RZQS1zCRMA3haI9JQ3o6M/s1600/helperblogger.com-rss.png" /></a>

    <a href="http://www.youtube.com/votre profil youtube/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSxHsYwcjIZ6fdA8_wZC_T4VDhawrz-V010yX9xJWMuirlgx7zJwG5y90hyphenhyphenYMWlzCl-QMbOG5mTfLZml9-WKOeDtXx_p5lmABflSnx_oDuFx0vfFjDeZhf89k6gTlh5RRmi3IKfbzK7iw/s1600/helperblogger.com-youtube.png" /></a>

</p></center>

Partager cette astuce :

Widgets blogger|

Style 3

0 commentaires:

Enregistrer un commentaire

Autres astuces

WIDGETS BLOGGER

ASTUCES BLOGGER

WIDGET BLOGGER

Astuces populaires

Astuces twittées

Astuces archivées

Plus d'astuces

Blogger templates

Commentaires récents

PALABRE-INFOS_le fil actu

3 Astuces Récentes

Plus d'astuces

Trouvez une astuce