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

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.

0 0 votes
Évaluation de l'article
S’abonner
Notifier de
guest
0 Commentaires
Inline Feedbacks
View all comments