Archive Pages Design$type=blogging

Bouton de partage Blogger ( Horizontaux & flottants )

Sur le même sujet:



Aujourd'hui on verra comment intégrer une barre horizontale contenant tout les boutons de partage, qui reste flottante même si on descend dans l'article.

On commence alors, l'intégration est facile, il suffit de suivre ces étapes:


Tutoriel d'intégration de la barre de partage flottante


1 - Connectez vous à Blogger, choisissez votre blog, en suite cliquez sur ' Modèle ', et ' Modifier le code HTML ' puis ' traiter '

2 - Grâce à la touche F3, cherchez le code ' </head> ' , et juste avant, collez le code ci-dessous:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> /*<![CDATA[*/ #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;} #w2bSocialFloat td{padding:4px;margin:0;border:none;} #w2bSocialFloat td iframe{max-width:82px;width:82px !important;} #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);} /*]]>*/ </style> <script type="text/javascript"> /*<![CDATA[*/ // Set the Top Offset $theOffset = 0; jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})}); /*]]>*/ </script> <script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js"></script> <script type="text/javascript"> /*<![CDATA[*/ // Twitter (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs"); // Google + (plus) (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Stumbleupon (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Digg (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})(); /*]]>*/ </script> </b:if>

3 - Enregistrez le modèle.

4 - Grâce à F3, cherchez le code ' <data:post.body/> ' , si vous n'en trouvez qu'un, passez à l'étape 5.

Si vous en trouvez 3, c'est que vous utilisez le resumé automatique, pour cela il faut chercher le code ' <b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/> '

5 - Juste avant ce code, collez les lignes ci-dessous:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id="w2bSocialFloat" class="w2bSocialFloat"> <table width="100%" class="w2bSocialFloat"> <tr> <td> <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a> </td> <td> <iframe expr:src="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe> </td> <td> <div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> <data:post.body/> <script type="text/javascript"> w2bPinItButton({ url:"<data:post.url/>", thumb: "<data:post.thumbnailUrl/>", id: "<data:post.id/>", defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg", pincount: "horizontal" }); </script> </div> </td> <td> <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div> </td> <td> <su:badge layout="1" expr:location="data:post.url"></su:badge> </td> <td> <a class="DiggThisButton DiggCompact"></a> </td> </tr> </table> </div> </b:if>

6 - Enregistrez la template, et c'est bon ;)

Il existe plusieurs variantes pour ajouter des boutons de partage dans votre blog:


Si vous avez un souci dans l'installation, n'hésitez pas à le signaler en commentaire :)

COMMENTAIRES

BLOGGER : 3
Loading...
Nom

astuces Facebook feature gadget Google Menu news Pages Réseaux Sociaux slider automatique templates Traduction trafic tutoriel
false
ltr
item
Blogger Pour Les Nuls: Bouton de partage Blogger ( Horizontaux & flottants )
Bouton de partage Blogger ( Horizontaux & flottants )
http://4.bp.blogspot.com/-8z93sOp6GZw/UL09RmOEYuI/AAAAAAAABpE/6k-NQB8MXyc/s1600/Partage_Bpln.png
http://4.bp.blogspot.com/-8z93sOp6GZw/UL09RmOEYuI/AAAAAAAABpE/6k-NQB8MXyc/s72-c/Partage_Bpln.png
Blogger Pour Les Nuls
http://blogger-pourlesnuls.blogspot.com/2012/07/bouton-de-partage-blogger-horizantaux.html
http://blogger-pourlesnuls.blogspot.com/
http://blogger-pourlesnuls.blogspot.com/
http://blogger-pourlesnuls.blogspot.com/2012/07/bouton-de-partage-blogger-horizantaux.html
true
7261274087058654712
UTF-8
Aucun article trouvé VOIR TOUS Lire la suite Répondre Annuler la réponse Supprimer Par Accueil PAGES ARTICLES Voir tous RECOMMANDE POUR VOUS LIBELLE ARCHIVE SEARCH Aucun article ne répond aux critère de votre requête Back Home Dimanche Lundi Mardi Mercredi Jeudi Vendredi Samedi Dim Lun Mar Mer Jeu Ven Sam Janvier Février Mars Avril Mai Juin Juillet Août Septembre Octobre Novembre Décembre Jan Fév Mar Avr Mai Jun Jul Août Sep Oct Nov Déc maintenant il y a une minute Il y a $$1$$ minutes il y a une heure Il y a $$1$$ heures Hier Il y a $$1$$ jours Il y a $$1$$ semaines il y a plus que 5 semaines