Une façon simple pour ajouter les boutons de partage twitter, facebook, google+, etc.. à droite ou à gauche de votre blog
Pour permettre à vos visiteurs de partager vos articles, installez les boutons de partage sur votre blog.
Pour ce faire,
Pour permettre à vos visiteurs de partager vos articles, installez les boutons de partage sur votre blog.
Pour ce faire,
- connectez-vous sur votre panneau d'administration
- Cliquez sur ajouter un gadget
- Chercher sur HTML/Javascript
- Copiez et Coller le code suivant
/*-------MBT Floating Sharing Widget------------*/
#floatdiv {
position:fixed;
bottom:15%;
margin-left:-850px;
z-index:10;
float:left;
padding-bottom:2px;
}
#mbtsidebar {
background:#fff;
border-top:0px solid #ddd;
border-left:0px solid #ddd;
border-bottom:0px solid #ddd;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding-left:5px;
width:75px;
margin:0 0 0 5px;
}
.fb_share_count_top {width:60px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px
!important;
-moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px
!important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id="floatdiv">
<div id="mbtsidebar">
<table cellpadding="0px" cellspacing="0">
<tr>
<td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button"
data-count="vertical" data-via="palabreinfo">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td>
<a name="fb_share" type="box_count"
href="http://www.facebook.com/sharer.php">Share</a><script
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript"></script>
</td>
</tr>
<tr>
<td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
<g:plusone size="Tall" expr:href="data:post.url">
</g:plusone></td>
</tr>
<tr>
<td>
<iframe src="http://www.facebook.com/plugins/like.php?href=http://palabre-infos.blogspot.com/
&layout=box_count
&show_faces=true
&width=60
&action=like
&font=arial
&colorscheme=light
&height=65"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:60px; height:65px; margin-top:3px;"
allowtransparency="true"></iframe>
</td>
</tr>
<tr>
<td style=" padding:5px 0px 0px 0px;">
<div class="addinto_sharebox addinto_sharebox_default">
<a class="addinto_button_more"></a>
</div>
<script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>
</td>
</tr>
</table> <div id='mainright'>
5. Remplacer les lignes en rouge par vos comptes twitter et facebook respectivement.
Vous pouvez changer aussi l'emplacement du widget. Dans sa forme actuel, il se place à gauche de votre blog.
Pour changer, modifier margin-left: mettre right
6. Enregistrez puis admirer le résultat.
Ajouter tous vos comptes (facebook, twitter, google plus) dans un seulur qui s'ouvre au passage de la sourie
voir exemple ici
- Connectez-vous sur draft.blogger.com
- Mise en page
- Ajouter un gadget
- Cliquez sur HTML
- Copiez puis collez ce le code suivant.
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".w2bslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBU2ttfO6hiFcYix_TtWLEckYiVI6Vd4KJkGlf6t8bvTzvi6IfIWSnYImLXmJIl2NdVcXOIH3J0oq959oIDNdHNym4BaxLa4F7mGQsFxh7g1hAdUKuNjnqOcwY-7d_QPH2Rm_CiCYuYzA/s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: gray;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style>
<div class="w2bslikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FAALLO.LE.MONDE&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span><a href="http://www.way2blogging.org/2011/06/add-static-facebook-pop-out-like-box.html">by Way2Blogging</a></span>
</div>
</div>
6. Remplacer le la ligne en bleue par l'adresse de votre page facebook
7. Enregistrez et admirez le résultat.
N'hésitez pas à laisser un commentaire sur ce conseil.
