Faite Glisser vos boutons de partage Facebook, Google plus, Twitter

Publié par Fred Le

Catégorie(s): Tutoriel Wordpress
 

Avec se tutoriel vous pourrez ajouter les boutons de partage Facebook, Google plus, Twitter et l’icône RSS de Votre blog,  qui défileront a l’extérieur de votre page, et il sera possible ajouter ou de retirer des réseaux sociaux, et tous sa sans plugin !


 

Le code sources fait 300 lignes vous pouvez le télécharger ici je vais vous expliquez comment le mettre en place et l’adapter a votre thème.

Une fois le fichier téléchargé placé le dans le dossier de votre thème WordPress ensuite ouvrez votre fichier function.php et ajouter le code ci-dessous pour appeler le fichier social.php.

include (TEMPLATEPATH .'/social.php');

Ensuite ouvrez votre fichier header.php de votre thème puis ajouter le code pour suivant après la balise </head> pour afficher les boutons de partage.

<?php echo socials_bar(); ?>

Dans le fichier social.php vous pourrez modifier le code css pour ajuter le widget à votre thème :

/*-------Socials bar------------*/

#floating-socials-wrapper{

 width:950px; /* Modifier cette ligne pour ajuater la social bar a votre thème */

 margin:0 auto 0 auto;

 height: auto;

 position: relative;

}

#floatdiv {

    position:absolute; 

    width:94px; 

    height:229px; 

    top:0; 

    left:500px; 

        z-index:100 

}

#socials-sidebar { 

    background-color:#ffffff; 

    border:1px solid #ddd; 

    padding-left:5px; 

    position:relative; 

    height:278px; 

    width:70px;

	float:right; 

    margin:0 0 0 5px; 

}

Pour positionner la colonne qui contient les boutons de partage modifié la largeur de la balise <div> qui a l’ ID  floating-socials-wrapper.

Pour ajouter le Flux RSS modifier cette ligne pour ajouter votre adresse, puis transférer  icône dans le dossier image de votre thème.

<a href="http://www.votre-site.com/feed"><img src="<?php bloginfo('template_url'); ?>/images/feed-icon.png"></a>

Si vous voulez fixer la position des boutons de partage ajouter le code css ci-dessous et ajuter la marge du haut comme indiquer dans le code.

/* code css pour fixer la socials bar */

#floating-box-container .fixed{ 

 position:fixed;

 top:200px;  /* Modifier cette ligne pour ajuster la postion vertical */

}

#floating-box-container{ 

 float:left;

 top:0;

 left:0;

 position:absolute;

 width:auto; 

}

Vous pouvez ajouter des boutons de partage en ajoutant des lignes dans le tableau html et en modifiant la hauteur de la balise à l’aide du code css.

Mots clés: , ,





Laisser un commentaire

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Pour affiché du code HTML, CSS, PHP, JAVASCRIPT utilisé le marqueur : [code][/code]