Publié par
Mickaël Rigaud on 27 novembre 201226 novembre 201225 novembre 201220 novembre 201211 novembre 201210 novembre 2012
Après avoir testé plusieurs solutions qui ne marchaient pas pour placer de la publicité Adsense sous le titre des articles de mon blog Blogger, j'en ai trouvé une qui fonctionne réellement. voici la procédure à suivre:
1: Rendez-vous dans "Modèle" ensuite "Modifier le code HTML" et enfin choisissez "Traiter". N'oubliez pas de cocher la case "Développer des modèles de gadgets". Recherchez ']]><div class='post-body entry-content'>', grâce à la combinaison Ctrl et la touche F > et collez juste à la suite le code Adsense que vous aurez modifier grâce au convertisseur de code Adsense ci-dessous.
Comment faire? suivez les 3 étapes ci-dessous
1 . Ajoutez votre code Adsense dans la "boîte" ci-dessous.
2 . Il suffit de cliquer sur "Convertir" le code d'annonce.
3 . Copiez le code converti et collez-le ou vous le souhaitez dans votre blog Blogger.
Cet outil convertit automatiquement le code javascript de votre annonce dans le bon format afin que vous puissiez l'intégrer directement dans votre modèle xml Blogger. Ce convertisseur est parfait pour convertir les publicités AdSense, AdBrite, Chitika ou tout autre code d'annonce javascript que vous pourriez vouloir insérer dans votre blog Blogger.
Instructions: Collez votre code Adsense dans la case vide, puis appuyez sur le bouton "Convertir".
Publié par
Mickaël Rigaud on 27 novembre 201226 novembre 201225 novembre 201220 novembre 201211 novembre 201210 novembre 2012
Pour supprimer les bordures et les effets d'ombre sur toutes les images de votre blog Blogger. Alors comment effacer la bordure qui apparaît autour des images de vos posts, rien de plus simple, pour effacer les bordures des images que vous mettez dans vos articles, voici la procédure à suivre:
1: Rendez-vous dans "Modèle" ensuite "Modifier le code HTML" et enfin choisissez "Traiter". N'oubliez pas de cocher la case "Développer des modèles de gadgets". Recherchez ']]></b:skin>', grâce à la combinaison Ctrl et la touche F > et collez juste avant le bout de code qui suit:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img { padding: none !important; border: none !important; background: none !important; -moz-box-shadow: 0px 0px 0px transparent !important; -webkit-box-shadow: 0px 0px 0px transparent !important; box-shadow: 0px 0px 0px transparent !important; }
Maintenant, sauvegardez votre modèle et aller voir le résultat sur votre blog Blogger. Normalement toutes vos images devraient se retrouver sans bordures et sans effets d'ombre. Une astuce super simple qui prend 10 secondes à tout casser!
Sinon, je viens juste de trouver une autre méthode (un bout de code à ajouter au CSS de votre site) qui fonctionne aussi et qui est encore plus simple. Pour enlever les bordures et les ombres des images de votre blog Blogger, suivez les étapes ci-dessous:
1: Rendez-vous sur le tableau de bord de votre blog Blogger.
2: Maintenant cliquez sur l'onglet "Modèle".
3: Ensuite appuyez sur le bouton "Personnaliser".
4: Dans le menu de gauche allez sur "Avancé".
5: Dans le nouveau menu qui s'ouvre cliquez sur "Ajouter le fichier CSS".
6: Et enfin collez le code suivant et enregistrez.
img{
box-shadow: none !important;
padding: 0px !important;
border: 0px !important; }
Publié par
Mickaël Rigaud on 27 novembre 201226 novembre 201225 novembre 201220 novembre 201211 novembre 201210 novembre 2012
Ajoutez les trois principales icônes sociales (Facebook, Twitter, Google Plus) dont vous aurez besoin pour développer l'audience de votre blog Blogger. Ce widget d'abonnement contient donc les trois icônes sociales de Google+, Twitter et Facebook et lorsque vous passez le curseur dessus, une bulle apparaît dans un effet "mouse hover" du plus bel effet, avec le nom du réseau social pointer par la souris. Pour installer le Widget rendez-vous dans "Mise en Page" ensuite "Ajouter un Gadget" et enfin choisissez "HTML/Javascript":
<!-- Social Sharing Icon With CSS3 animated tooltips Widget For Blogger By Blogger-Astuces-Tutoriels @ http://blogger-astuces-tutoriels.blogspot.fr/ --><style type="text/css">.md-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md-wrapper li{float:left;}.md-wrapper ol,ul{list-style:none;}.md-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;background:transparent url(http://img694.imageshack.us/img694/3686/blogspotcomsocialgunman.png) no-repeat top left;text-indent:-9000px;position:relative;}.md-wrapper li .md-gplus{background-position:0px 0px;}.md-wrapper li .md-twitter{background-position:-68px 0px;}.md-wrapper li .md-facebook{background-position:-204px 0px;}.md-wrapper li a span{width:100px;height:auto;line-height:20px;padding:10px;left:50%;margin-left:-64px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:4px solid #fff;background:rgba(255,255,255,0.3);text-indent:0px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;pointer-events:none;bottom:100px;opacity:0;/*box-shadow*/-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.1);box-shadow:1px 1px 2px rgba(0,0,0,0.1);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md-wrapper li a span:before,.md-wrapper li a span:after{content:'';position:absolute;bottom:-15px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,0.1);}.md-wrapper li a span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #fff;}.md-wrapper li a:hover span{opacity:0.9;bottom:70px;}.md2-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md2-wrapper li{float:left;}.md2-wrapper ol,ul{list-style:none;}.md2-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;position:relative;z-index:2;background:transparent url(http://img694.imageshack.us/img694/3686/blogspotcomsocialgunman.png) no-repeat top left;text-indent:-9000px;}.md2-wrapper li .tt-gplus{background-position:0px 0px;}.md2-wrapper li .md2-twitter{background-position:-68px 0px;}.md2-wrapper li .md2-facebook{background-position:-204px 0px;}.md2-wrapper li a span{width:80px;height:80px;line-height:80px;padding:10px;left:50%;margin-left:-55px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:5px solid #fff;background:rgba(255,255,255,0.5);text-indent:0px;position:absolute;pointer-events:none;/*border-radius*/-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;bottom:-40px;opacity:0;/*box-shadow*/-webkit-box-shadow:0px 3px 8px rgba(0,0,0,0.1);-moz-box-shadow:0px 3px 8px rgba(0,0,0,0.1);box-shadow:0px 3px 8px rgba(0,0,0,0.1);/*transform*/-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md2-wrapper li a:hover span{opacity:0.9;bottom:50px;/*transform*/-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}.md3-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md3-wrapper li{float:left;}.md3-wrapper ol,ul{list-style:none;}.md3-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;position:relative;z-index:2;background:transparent url(http://img694.imageshack.us/img694/3686/blogspotcomsocialgunman.png) no-repeat top left;text-indent:-9000px;}.md3-wrapper li .md3-gplus{background-position:0px 0px;}.md3-wrapper li .md3-twitter{background-position:-68px 0px;}.md3-wrapper li .md3-facebook{background-position:-204px 0px;}.md3-wrapper li a span{width:80px;height:auto;padding:10px;left:50%;margin-left:-55px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:5px solid #fff;background:rgba(255,255,255,0.5);text-indent:0px;position:absolute;pointer-events:none;bottom:-40px;opacity:0;/*box-shadow*/-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.1);box-shadow:0px 1px 2px rgba(0,0,0,0.1);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;/*transform*/-webkit-transform:rotate(0deg) scale(0);-moz-transform:rotate(0deg) scale(0);-ms-transform:rotate(0deg) scale(0);-o-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);}.md3-wrapper li a:hover span{opacity:0.9;bottom:100px;/*transform*/-webkit-transform:rotate(-90deg) scale(1);-moz-transform:rotate(-90deg) scale(1);-ms-transform:rotate(-90deg) scale(1);-o-transform:rotate(-90deg) scale(1);transform:rotate(-90deg) scale(1);}.md4-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md4-wrapper li{float:left;}.md-wrapper ol,ul{list-style:none;}.md4-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;background:transparent url(http://img694.imageshack.us/img694/3686/blogspotcomsocialgunman.png) no-repeat top left;text-indent:-9000px;position:relative;}.md4-wrapper li .md4-gplus{background-position:0px 0px;}.md4-wrapper li .md4-twitter{background-position:-68px 0px;}.md4-wrapper li .md4-facebook{background-position:-204px 0px;}.md4-wrapper li a span{width:100px;height:auto;line-height:20px;padding:10px;left:50%;margin-left:-64px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:4px solid #fff;background:rgba(255,255,255,0.3);text-indent:0px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;bottom:70px;opacity:0;visibility:visible;pointer-events:none;/*box-shadow*/-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.1);box-shadow:1px 1px 2px rgba(0,0,0,0.1);/*transform*/-webkit-transform:translate(35px) rotate(25deg) scale(1.5);-moz-transform:translate(35px) rotate(25deg) scale(1.5);-ms-transform:translate(35px) rotate(25deg) scale(1.5);-o-transform:translate(35px) rotate(25deg) scale(1.5);transform:translate(35px) rotate(25deg) scale(1.5);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md4-wrapper li a span:before,.md4-wrapper li a span:after{content:'';position:absolute;bottom:-15px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,0.1);}.md4-wrapper li a span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #fff;}.md4-wrapper li a:hover span{visibility:visible;opacity:0.9;/*transform*/-webkit-transform:translate(0px) rotate(0deg) scale(1);-moz-transform:translate(0px) rotate(0deg) scale(1);-ms-transform:translate(0px) rotate(0deg) scale(1);-o-transform:translate(0px) rotate(0deg) scale(1);transform:translate(0px) rotate(0deg) scale(1);}</style><ul class="md4-wrapper"><li><a class="md4-gplus" href="https://plus.google.com/u/1/b/116925764764509930506"><span>Google Plus</span></a></li><li><a class="md4-twitter" href="https://www.twitter.com/AstucesTutoriels"><span>Twitter</span></a></li><li><a class="md4-facebook" href="https://www.facebook.com/tutorielsBlogger"><span>Facebook</span></a></li></ul><!-- Social Sharing Icon With CSS3 animated tooltips Widget For Blogger By Blogger-Astuces-Tutoriels @ http://blogger-astuces-tutoriels.blogspot.fr/ -->
2: PERSONNALISATION:
https://plus.google.com/u/1/b/116925764764509930506 ...– remplacez avec votre numéro de page ou de votre identifiant Google+.
https://www.twitter.com/AstucesTutoriels ... – Remplacez par votre identifiant sur le réseau Twitter.https://www.facebook.com/tutorielsBlogger ... – Remplacez par votre profil social sur le réseau Facebook.
Il ne vous reste plus qu'à enregistrer votre widget et admirer son fonctionnement sur le blog test de Blogger-Astuces-Tutoriels à cette adresse: http://bloggerblogspotest.blogspot.fr/. Comme vous pouvez le constater, chaque fois que vous passez la souris sur un des logos sociaux, une petite bulle apparaît avec le nom du réseau social. Plutôt sympa ce petit gadget Blogger, non?! En plus pas compliquer à installer!
Publié par
Mickaël Rigaud on 27 novembre 201226 novembre 201225 novembre 201220 novembre 201211 novembre 201210 novembre 2012
Je vous avais montré il y a quelques semaines comment ajouter un effet de rotation complet (360 degrés) au widget "Messages les plus consultés", lorsque qu'un internaute pointait le curseur de sa souris sur la vignette d'un de vos articles les plus populaires. Aujourd'hui l'astuce se rapproche de la précédente, sauf qu'elle s'applique à toutes les images du blog et que l'effet ressemble plus à une sorte d'inclinaison vers la gauche qu'une véritable rotation. Pour réaliser cette astuce, il suffit d'ajouter un petit bout de CSS qui fera pivoter les images de votre blog Blogger de quelques degrés quand un visiteur pointera le curseur de sa souris juste au-dessus. Et quand le curseur ne sera plus sur les images, celles-çi reprendront leurs positions normales, sans plus attendre passons au tutoriel:
1: Rendez-vous dans "Modèle" ensuite "Modifier le code HTML" et enfin choisissez "Traiter". N'oubliez pas de cocher la case "Développer des modèles de gadgets". Recherchez ']]></b:skin>', grâce à la combinaison Ctrl et la touche F > et collez juste avant le bout de code qui suit:
.post img {-webkit-transition: -webkit-transform .15s linear;-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);padding: 5px 5px 5px 5px;-webkit-transform: rotate(+2deg);-moz-transform: rotate(+2deg);}
.post img:hover {-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);-webkit-transform: rotate(-1deg);-moz-transform: rotate(-1deg);}
Maintenant, sauvegardez votre modèle et vous avez terminé .... J'espère que vous aimerez cette petite astuce Blogger. Sinon, si voulez modifier les valeurs de rotation pour les images: Il suffit de changer les chiffres en rouge par ceux que vous désirez et de rafraîchir le blog, pour voir si le résultat obtenu vous convient, si c'est le cas sauvegarder ces paramètres et profiter de l'effet d'inclinaison avec modération! ;-).
Publié par
Mickaël Rigaud on 27 novembre 201226 novembre 201225 novembre 201220 novembre 201211 novembre 201210 novembre 2012
Voici une astuce super simple qui vous permet d'afficher sous chacun de vos posts, un widget qui affiche les boutons de partage vers les trois principaux réseaux sociaux (Tweeter, Facebook, Google Plus). Grâce à ce gadget vous permettez à vos visiteurs de partager facilement vos articles et ainsi de faire connaître votre blog Blogger au plus grand nombre. Par conséquent, il est important d'ajouter ces boutons de partage social dans votre blog ou site web pour obtenir plus de trafic, de visiteurs et de lecteurs. Le petit plus de ce widget c'est son background original qui se démarque des autres gadgets du même style. Maintenant, sans plus attendre, voyons comment installer ce widget à votre blog Blogger:
1: Rendez-vous dans "Modèle" ensuite "Modifier le code HTML" et enfin choisissez "Traiter". N'oubliez pas de cocher la case "Développer des modèles de gadgets". Recherchez '<div class='post-footer-line post-footer-line-1'>', grâce à la combinaison Ctrl et la touche F > et collez juste avant le bout de code qui suit:
<b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg {
height: 103px;
background: url(http://img132.imageshack.us/img132/474/bloggerastucestutoriels.png) 0 -7px no-repeat;
width: 500px;
margin-left: 65px;
}
.promote_twitter {
width: 130px;
height: 38px;
float: left;
margin: 0 39px 0 0;
padding: 65px 0 0 13px;
text-align: center;
}
.promote_facebook {
width: 115px;
height: 40px;
float: left;
margin: 0 39px 0 0;
padding: 63px 0 0 28px;
text-align: center;
}
.promote_google {
width: 65px;
height: 40px;
float: left;
margin: 0 39px 0 0;
padding: 65px 0 0 28px;
text-align: center;
}
</style>
<div class='promote_post_bg'>
<div class='promote_twitter'>
<a class='twitter-share-button' data-via='blogger-astuces-tutoriels' href='https://twitter.com/share'>Tweet</a>
<script>
!
function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = "//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</div>
<div class='promote_facebook'>
<fb:like action='like' colorscheme='light' expr:href='data:post.canonicalUrl' font='verdana' layout='button_count' send='false' show_faces='false'/>
<div>
<b:if cond='data:post.isFirstPost'>
<script>
(function (d) {
var js, id = 'facebook-jssdk';
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</b:if>
</div>
</div>
<div class='promote_google'>
<g:plusone annotation='none' size='medium'/>
<script type='text/javascript'>
(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>
</div>
</div>
</b:if>
Maintenant, sauvegardez votre modèle et admirez le résultat. De superbes boutons de partage de réseau social à la fin de chaque post de votre blog Blogger. Avec l'aide des médias sociaux, vous pourrez obtenir plus de trafic, des visiteurs et des lecteurs sur votre blog ou site web.Vous pouvez d'ailleurs voir le gadget en bas de chaque article du blog Blogger-Astuces-Tutoriels.
Publié par
Mickaël Rigaud on 27 novembre 201226 novembre 201225 novembre 201220 novembre 201211 novembre 201210 novembre 2012
Voici une autre astuce qui vous permet d'afficher sous chacun de vos posts, un widget qui contient un formulaire d'abonnement aux nouveautés de votre site et des liens sous la forme de belles icônes vers les principaux réseaux sociaux auxquels votre site est inscrit (Facebook, Twitter, Google+) et une dernière icône qui renvoie vos visiteurs vers la page d'abonnement de votre flux rss sous FeedBurner. Ce widget très complet s'installe très facilement en 2 ou 3 clics , maintenant voyons comment installer ce widget à votre blog Blogger:
1: Rendez-vous dans "Modèle" ensuite "Modifier le code HTML" et enfin choisissez "Traiter". N'oubliez pas de cocher la case "Développer des modèles de gadgets". Recherchez '<data:post.body/>', grâce à la combinaison Ctrl et la touche F > et collez juste après le bout de code qui suit:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
form.feedburner {
margin: 20px 0 0;
display: block;
clear: both;
}
.blogger-astuces-tutoriels-style {
background: url(http://img18.imageshack.us/img18/5105/emailiconlv.png) no-repeat scroll 4px center transparent;
padding: 7px 15px 7px 35px;
color: #666;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.blogger-astuces-tutoriels-submit {
color: #666;
font-weight: bold;
text-decoration: none;
padding: 6px 15px;
border: 1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='
#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#blogger-astuces-tutoriels-widget {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 520px;
-webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);
-webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D;
}
#blogger-astuces-tutoriels-widget:hover {
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#blogger-astuces-tutoriels-widget td {
padding: 3px 0;
}
</style>
<center><br/><div id='blogger-astuces-tutoriels-widget'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family:georgia;font-style:italic; '>
Recevez les mises à jour par email!
</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=TutorielsEtAstucesPourAmliorerUnBlogBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='TutorielsEtAstucesPourAmliorerUnBlogBlogger'/>
<input name='loc' type='hidden' value='fr_FR'/>
<input class='blogger-astuces-tutoriels-style' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Entrez votre email…'/>
<input alt='' class='blogger-astuces-tutoriels-submit' title='' type='submit' value='Envoyez'/>
</form>
</td>
<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<a href='http://feeds.feedburner.com/TutorielsEtAstucesPourAmliorerUnBlogBlogger' rel='nofollow' target='_blank' title='Vous inscrire au Flux RSS'><img src='http://img202.imageshack.us/img202/2995/iconrss.png'/></a>
<a href='http://twitter.com/AstucesTutoriels' rel='nofollow' target='_blank' title='Nous suivre sur Twitter'><img src='http://img197.imageshack.us/img197/9013/icontwitterd.png'/></a>
<a href='https://www.facebook.com/tutorielsBlogger' rel='nofollow' target='_blank' title='Nous suivre sur Facebook'><img src='http://img19.imageshack.us/img19/4026/iconfacebookfb.png'/></a>
<a href='https://plus.google.com/u/1/b/116925764764509930506/' rel='nofollow' target='_blank' title='Nous suivre sur Google+'><img src='http://img51.imageshack.us/img51/103/icongoogleplusgplus.png'/></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</center>
</b:if>
2: PERSONNALISATION:
TutorielsEtAstucesPourAmliorerUnBlogBlogger... – Remplacez les 3 avec votre nom d'utilisateur Feedburner.
tutorielsBlogger... – Remplacez avec votre nom d'utilisateur "Facebook".
AstucesTutoriels... – Remplacez avec votre nom d'utilisateur "Twitter".
116925764764509930506... – Remplacez par votre ID "Google+".
520... – Pour changer la longueur du widget.
Une fois toutes les modifications apportées, enregistrez votre modèle. Et voilà, vous pouvez voir apparaître le widget abonnement sous chacun des posts de votre blog Blogger. Ce widget vous aidera sûrement à augmenter le nombre de vos abonnés. Vous pouvez admirer en das de la sidebar à droite du blog Blogger-Astuces-Tutoriels.
Publié par
Mickaël Rigaud on 27 novembre 201226 novembre 201225 novembre 201220 novembre 201211 novembre 201210 novembre 2012
Découvrez ce soir (2h33) comment installer un widget Social contenant les principaux réseaux sociaux (Facebook, Twitter, Google Plus) et un icône RSS pour permettre aux lecteurs de s’inscrire au flux de votre blog. Pour attirer le regard des lecteurs vers ce widget, nous avons ajoutés un petit effet CSS3: Lorsque que l'un des visiteurs de votre site pointera le curseur de sa souris sur le widget, les icônes s'animeront, ils feront une sorte de tour sur eux-mêmes. Ce widget vous aidera sans aucun doute d'augmenter le nombre d'abonnés à vos différents réseaux sociaux et aussi à inciter les visiteurs à partager le contenu de votre blog vers les principaux sites de réseaux sociaux comme Facebook, Twitter, etc. Pour installer le Widget rendez-vous dans "Mise en Page" ensuite "Ajouter un Gadget" et enfin choisissez "HTML/Javascript":
<style>p#hb_socialicons img {
/* Spinning Social Icons Widget By Blogger-Astuces-Tutoriels */
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
p#hb_socialicons img:hover {
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
/* Spinning Social Icons Widget By Blogger-Astuces-Tutoriels */
</style>
<center><p id="hb_socialicons">
<a href="http://www.facebook.com/tutorielsBlogger/">
<img border="0" src="http://img809.imageshack.us/img809/9216/facebooksocial.png" /></a>
<a href="http://www.twitter.com/AstucesTutoriels/">
<img border="0" src="http://img440.imageshack.us/img440/2913/twittericonej.png" /></a>
<a href="https://plus.google.com/u/1/b/116925764764509930506">
<img border="0" src="http://img197.imageshack.us/img197/6189/googleplusq.png" /></a>
<a href="http://blogger-astuces-tutoriels.blogspot.com/feeds/posts/default">
<img border="0" src="http://img703.imageshack.us/img703/6496/logorss.png" /></a>
</p></center>
2: PERSONNALISATION:
http://www.facebook.com/tutorielsBlogger/ ...– remplacer les lignes en surbrillance avec l'URL de votre profil social.
120... – Pour éditer le degrés de rotation auquel les icônes doivent obéir (par exemple: 360 degrés).
Il ne vous reste plus qu'à enregistrer votre widget et admirer son fonctionnement sur le blog test de Blogger-Astuces-Tutoriels à cette adresse: http://bloggerblogspotest.blogspot.fr/. Comme vous pouvez le constater, chaque fois que vous passez la souris sur ces boutons, ils tourne en rond avec grâce et légèreté. Si vous avez besoin d'aide supplémentaire, n'hésitez pas à crier "AU SECOURS!!!" à l'aide du formulaire de commentaires du blog.
