novembre 2010 | La blogatière 100% Blog | Faire connaître son blogger

Traducteur avec drapeaux

jeudi 25 novembre 2010

Si vos lecteurs arrivent du monde entier, voici un gadget bien pratique pour traduire votre blog dans différentes langues.

Le fonctionnement est assez simple, il suffit de cliquer sur le drapeau du pays choisi.

Mise en œuvre:

Allez dans présentation sur votre tableau de bord blogger puis cliquez sur ajouter un gadget.
Choisissez le gadget "ajouter HTML" et faites un copier/coller du code.

<style>

 .google_translate img {
        filter:alpha(opacity=100);
        -moz-opacity: 1.0;
        opacity: 1.0;
        border:0;
        }
        .google_translate:hover img {
        filter:alpha(opacity=30);
        -moz-opacity: 0.30;
        opacity: 0.30;
        border:0;
        }
        .google_translatextra:hover img {
        filter:alpha(opacity=0.30);
        -moz-opacity: 0.30;
        opacity: 0.30;
        border:0;
        }
  </style>

 <div>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBrDZLrI/AAAAAAAAAC0/Kc6eDMT9LFI/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YVBzoFF2I/AAAAAAAAAC8/WgvMK3zP1Rk/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YVCdHp5VI/AAAAAAAAADE/lWHzr5znExU/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM/ChdHC6vYT4s/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWRkFo9UI/AAAAAAAAADU/4AzKfc6Oyxg/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
      <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YWR-jg9pI/AAAAAAAAADc/vYZrPOzazHU/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSGHcxOI/AAAAAAAAADk/ElHZBjDCZn8/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSR2_wYI/AAAAAAAAADs/GtKdPLKUluE/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="http://2.bp.blogspot.com/_5jbh95HruKA/S1YWSrlfMyI/AAAAAAAAAD0/_MACsRIW8wg/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWq7SrDkI/AAAAAAAAAD8/ZE8A1isEZrw/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWrMQAw9I/AAAAAAAAAEE/r-DEVtWXp50/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a>      </div> 
  <div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div>

 <br/>
        <a href="http://blogatiere.blogspot.com/2010/11/traducteur-avec-drapeaux.html"><font size="1px">La blogatière</font></a>

2 commentaires

Retour haut de page sur blogger

jeudi 18 novembre 2010

Comment ajouter un retour haut de page sur blogspot.

Il est souvent pratique d'avoir un retour haut de page surtout lorsque que l'on a de longs billets, cela évite d'avoir à faire re-défiler manuellement le post jusqu'en haut.

Dans ce tutorial le "retour haut de page" scroll en même temps que la page descend, c'est à dire qu'il suit la descente du billet et permet à tout moment de revenir en haut de page.

Exemple sur plan de cuisine

Allez dans votre panneau de configuration, modifier code HTML.

Cherchez le code

]]></b:skin>

Et juste avant ce code y placer:

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

Maintenant cherchez le code:

</body>

Juste avant y placer:

<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>

Remplacez le texte en rouge

Image-Url

par une image de votre choix, si celle qui est prise pour exemple dans ce billet (la flèche rouge en photo au début) vous plait, voici le code:

http://lh3.ggpht.com/_H93vdFF_TUk/TOOJvfe2bfI/AAAAAAAAAhQ/xJHOn6Erqj8/s800/Haut%20de%20page.png

Maintenant cherchez la balise:

<head>

Juste après y placer le code:

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;

6 commentaires

Commentaires blogger dofollow

dimanche 14 novembre 2010

Comment mettre les commentaires sur blogspot en dofollow?

Par défaut les commentaires de vos lecteurs sont en nofollow sur blogger, c'est à dire que les liens laissés dans les com's ne sont pas pris en compte par google.

C'est un peu injuste pour les blogueurs dans la mesure ou un blog vit de part les commentaires laissés.

Pourquoi ne pas laisser les moteurs de recherches suivre les liens de vos fidèles lecteurs?

Cela n'amènera pas plus de spam et c'est à vous de modérer et de supprimer les commentaires inutiles.

Dans votre tableau de bord blogger allez dans présentation, modifier le code HTML, cliquez sur "Développer des modèles de gadgets".

Cherchez ce bout de code: <a expr:href=’data:comment.authorUrl’ rel=’nofollow’>

Remplacez la partie en rouge par rel=’follow’

Sauvez votre template et c'est fini, dorénavant les commentaires seront indexés et les liens suivis.

25 commentaires

Carrousel image

mercredi 10 novembre 2010

Carrousel sur Plan cuisine

Voilà un gadget bien sympathique, un carrousel d'images c'est à dire que les images défilent automatiquement.

Réalisé en jQuéry vous n'aurez pas besoin d'héberger de javascript. Dans un prochain billet je vous donnerai différents scripts jQuéry pour changer l'effet des images.

A noter que ce slidder est en 600px 240px, vous pouvez changer la taille en changeant les valeurs pour l'adapter à votre blog.

Dans le panneau de configuration allez dans présentation et modifier code HTML.

Cherchez la balise </head> et juste avant y placer le code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(5000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
        function () {
                clearInterval(timer);
        },
        function () {
                timer = setInterval('gallery()',speed);
        }
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
                //Display the content
                $('#slideshow-caption h3').html(title);
                $('#slideshow-caption p').html(desc);
                $('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

Sauvegardez !

Retournez dans présentation et ajoutez un gadget, choisissez "ajoutez HTML/javascript et y placer ce code:

<ul class="slideshow">

<li><a href="#"><img src="Adresse de votre photo" title="Titre de votre billet" alt="Description qui va être sur la photo" /></a></li>

<li><a href="#"><img src="Adresse de votre photo" title="Titre de votre billet" alt="Description qui va être sur la photo" /></a></li>

<li><a href="#"><img src="Adresse de votre photo" title="Titre de votre billet" alt="Description qui va être sur la photo" /></a></li>

<li><a href="#"><img src="Adresse de votre photo" title="Titre de votre billet" alt="Description qui va être sur la photo" /></a></li>

</ul>

Vous pouvez en ajouter autant que vous voulez.

Remplacez # par l'adresse de votre billet.
L'adresse où est hébergée votre photo.
Le titre du billet.
Un résumé du billet

4 commentaires

Ajouter les méta tags sur blogger

lundi 8 novembre 2010

Comment ajouter les méta tags sur blogspot?

Définition des méta tags.

Les méta tags sont en fait des balises composées des mots clés de votre blog qui vont permettre aux moteurs de recherches de classer et de faire apparaitre votre blog suivant la recherche des internautes.

Si votre blog parle de voitures, ces méta tags doivent comporter le mot "voiture" et plusieurs variantes, c'est ce qui fera apparaître votre blog lorsqu'un internaute fera une recherche concernant les voitures.

Il y a quatre balises importantes.

Balise titre du blog, on ne va pas s'en occuper elle est remplie avec le nom que vous avez donné à votre blog à son ouverture.
Balise titre des billets, c'est le titre que vous donnez à chacun de vos messages.
Balise description, celle-ci est manquante chez blogger. C'est un petit résumé de votre blog qui apparait sur les moteurs de recherches juste sous le titre (snippet).
Balise mots clé, manque également à l'appel, c'est une série de mots séparés par des virgules en rapport au sujet de votre blog. Ne sert plus beaucoup parait il...ça ne mange pas de pain que de la mettre quand même.

Comment les ajouter.

Dans votre panneau de configuration allez dans présentation puis modifier le code HTML.

Cherchez la balise: <b:include data='blog' name='all-head-content'/>

Juste à la suite placez:

<meta content='Votre description' name='description'/> <meta content='vos mots clés' name='keywords'/>

La description doit être obligatoirement des phrases pour un total de 150 caractères maxi espace inclus, bien construites, ne pas mettre plus de 3 fois le même mot. Les mots clés doivent être séparés par des virgules.

Truc: le HTML n'aime pas les apostrophes, si dans votre description vous voulez écrire par exemple" l'olive " il faut remplacer le ' par ’

l’olive

Sinon vous allez avoir un message d'erreur puisque l'apostrophe sert à fermer un code dans le HTML.

4 commentaires

Supprimer le cadre image

mercredi 3 novembre 2010

Comment supprimer l'encadrement d'une image sur un post?

Un petit billet rapide pour vous expliquer comment supprimer ou modifier le cadre d'une image blogspot sur vos posts.

Allez dans présentation, modifier HTML puis chercher post img, le code doit se présenter de cette façon:

.post img {
border : 2px solid #610404;
padding : 3px;

Pour supprimer le cadre, mettre les 2 valeurs à 0px

Vous pouvez également modifier le cadre (c'est le code de ce blog) border signifie l'épaisseur du cadre et padding l'espace entre le cadre et la photo. solid #610404; est la couleur du cadre (ici rouge foncé).

Rien ne vous empêche de modifier l'épaisseur du cadre, sa couleur, l'espace entre la photo et le cadre et même d'ajouter de la couleur dans l'espace vide du cadre ! pour cela ajoutez un code couleur solid #votre couleur entre le px et le ; du padding...

0 commentaires

Supprimer la navbar

Supprimer la navbar de blogger.

Comment faire pour supprimer la navbar qui se trouve en haut des blogspots?

Il est vrai que sa présence contribue à enlaidir les blogs surtout lorsque l'on a un beau template personnalisé.

Sa suppression est simple à réaliser, tout d'abord allez dans présentation puis modifier le code HTML de votre template. Il est inutile de cocher "développer des modèles de gadget".

Cherchez navbar dans le code, utilisez Ctrl + f pour vous aider. Une fois trouvé, remplacez le bout de code de la navbar par ceci:

#navbar-iframe {
visibility : hidden;
display : none;

Pensez à sauvegarder et adieu la navbar.

Alors! qu'en pensez vous?
Laissez vos impressions sur les commentaires et n'hésitez pas à vous inscrire et devenir membre de La blogatière, vous serez informé avant tout le monde des nouveautés :)

1 commentaires

Traducteur avec drapeaux

Retour haut de page sur blogger

Commentaires blogger dofollow

Carrousel image

Ajouter les méta tags sur blogger

Supprimer le cadre image

Supprimer la navbar

Traducteur multi-langues

La blogatière 100% Blog | Faire connaître son blogger

Catégories

Billets populaires

Découvrez les nouvelles astuces en 1er

Pense bête

Blogs proposant un échange de lien

Archives du blog

Référencé dans: