20 avr. 2012

Widget Youtube Subscription Pour Blogger

Youtube Subscription
Ajouter le gadget officiel d'abonnement Youtube sur votre blogue pour promouvoir votre chaîne YT.
Comme pour le page de fan Facebook, les utilisateurs peuvent s'abonner directement à votre chaîne sans la nécessité de quitter la page.
Votre nom d'utilisateur, le logo, le nombre de vidéos et le nombre d'abonnés vont être affichés sur le widget.
Vous pouvez également modifier la largeur et la hauteur du gadget.




Démonstration Du Gadget Abonnement Youtube

Voici une démonstration du gadget Youtube Subscribe avec les chaînes "BloggerHelp" et "InsideAdsense".

Configuration Du Gadget

Indiquez le nom de votre chaîne Youtube ainsi la largeur souhaitée du widget :
Votre nom d'utilisateur Youtube
Largeur du gadget
le code du widget à copier
<iframe id="fr" src="http://www.youtube.com/subscribe_widget?p=TBlogueur" style="overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe>

Ajouter Le Widget Youtube Subscribe à Blogger

Le widget peut être placé au-dessus ou en-dessous de chaque article de votre blogue ou dans un gadget HTML/JavaScript :

Placer le code dans un gadget HTML/JS

Allez à "Mise En Page" ► "Ajouter un Gadget" ► Dans la liste proposée par Blogger, choisissez le gadget "HTML/JavaScript", coller le code du gadget et cliquez sur "Enregistrer"

Placer le widget dans les pages articles

Allez à "Modèle" ► "Modifier le code HTML" ► cochez la case "Développer des modèles de gadgets",

Collez le code juste après la ligne suivante pour afficher le widget au début des articles,
<div class='post-header-line-1'>

ou après l'une des lignes suivantes pour l'afficher à la fin des articles.
<div class='post-footer-line post-footer-line-1'>
 --
<div class='post-footer-line post-footer-line-2'>
 --
<div class='post-footer-line post-footer-line-3'>

15 avr. 2012

Ajouter Le Bouton StumbleUpon à Blogger

StumbleUpon Button
Ajouter un bouton StumbleUpon sur votre blog pour permettre aux visiteurs de soumettre vos messages à StumbleUpon ce qui vous permettra de profiter d'un trafic supplémentaire et une exposition gratuite sur StumbleUpon!
Ce message explique comment ajouter un bouton Stumble à vos blogs Blogger afin que les utilisateurs peuvent "Stumbler" leurs postes préférés.





Ajouter Le Bouton StumbleUpon à Blogger Blogspot

Le bouton de partage StumbleUpon peut être placé en-dessous ou au-dessus de chaque message ou dans un gadget HTML/JavaScript.

Pour ajouter ce bouton à votre blog rien de plus simple,
Tout d'abord allez à "Modèle" > "Modifier Le Code HTML", cochez la case "Développer des modèles de gadgets" et collez-y le code suivant avant la fermeture de la balise "Head"
<script type="text/javascript">
  (function() {
    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
    li.src = 'https://platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
  })();
</script>

Et celui-ci à l'endroit où est ce que vous voulez afficher le bouton :
<su:badge layout="4"></su:badge>
Dans le code ci-dessus, vous pouvez changer la valeur '4' avec 1, 2, 3, 5 ou 6 pour avoir un style différent.Voici les styles disponibles :

Style 1 Style 2 Style 3 Style 4 Style 5 Style 6

9 avr. 2012

Ajouter Le Bouton De Partage Officiel Linkedin à Blogger

LinkedIn Button
LinkedIn a introduit un bouton de partage. Son fonctionnement est le même que pour les boutons de Twitter et Facebook: permettre à vos lecteurs et visiteurs de partager facilement les articles de votre site ou blog sur le réseau social LinkedIn.
Le bouton LinkedIn se décline sous trois formes: un compteur vertical, un autre horizontal et enfin un bouton sans compteur.
Dans ce qui suit, nous allons voir comment installer le bouton de partage officiel Linkedin dans Blogger Blogspot



Ajouter Le Bouton De Partage LinkedIn à Blogger

Pour mettre en place le bouton de partage Linkedin, il suffit de copier son code et le mettre sur vos pages, dans un endroit bien visible pour inciter vos lecteurs à l'utiliser.
Pour l'afficher au début des articles, allez à "Modèle" > "Modifier le code HTML" cochez la case "Développer des modèles de gadgets" et recherchez le code suivant :
<div class='post-header-line-1'/>
Et juste après, collez le code du bouton puis enregistrer votre modèle.
Si vous ne trouvez pas <div class='post-header-line-1'/> dans votre modèle, collez le code du bouton juste Avant <data:post.body/>

Format Vertical Avec Compteur

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script>
</div>
</b:if>

Résultat


Format Horizontal Avec Compteur

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="right"></script>
</div>
</b:if>

Résultat


Format Horizontal Sans Compteur

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share"></script>
</div>
</b:if>

Résultat



Maintenant, le bouton de partage Linkedin est ajouté dans toutes les pages articles de votre blog.

6 avr. 2012

Ajouter Le Bouton Google +1 à Blogger

Google +1 Button
A l’instar de Facebook avec son bouton «J’aime» ou encore de Twitter avec son bouton de partage «Tweeter», votre blog Blogger se doit d’ajouter un bouton Google +1 pour conquérir les réseux sociaux.
Le bouton Google +1 permet d’optimiser son positionnement selon les votes des internautes. Il permet aussi à vos lecteurs de partager le contenu de votre blog avec leurs amis à travers notamment leurs cercles Google+.
Ce bouton est disponible en quatre tailles :
- Petit (15px)                 - Moyen (20px)
- Standard (24px)          - Grand (60px)  


Comment installer Google +1 sur votre Blog Blogger

Le bouton +1 a déjà été ajouté à la barre de partage Blogger
Barre De Partage Blogger
Pour intégrer ce bouton dans un endroit diffèrent, rien de plus simple.
Tout d'abord allez à "Modèle" > "Modifier Le Code HTML" et collez-y le code suivant avant la fermeture de la balise "Head"
<script type="text/javascript">
  window.___gcfg = {lang: 'fr'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
Et celui-ci à l'endroit où est ce que vous voullez afficher le bouton :
<g:plusone size="medium" annotation="inline"></g:plusone>
Vous pouvez le copier par exemple après <div class='post-header-line-1'/> pour l'afficher au début des articles.
Remplacez medium par small, standard ou tall pour changer le style du bouton.

Démonstration

Medium :
Small :
Standard :
Tall :

Vidéo De Présentation


Ajouter Le Bouton Officiel De Partage Twitter à Votre Blog

Bouton Officiel Twitter
Le bouton de partage officiel Twitter permettra à vos visiteurs de partager en toute simplicité des liens de vos articles sur le réseau Twitter sans quitter le blog et cela avec un simple clic.
Le bouton officiel Tweet existe en trois formats :
- 110*20 : Bouton Tweet + Compteur horizontal
- 55*20 : Bouton Tweet seul
- 55*63 : Bouton Tweet + Compteur vertical

Dans ce qui suit, nous allons voir comment installer le bouton de partage officiel Twitter dans Blogger Blogspot.



Ajouter Le Bouton De Partage Twitter à Blogger

Pour mettre en place le bouton Twitter, il suffit de copier (et modifier les informations vous concernant) ce code et le mettre sur vos pages, dans un endroit bien visible pour inciter vos lecteurs à l'utiliser.
Vous pouvez le copier par exemple après <data:post.body/> pour l'afficher à la fin des articles ou après <div class='post-header-line-1'/> pour l'afficher au début des articles.

Format vertical avec compteur

<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

Format Horizontal avec compteur

<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

Format horizontal sans compteur

<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none"  data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
N'oubliez pas de remplacer "TWITTER-username" avec votre nom d'utilisateur Twitter.

Vidéo de démonstration (En Anglais)




Pour plus d'informations visitez le lien suivant : http://dev.twitter.com/pages/tweet_button

Advertissement