Optimiser le chargement des pages avec images sur Blogger

Vous avez un blog avec beaucoup d'images ? Le chargement des pages est lent et vous cherchez comment remédier à ce problème ? Voici pour vous un moyen d’optimiser le chargement des images de votre blog afin de le rendre plus rapide et plus léger.

Source de l'image : Blog Thiêk kê

Le script de  +Hồng Hòa Vi  que je vais vous proposer ici fera que les images de votre blog ne seront plus chargées au même moment, mais au fur et à mesure que le lecteur ira vers le bas de la page.

Voici comment procéder pour optimiser le chargement des photos sur votre blog : 

1. Se connecter à Blogger. Aller sur “Modèle”, puis sur “Modifier le code HTML”

2. Trouver la balise </head>

3. Coller le script suivant juste avant la balise trouvée.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

<script src='http://blogthietke.googlecode.com/files/lazypic.js'/>
<script charset='utf-8' type='text/javascript'>
$(function() {    
$(&quot;img&quot;)  
.lazyload({
placeholder: &quot;https://lh3.googleusercontent.com/-Z9XhV1m9Jak/T3AqzaLp1EI/AAAAAAAACyw/Y1dC7eoBPxM/s5/eee.gif&quot;,
effect: &quot;fadeIn&quot;});
});
</script>


Notez que le script en rouge est à omettre s'il se trouve déjà dans votre modèle.

4. Enregistrer le modèle

Maintenant, le chargement des pages de votre blog avec images et autres photos sera plus rapide.

Lire la suite

Ajouter les attributs title et alt à vos images dans l'éditeur des messages

Parmi les nouveautés que Blogger nous a offert récemment, nous avons la possibilité d'ajouter les attributs title et alt aux images dans l'éditeur des messages, sans toucher le code html.

Pour accomplir ce petit tour, il suffit de cliquer sur l'image que vous avez ajouté à votre post, puis de cliquer sur le lien "Propriétés".

Une pop-up qui va apparaître vous donnera la possibilité d'ajouter le texte pour l'attribut title (texte qui s'affichera lorsqu'un lecteur passe sa souris sur l'image) ainsi que le texte pour l'attribut alt (texte qui s'affichera lorsque le chargement de l'image aura échoué).

Je trouve que Blogger nous facilite de plus en plus la tâche avec ces nouveautés. Ce n'est surtout pas moi qui vais me plaindre de cette nouvelle possibilité d'ajouter ces attributs title et alt aux images sans toucher au code html.

@+

Lire la suite

Voici pourquoi les gifs animés ne marchent pas sur Blogger

L'article les gifs animés sont maintenants animés sur Blogger continue à attirer des personnes désireuses de voir comment faire pour avoir ce résultat dans les articles qu'il publie. Seulement, il a été constaté depuis belle lurette que cette fonction est HS (hors service). Pourquoi ? 

La raison toute simple qui explique ce désagrément est que toutes les images avec une extension gif chargées sur Blogger au travers de l'éditeur de message sont transformées en images avec extension png.

Donc, si votre gif animé se nomme moonwalk.gif, dès que vous l'ajoutez à un billet en l'uploadant à partir de l'éditeur de message Blogger, cette image se nommera moonwalk.png, perdant ainsi toute possibilité de voir Michaël Jackson exécuter un moonwalk (si bien entendu l'image le représentait entrain de le faire).

La solution à ce désagrément serait d'héberger votre gif animé ailleurs et de l'insérer dans votre message grâce au code ci-après:

<img src="http://liendevotreimage.com/image.gif" altr="mots, clés, de votre image" />

Tout ceci pour dire que les gifs animés ne marchent pas sur Blogger parce que ce service n'affectionne pas particulièrement ce format d'image.

@+

Lire la suite

Afficher des icônes à côté des titres pour différencier les articles par catégories (libellés)

Si vous vous rendez sur le blog Marketing.fr  vous remarquerez que certains articles ont une icône semblable à côté de leurs titres. Il semble que ces icônes servent à différencier les articles des différentes catégories présentes sur le blog.

Quand on sait que l'intérêt de chaque lecteur varie selon la catégorie d'articles pour lesquels il visite le blog, afficher ce petit panneau de signalisation est d'une grande efficacité car il diminuerait le risque qu'un lecteur rate des articles d'une catégorie prisé par lui (vu qu'il sensé de croire qu'on ne lit pas tous les articles de votre blog).

Comme sur Blogger les libellés font office des catégories, il est possible d'afficher une icône propre à chaque libellé à côté du titre de l'article. Voici la démarche à suivre :

1. Se connecter à votre compte Blogger, puis aller sur "Mise en page", "Modifier le code html" et là cochez la case pour "Développer des modèles de gadget".

2. Trouvez la ligne de code suivante :

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>

<a expr:name='data:post.id'/>

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

3. Juste avant la ligne en rouge, mettez le code suivant

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;NOM_DU_LIBELLE_1&quot;'>

<span class="icocat"><img src="http://urldelimage.com/image.jpg" alt="description"/></span>
</b:if>
<b:if cond='data:label.name == &quot;NOM_DU_LIBELLE_2&quot;'>

<span class="icocat"><img src="http://urldelimage.com/image.jpg" alt="description"/></span>
</b:if>
<b:if cond='data:label.name == &quot;NOM_DU_LIBELLE_3&quot;'>

<span class="icocat"><img src="http://urldelimage.com/image.jpg" alt="description"/></span>
</b:if>
<b:if cond='data:label.name == &quot;NOM_DU_LIBELLE_4&quot;'>

<span class="icocat"><img src="http://urldelimage.com/image.jpg" alt="description"/></span>
</b:if>
</b:loop>

Pour ajouter d'autres libellés, il suffit de mettre une ligne de ce genre juste avant le </b:loop>

<b:if cond='data:label.name == &quot;NOM_DU_LIBELLE&quot;'>
<span class="icocat"><img src="http://urldelimage.com/image.jpg" alt="description"/></span>
</b:if>


L’idéal pour la taille des images, seraient qu’elles varient entre 30x30 pixels ou 50x50 pixels.

4. Juste avant ]]</b:skin> ajouter cette ligne :

.icocat img{padding: 0; float: left; border: none; margin: 0 10px 10px 0;}

Enregistrez votre modèle et allez admirer le résultat.

Une astuce inspirée par Blogger Stop et l'article "Photo de l'auteur à côté du titre de l'article sur un blog tenu en équipe".

@+

Lire la suite

Images et liens dansants sur Blogger

Des images et des liens dansants, ça vous tente ?

Ceux qui sont allés jeter un coup d'oeil à la demo du modèle Visiting card ont dû remarquer que lorsque le curseur de la souris passe sur le nom et l'image d'un reseau social, celui-ci exécute une petite danse.

La version wordpress de ce modèle utilise un script jquery que je n'ai pas réussi à faire marcher sur blogger (il faut croire que je suis nul). Heureusement pour moi, j'étais tombé sur une ligne très simple à ajouter sur le code css des liens que l'on veut faire danser qui fonctionne à merveille sur blogspot.

#imagesdansantes li a img {
    float: left;
    margin: 0 10px 0 15px;
    -webkit-transition: margin-left 0.25s linear;
}


La ligne en noir gras est celle qui permet de produire le joli effet dansant que l'on voit sur Visiting Card. Les codes de l'image doit bien-sûr être inclus dans un div portant l'identifiant css avec le -webkit-transition.

 <div id='imagesdansantes'>
                  <ul>
          <li><a href=''><img src='url de l'image'/> lien.com</a></li>
   </ul>
</div>


Pour avoir simplement les liens dansants, il suffit d'enlever le img du code css ci-haut ainsi que la balise <img scr="url image"/> du code ci-dessus.


Comme vous avez pu le constater, elle est très simple la technique pour avoir des images et des liens dansants sur Blogger.

@+

Lire la suite

1 giga d'espace de stockage des photos sur Blogger : Comment contourner cette limitation ?

 

L'article sur l'astuce pour héberger les images du modèle de son blog sur Blogger afin de bénéficier d'une bande passante illimitée avait suscité un agréable échange entre moi et Gyska du blog Narrow Street, échange qui a permis à ce dernier de me prouver d'une manière irréfutable que nous ne disposons que d'1 giga d'espace de stockage des images de nos blogs sur Blogger.

Cette limitation est due au fait que les images chargées sur Blogger sont stockées sur Picasa web albums et subissent par conséquent la limitation de 1 giga de stockage des photos imposée à chaque compte sur ce service. Comme l'affirme Gyska, il n'y a pas lieu de paniquer car lui qui utilise déjà environ 800 images (assez optimisées) est à moins de 3% d'utilisation l'espace qui lui est alloué.

Si par malheur (ou bonheur, qui sait), votre compte Picasa web album atteint la limite d'un giga alloué, il vous faut commencer à payer 5$ par ans pour bénéficier de 20 giga de stockage (si bien sûr vous tenez à ajouter des nouvelles photos sur blog).

5 $ par an,  ce n’est pas grand chose pour 20 giga me direz vous. Oui, c'est vrai. Mais, il ne faut pas oublier que la mondialisation ne s'est pas encore complètement installée dans le salon de tous les utilisateurs de Blogger. Il y en a qui auront que quoi payer cette petite facture mais seront dans l'impossibilité de le faire pour diverses raisons: pas de compte en banque, pas de carte de crédit, Paypal indisponible pour son pays, etc. Si je vous raconte le mal que j'ai eu pour ne finalement pas arriver à acheter un nom de domaine pour Café Biblique, vous n'en croirez pas vos yeux.

Donc, pour ceux qui seront dans l'impossibilité de se payer 20 giga de plus sur Picasa, il y un moyen de continuer à publier des articles avec photos sur votre blog même quand la limite de 1 giga est atteinte. L'astuce c'est d'avoir un autre compte Google auquel sera associé un autre compte Blogger (et Picasa web album par conséquent).

Il ne vous suffira plus que de créer un blog sur l'autre compte Blogger, blog sur lequel seront publiées vos autres photos. Ensuite, appliquez la technique pour réutiliser une photo déjà publiée afin d'avoir ces photos dans les nouveaux articles de votre blog principal. Facile non ?

@+

Lire la suite

Réutiliser une photo déjà publiée dans un nouvel article

 

Ce qui avait motivé Marthe à me demander comment actualiser un article pour le remettre à la une, c'était la crainte de pouvoir uploader de nouveau le tas de photos que contiennent ses articles s'il fallait créer de nouveau un post pour une mise à jour.

Je trouve pour ma part que cette crainte n'est pas justifiée car il est tout à fait possible d'utiliser les photos d'un autre article, d'un autre de vos blogs, sans pouvoir les uploader dans le nouvel article que vous voulez publier. C'est ce que je fais avec les screenshots des modèles que je publie ici. Les photos sont premièrement publiées sur Blogger mastering et il me suffit d'afficher la page de l'article où se trouve la photo, de copier celle-ci à partir de cette même page (sélectionner puis CTRL+C), d'aller dans l'éditeur de messages du blog où je vais republier cette photo et de la coller direct dans celui-ci (CTRL+V). Les possibilités d'agrandir et de diminuer la taille de l'image restent intactes comme dans le premier post où elle a été publiée.

Si vous voulez réutiliser une photo déjà publiée dans un article, faites comme moi, ne la rechargez pas de nouveau. Copiez-la à partir de l'article où elle a été premièrement publiée et collez-la dans votre nouvel article. En tout cas, ça vous évitera de consommer lentement mais plus surement le 1 giga d'espace de stockage alloué par Blogger pour les photos de votre blog.

@+

Lire la suite

Hébergez les images de votre modèle sur Blogger: Bande passante(bandwidth) illimitée

Il devient de plus en plus difficile de trouver un bon hébergeur pour ses images, un qui ne rendra pas votre compte HS pour manque de payement de facture ou après quelques mois d'inactivité comme l'a fait dernièrement photobucket pour nombreux de ses utilisateurs dont je faisais partis.

Pour ne plus être dépendant des hébergeurs externes pour l'hébergement des images qui entrent dans l'habillage de votre modèle, le mieux serait de les héberger directement sur Blogger. Pour cela, rien de plus simple.

Il suffit d'aller dans l'éditeur des messages et d'uploader vos images dans un post crée à cet effet. Cliquez ensuite sur l'aperçu puis faite un clic droit sur l'image souhaitée afin d'en récupérer le lien.

Très important, retenez ce qui va suivre :

1. Si vous faites "copier l'adresse du lien" ou quelque chose de similaire tout dépendant de votre navigateur, vous aurez le résultat suivant :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV7U6xbgzRzw6WIUifc8yVK1OFRAKvj0YBDwIDPsETfOgWf1XnoEPsitLK2Ca3EQfpEVDTerIDZ_b6ENtk522KdNTRIAjoT5M4kFE5olAhqdh8hIr496QMZBqcjtBK894jz8xMlgEd9W4/s1600-h/content-bg.png

Ce lien ne peut pas être fonctionnel si vous le mettez dans le code de votre modèle à cause de la présence du -h après s1600. Il faut donc enlever cet élément gênant afin d'avoir le lien suivant :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV7U6xbgzRzw6WIUifc8yVK1OFRAKvj0YBDwIDPsETfOgWf1XnoEPsitLK2Ca3EQfpEVDTerIDZ_b6ENtk522KdNTRIAjoT5M4kFE5olAhqdh8hIr496QMZBqcjtBK894jz8xMlgEd9W4/s1600/content-bg.png

2.Si vous faites "copier l'adresse de l'image, il y a beaucoup de chance que vous ayez le bon format du lien tel que spécifié ci-dessus. Mais, ça ne coûte rien de vérifier.

3. Si après avoir mis le lien dans votre modèle, vous constatez que l'image ne s'affiche pas selon la taille prévue, inspectez le lien pour changer un indice. En effet, parfois Blogger met un indice au lien qui fait que l'image sera toujours rendue dans une taille très petite. L'exemple d'un lien avec cet indice réduisant est :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV7U6xbgzRzw6WIUifc8yVK1OFRAKvj0YBDwIDPsETfOgWf1XnoEPsitLK2Ca3EQfpEVDTerIDZ_b6ENtk522KdNTRIAjoT5M4kFE5olAhqdh8hIr496QMZBqcjtBK894jz8xMlgEd9W4/s320/content-bg.png

Pour que l'image s'affiche normalement, changez le s320 par s1600 et ça ira.

Ceci étant dit, il faut que je trouve le temps d'héberger toutes les images de ce blog sur Blogger afin de profiter de la bande passante (bandwidth) illimitée et d'un hébergement permanent.

@+

Lire la suite

Générateur des coins arrondis pour images

Des images avec des coins arrondis sont d’une grande utilité quand on désire avoir un blog avec des bords arrondis pour l’entête, la partie centrale ou les sidebars. C’est aussi parfois beau d’avoir une image avec coins arrondis dans ses articles. Ça peut même constituer votre marque à vous de n’avoir que d’images avec coins arrondis pour illustrer vos articles, un peu comme c’est la marque de Dosh Dosh d’avoir des images des mangas pour illustrer les articles de son blog.

Pour vous mesdames et messieurs, voici un générateur des coins arrondis fournis par Roundpic.

Image:
ou URL:

Lire la suite

Créer une bannière avec menu en images cliquables grâce à GIMP

Ceci est article de Phil du blog Coccxyphil.

Salut à tous, voici un petit tuto qui vous permettra d’avoir une bannière avec un menu en images cliquables en son sein. Mise à part le temps passé pour la création de l’image, il ne faut pas s’inquiéter pour la taille du mode d’emploi : en fait, il m’a fallu beaucoup moins de temps pour mettre mon menu sur orbite que pour faire le tuto …

Avant de commencer : attention, l’image doit bien entendu être compatible avec la « largeur » du blog (ici 980px pour le blog et l’image) !! Faites donc vos réglages au préalable, sinon : problèmes …

Pour réaliser cette astuce, il est important de posséder l’éditeur d’image GIMP (vous pouvez le télécharger ici).

1/ Préparer l’image avec gimp, les calques pour les zones de textes, etc …

- Quand vous avez fini la conception de votre image, dans un premier temps enregistrez-le au format « GIMP » : voir « Enregistrer sous », au bas, développer « sélectionner le type de fichier » à choisir IMAGE GIMP XCF

Vous aurez ainsi tout loisir pour rajouter plus tard des menus sans reprendre tout à zero …

- Ensuite, la réenregistrer au format plus habituel jpg …

Cela donne, par exemple, pour ma bannière (J’ai préparé les différents titres qui deviendront plus tard mes menus de navigation…)

:

2/ Se connecter dans BLOGGER

Aller sur « Mise en page » puis « Modifier » l’en tête pour mettre l’image au format jpg dans la bannière du blog …

Pour cela, après avoir cliqué sur « modifier » pour le widget en-tête, dans la pop-up qui s’ouvre, choisir :

à Importer une image

à Substituer au titre et à la description

3/ Affichez vote blog

Vous avez maintenant une belle bannière (qui ne sert encore qu’à faire beau). Récupérez l’adresse de cette image. La noter … (par exemple, avec Firefox, faire « copier l’adresse de l’image », puis collez l’adresse dans un fichier Word, wordpad ou notepad.

L’url en question aura cette forme :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiftpNJJ29c6lNBkmy9j-LS-Zqhl2dYm6U9wip_t0IEcXhuW4oc463QfoV74SFFA0mR7MqpvOOiWnHJciAk2HZNyhSpazxqfBde4alMWiawkWOa0PcWZjo7yJhGvroedivplCGDUlcNv_Py/s1600-r/blanc.jpg

Cette adresse vous servira plus tard.

4/ Maintenant, reprendre notre image sauvegardée sous format GIMP :

Puis, aller dans les menus filtre>>web>>image cliquable

Vous verrez une nouvelle fenêtre apparaître, dans laquelle vous allez créer vos menus :

Sur la gauche, en fonction de ce que vos voulez faire, choisir zone rectangulaire, ou ronde, …

Sélectionnez votre première zone cliquable avec la souris, vous verrez une nouvelle fenêtre apparaître. Cochez « site web » (vous pouvez adapter au besoin : messagerie, …)

Mettez l’URL de la page vers laquelle sera dirigé le visiteur après avoir cliqué sur le nom du menu. Ajoutez éventuellement un texte alternatif …

Faire appliquer, valider, et recommencer de même avec toutes les zones que l’on veut rendre « cliquable » … Attention à ce qu’elles ne se chevauchent pas.

Voilà, c’est presque prêt …

Quand tout est prêt, faire « enregistrer sous » … GIMP propose d’enregistrer le plan de l’image sous le nom « nomdevotreimage.jpg.map » à remplacer par « nomdevotreimage.txt »

5/ Maintenant, ouvrir ce fichier texte …avec le bloc-notes

Chez moi, ça donne (j’ai raccourci) :

<img border="0" usemap="#map" width="980" src="MONDEVOTREIMAGE.JPG" height="300"/>

<map name="map">

<!-- #$-:Image map file created by GIMP Image Map plug-in -->

<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->

<!-- #$-:Please do not edit lines starting with "#$" -->

<!-- #$VERSION:2.3 -->

<!-- #$AUTHOR:phil -->

<area shape="rect" coords="826,61,875,83" alt="Retour à l&apos;accueil" href="http://coccxyphil.blogspot.com/"/>

ETC … ETC … 

</map>

Il faut remplacer l’adresse de l’image donnée par GIMP ci-dessus EN ROUGE par l’adresse copiée au point 3, soit l’adresse réelle de votre bannière sur votre blog :

<img border="0" usemap="#map" width="980" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiftpNJJ29c6lNBkmy9j-LS-Zqhl2dYm6U9wip_t0IEcXhuW4oc463QfoV74SFFA0mR7MqpvOOiWnHJciAk2HZNyhSpazxqfBde4alMWiawkWOa0PcWZjo7yJhGvroedivplCGDUlcNv_Py/s1600-r/blanc.jpg

" height="300"/>  

ETC … ETC … 

Tout est prêt …

Voilà pour exemple, la totalité du fichier de mappage pour notre site, à copier puis à coller dans blogger, avec la bonne adresse pour l’image :

<img border="0" usemap="#map" width="980" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiftpNJJ29c6lNBkmy9j-LS-Zqhl2dYm6U9wip_t0IEcXhuW4oc463QfoV74SFFA0mR7MqpvOOiWnHJciAk2HZNyhSpazxqfBde4alMWiawkWOa0PcWZjo7yJhGvroedivplCGDUlcNv_Py/s1600-r/blanc.jpg

" height="300"/>

<map name="map">

<!-- #$-:Image map file created by GIMP Image Map plug-in -->

<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->

<!-- #$-:Please do not edit lines starting with "#$" -->

<!-- #$VERSION:2.3 -->

<!-- #$AUTHOR:phil -->

<area shape="rect" coords="826,61,875,83" alt="Retour à l&apos;accueil" href="http://coccxyphil.blogspot.com/"/>

<area shape="rect" coords="852,105,938,135" href="http://coccxyphil.blogspot.com/search/label/N%C3%A9pal?max-results=5"/>

<area shape="rect" coords="872,158,949,190" href="http://coccxyphil.blogspot.com/search/label/Italie?max-results=5"/>

<area shape="rect" coords="818,217,928,245" href="http://coccxyphil.blogspot.com/search/label/Espagne?max-results=5"/>

<area shape="rect" coords="15,217,103,243" href="http://coccxyphil.blogspot.com/search/label/Vercors?max-results=5"/>

<area shape="rect" coords="118,220,230,242" href="http://coccxyphil.blogspot.com/search/label/Chartreuse?max-results=5"/>

<area shape="rect" coords="250,222,371,244" href="http://coccxyphil.blogspot.com/search/label/Belledonne?max-results=5"/>

<area shape="rect" coords="383,224,521,243" href="http://coccxyphil.blogspot.com/search/label/Ailleurs?max-results=5"/>

<area shape="rect" coords="539,223,607,243" href="http://coccxyphil.blogspot.com/search/label/Vid%C3%A9os?max-results=5"/>

<area shape="rect" coords="619,221,667,243" href="http://coccxyphil.blogspot.com/search/label/jeux?max-results=5"/>

<area shape="rect" coords="680,221,774,245" href="http://coccxyphil.blogspot.com/search/label/Trombino?max-results=5"/>

<area shape="rect" coords="129,257,257,285" href="http://coccxyphil.blogspot.com/search/label/Topo%20rando?max-results=5"/>

<area shape="rect" coords="285,261,427,288" href="http://coccxyphil.blogspot.com/search/label/Topo%20escalade?max-results=5"/>

<area shape="rect" coords="461,262,565,290" href="http://coccxyphil.blogspot.com/search/label/Paratruc?max-results=5"/>

<area shape="rect" coords="597,264,703,288" href="http://coccxyphil.blogspot.com/search/label/Grimpe?max-results=5"/>

<area shape="rect" coords="69,9,800,197" href="http://coccxyphil.blogspot.com/"/>

</map>

6/ Connectez-vous à nouveau sur votre compte blogger,

Allez sur « Mise en page », « modifier le code html », puis cochez la case « développer les modèles de gadgets ». Faites une sauvegarde de votre modèle complet, au cas où …

Chercher :

<div id='header-inner'>

<a expr:href='data:blog.homepageUrl' style='display: block'>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

</a>

</div>

Remplacez tout ce qui est en rouge par le code de mappage que vous venez de créer …

Enregistrez … Le tour est joué !

Allez sur votre blog : un beau menu qui marche ! Bien ça J

Ça fonctionne sur notre blog : http://coccxyphil.blogspot.com Et je viens de créer un blog test avec les mêmes images pour faire les copies d’écran, même résultat …

A+

Vous pouvez retrouver Phil sur son blog Coccxyphil, où il se fera un plaisir de répondre à vos questions et vous faire découvrir son univers pas comme les autres. Pour s’abonner à son blog, cliquez sur le lien suivant.

Lire la suite

Afficher des images plus grandes sur Blogger

Plusieurs lecteurs de ce blog m'ont déjà demandé comment faire pour afficher des images plus grandes dans leurs articles sur Blogger. Aujourd'hui, grâce à la génial méthode de Kranthi, ce désir va être assouvi.

Voici une image après un téléchargement normale sur Blogger.


Voici la même image après l'application de la méthode que nous allons voir (Notez que je n'ai pas appliqué la méthode pour ce blog, donc l'image risque d'être plus grande que mon bloc de messages) :



Etes-vous prêt à dormir moins bête aujourd'hui ? Alors, allons-y !

1.La première chose à faire, c'est de savoir la taille que vous voulez donner à vos image. Il faut que sa largeur soit un tout petit peu inférieure à celle de l'espace occupé par les messages (articles). Si par exemple, l'espace dédié aux article est de 410 pixles, il faudrait que vos images ne dépassent pas le 400 pixels.

Pour savoir l'espace alloué en largeur à vos article, connectez-vous sur votre compte Blogger, puis allez sur "Mise en page" et ensuite sur "Modifier le code HTML".

Trouvez dans votre code html la valeur de la largeur de votre bloc de message. Pour cela, voyez le code qui commence par :

#main {, soit par #main-wrapper{ soit encore par #main-wrap { (ou similaire) et voyez le nombre après le width contenue dans cet ensemble. Vous pourrez trouver par exemple :

#main-wrap1 {
width:485px;
float:left;

Si la largeur de votre colonne de message est de 485px, alors la largeur de vos photos ne devra pas dépasser 475px.

2. Trouvez le code suivant : (faites CTRL+F et mettez le bout de code dans la pop-up qui s'ouvre sur Internet Explorer ou sur la petite barre qui apparaît au coin gauche au bas de l'écran sur Mozilla Firefox)

]]></b:skin>

Ajoutez ces lignes avant le code ci-haut :


img {
max-width: 560px;
width: expression(this.width > 560 ? 560: true);
}


Changez les valeurs en rouge par le nombre réel un peu en dessous de celui de la largeur de votre bloc de messages.

Notez Bien: Vérifiez si vous n'avez pas déjà la balise img{ dans le code de votre modèle. Si tel est le cas, il faut juste ajouter le lignes suivantes juste après la balise ci-haut (en vert) :


max-width: 560px;
width: expression(this.width > 560 ? 560: true);

Enregistrez les modifications.

3. Maintenant, à chaque fois que vous écrirez un article, et que vous aurez normalement télécharger l'image dans votre article, cliquez sur "Modifier le code HTML" (juste à côté de "Rédiger" dans votre éditeur des messages. Vous trouverez le code l'image que vous avez ajoutée qui ressemble à quelque chose comme ceci :


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIiEMar7pQno9izCKABh8WhyloCTfCNqZHrJl8zhiZHJPinZWEqBiW-AEkI4LGsnUForiYIUrXXkAjq06EkjS5PvJ9B0lH-SMWuK87YyXSDxAmxTHmJ8G2rvynuvZ6Ja8ctG7CCWAPCzS/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 280px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIiEMar7pQno9izCKABh8WhyloCTfCNqZHrJl8zhiZHJPinZWEqBiW-AEkI4LGsnUForiYIUrXXkAjq06EkjS5PvJ9B0lH-SMWuK87YyXSDxAmxTHmJ8G2rvynuvZ6Ja8ctG7CCWAPCzS/s400/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>


Il voujs faudra enlever (effacer) le code en gras et remplacer le S400 (en rouge) par un S800.

Ainsi, le nouveau code ressemblera à quelque chose comme ça :


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIiEMar7pQno9izCKABh8WhyloCTfCNqZHrJl8zhiZHJPinZWEqBiW-AEkI4LGsnUForiYIUrXXkAjq06EkjS5PvJ9B0lH-SMWuK87YyXSDxAmxTHmJ8G2rvynuvZ6Ja8ctG7CCWAPCzS/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIiEMar7pQno9izCKABh8WhyloCTfCNqZHrJl8zhiZHJPinZWEqBiW-AEkI4LGsnUForiYIUrXXkAjq06EkjS5PvJ9B0lH-SMWuK87YyXSDxAmxTHmJ8G2rvynuvZ6Ja8ctG7CCWAPCzS/s800/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>


Et c'est tout ! Maintenant, votre image paraîtra plus grande dans votre article lorsqu'il sera publié.

@+

Lire la suite

Effacer les bordures des images dans un article

Roman MONGIN du blog le retour du chat noir m'avait demandé comment effacer la bordure qui apparaît autour des images qu'il met dans ses postes, vu que son fond le rend très visible.

J'avais déjà vu l'astuce quelque part mais ne m'étais pas dit que ça pourrait intéresser quelqu'un.

Au fait, ce qu'il veut, c'est afficher une image comme ceci au lieu de l'afficher comme cela paraît sur son blog.

Pour effacer les bordures des images que vous mettez dans vos articles, voici la procédure à suivre :

1. Se connecter à son compte Blogger

2. Aller sur Mise en page

3. Se rendre sur "Modifier le code Html"

4. Trouver le code suivant

.post img {
padding:4px;
border:1px solid $bordercolor;
}

5. Effacer la ligne ci-après de ce code :

border:1px solid $bordercolor;

6. Enregistrez votre modèle

Et c'est tout. c'est aussi simple que cela. L'astuce est de Blogspot Tutorial.

@+

Lire la suite

Mettre un logo à sa newsletter sur Feedburner

Si vous êtes abonnés à la newsletter de plusieurs blogs, il doit vous être déjà arrivé de constater que certains de ceux qui utilisent feedburner.com affichent leur bannière juste à côte du titre de l'article qui débarque dans votre boîte e-mail.Je crois que ça donne au blog et a son proprio l'air un peu plus professionnel.

Pour intégrer, vous aussi, votre bannière à votre newsletter, voici les étapes à suivre après avoir héberger votre logo sur un site quelconque (fileden.com par exemple):

1. Vous connecter à votre compte feedburner
2. Cliquer sur le titre du blog où vous voulez intégrer une bannière
3. Allez sur l'onglet "Publicize"
4. Sur la sidebar gauche, cliquez sur "Email subscription"
5. Sur la nouvelle page, cliquez sur "Email branding"
6. Mettez l'url de l'endroit où vous avez hébergé votre logo à la case reservée pour logo url



7. Vous pouvez en profiter pour organiser la manière dont s'affiche votre newsletter :

a. Pour "Email subject title" : mettre l'objet du message lorsqu'il débarque sur la boîte d'un abonné (genre : Newsletter du Blog de Rodney)
b. Pour Headline font" : choisir la police du titre de l'article
c. Pour "Headline size" :choisir la taille du titre de l'article
d. Pour "Body font" : choisir la police tu texte de l'article
e. Pour "Body size" : choisir la taille du texte de l'article
f. Pour "Body color" : Choisir la couleur du texte de l'article
g. Pour "Item Headline/Body Link Color" : choisir la couleur des liens (du titre et dans le texte)

Si vous n'avez pas le code pour la couleur, cliquez juste sur "Choose from palette..." et une palette de couleur apparaîtra juste en bas.

Ne pas oublier de cliquer sur "Save" pour sauvegarder vos modifications.

Voilà, maintenant vous pouvez donner à votre newsletter le visage que vous souhaitez.

@ +

Lire la suite

Des infobules pour images dans votre sidebar

Salut à tous.

Je fais ici une petite incursion rapide sur le blog de Rodney (qui est un peu débordé ces jours-ci)  pour vous proposer un tuto sur les infobulles.

Nativement, tout navigateur affiche des infobulles lors du passage du pointeur sur un lien. Généralement, en bon bloger qui se respecte, on fignole ces dit lien en indiquant le texte devant y figurer grâce aux balises "alt" et "title".

Le tuto du jour vous propose d'aller plus loin en créant un style propre d'infobulle avec un contenu enrichi, et personnalisable en tout les sens pour mieux rester dans le style de votre blog.

Tout d'abord il faut se connecter à son tableau de bord, onglet "mise en page", puis "modifier le code HTML".

Ensuite, placez le code CSS suivant juste avant la balise ]]></b:skin> :

/* Tooltip
----------------------------------------------- */

a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
}
a.tooltip:hover em {
    font: $postTitleFont;
    font-size:85%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    color: #cccccc;
    border: 3px solid #000000;
    background: #000000; transparent

moz-opacity:0.90;
opacity: 0.90;
filter:alpha(opacity=90);

 width:170px;
}
a.tooltip:hover em span {
  position: absolute;
   top: -7px;
    left: -2px;
    height: 9px;
    width: 180px;
    background: transparent url(url de Votre image);
    margin:0;
    padding: 0;
    border: 0;
}

Remplacez le "url votre image" par une image de votre choix ou laissez le champ vide.

Cette image sert selon les cas à créer un effet vignette de BD ou tout autre effet de style.

Il suffit de jouer avec les marges pour l'ajuster.

En bleu, c'est le code pour ajuster la transparence de la bulle; le 90 signifie 90% d'opacité,

Mais réglez-le à votre guise. Attention toutefois à ajuster les 3 valeurs pour que tout s'affiche correctement sous divers navigateurs!

Enregistrez votre modèle et passons à la seconde étape. 

Deuxième étape:

Aller dans l'onglet "Éléments de page" et sélectionnez "ajouter un gadget", puis "HTML/JavaScript".

Insérez le code suivant:

<a href="URL du lien" class="tooltip"><img alt="Nom du lien" src="URL de l'image du lien"/><em>

<span></span>Texte</em></a>

Placez vos éléments au bon endroit, pensez à régler la taille de votre image, enregistrez.

Cette infobulle permet d'afficher un court texte pour présenter son lien.

On peut aussi afficher une image à la place du texte grâce à cet autre code:

<a href="URL du lien" target="blank" class="toolptip"><img alt="Nom du lien" src="url de l'image du lien"/><em><span></span>

<img width="190" src="url image infobulle" height="150"/>

</em></a>

Voilà, maintenant vous savez comment créer des infobulles personnalisées et avec un contenu enrichi.

Si vous avez des questions ou un problème, n'hésitez-pas, laissez un commentaire!

Mister aiR,

blogmaster des blogs OroO/Oro'o et Le Canrd qui Croque!

Lire la suite

Des photos gratuites pour illustrer vos articles

Pour tout savoir sur Ebay, visitez Ebay mania : enchère

Je ne sais pas ce qu'il en est pour vous, mais, moi j'ai toujours voulu illustrer chacun de mes articles avec une photo représentative du sujet abordé dans chacun d'eux.

La difficulté qu'on rencontre, c'est que nous ne sommes pas tous photographes, et s'il fallait soi-même prendre les photos pour illustrer nos articles, beaucoup des blogs auront l'air terne.

Heureusement que beaucoup des sites proposent des milliers photos à utiliser gratuitement sur nos blog. Je suis tombé sur une liste concoctée par Lorelle on Worpress, regroupant une pléthore des sites à images gratuites. Je vous livre la liste est espère qu'elle va vous plaire.

Photos et images à caractère général

• Aarin Free Photo
• Getty Images - Royalty Free Images
• Cromavista
• Image Base
• Free Stock Photos
• Image Blowout
• Majestic Imagery
• Orangetrash
• PDPhoto
• PIX
• Creative Commons Image Search
• DeviantArt
• Stock Exchange
• tOfz
• AboutPixel
• A Digital Dreamer
• Afflict
• Bajstock
• Barry’s Free Photos
• Big Foto
• Big Stock Photo
• Buzz Net
• Cepolina
• Demny Onink
• Design Packs Photos
• Flickr
• Fontplay Free Photos
• Fotodatebank
• Fotogenica
• Fotolia
• Free Digital Photos Net
• Free Foto
• Free Images UK
• Free Images
• Free Media Goo
• Free Photographs Net
• FreePhotos.com
• Free Photo Station
• Freewebpics
• Geek Philosopher
• Image After
• ImageTemple
• iStockphoto
• Lightmatter
• Litetek
• LogoDesignweb
• Mayang
• Morgue File
• NWYH Stock Images
• Open Photo
• Our Media
• PhotoCase
• Picture Station
• Piotrpix
• Pixelbag
• Pixel Perfect Digital
• Pixelquelle
• The Photo Repository
• Stock Vault
• Stock.Xchng
• Triparalbum
• Truly Free Stock
• Twice Pix
• Unprofound
• Woophy
• YotoPhoto

Photos sur la Nature et la Science

• Gimp-Savvy - Images from NASA, NOAA, and US FWS
• Insect Images
• NASA Images
• US Fish and Wildlife Photos: FWS2 and/or FWS1
• US National Park Service Royalty Free Photographs
• Earth from Space
• NOAA Photographs and Images
• USDA Images

Patterns, Texture, and Art Design Photographs

• Amazing Textures
• Four Bees
• Mandragora
• Creativity 103
• ArtFavor
• Texture Warehouse

Lire la suite

Mettre un lien dans une image

Dans la liste des voeux, Manu avait laissé la question suivante :

Salut Rodney,

J'aimerai savoir si il y a un moyen de mettre un lien sur une image lorsque l'on rédige un nouveau message dans blogger.

Merci d'avance l'ami

Ma réponse est :

@ Manu : Après avoir mis l'image dans le message, pendant que tu est encore dans la page d'édition du message, tu clique sur l'onglet "modifier le code html" et tu cherche un code du genre :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOxG5yq7Ky-4142qAfg4Ze-JGXKesJosx7Robvf8HHm5UweEnqUJo9xU1QcYxAuZACu142paX6X61y3jRYIqlR0relFhFJ1JPlCPXHCedLh7k5mMwK3ljjWxYJfOS6hnX8GnUdbm-R7zk/s1600-h/6012.jpg"><img style="margin: 0px auto 10px; cursor: pointer; width: 140px; height: 213px; display: inline;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOxG5yq7Ky-4142qAfg4Ze-JGXKesJosx7Robvf8HHm5UweEnqUJo9xU1QcYxAuZACu142paX6X61y3jRYIqlR0relFhFJ1JPlCPXHCedLh7k5mMwK3ljjWxYJfOS6hnX8GnUdbm-R7zk/s320/6012.jpg" alt="" id="BLOGGER_PHOTO_ID_5245939815491659602" border="0" /></a>

Tu efface le contenu après <a jusqu'à ><img (voir la partie en gras).

A la place, tu met href="lien que tu veux", ce qui donnera :

<a href="lien que tu veux" ><img style="margin: 0px auto 10px; cursor: pointer; width: 140px; height: 213px; display: inline;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOxG5yq7Ky-4142qAfg4Ze-JGXKesJosx7Robvf8HHm5UweEnqUJo9xU1QcYxAuZACu142paX6X61y3jRYIqlR0relFhFJ1JPlCPXHCedLh7k5mMwK3ljjWxYJfOS6hnX8GnUdbm-R7zk/s320/6012.jpg" alt="" id="BLOGGER_PHOTO_ID_5245939815491659602" border="0" /></a>

Tu remplace lien que tu veux par l'url à laquelle tu veux renvoyer. Ainsi, ton image sera cliquable et conduira au lien que tu aura mis.

A+

Lire la suite

Illustrer un widget avec une image

 Une image jointe à un widget, n’importe lequel, le rend plus attrayant, plus visible pour les lecteurs.

Vous aurez remarqué que sur la nouvelle page d’accueil de ce blog se trouvent différentes sortes de widgets que j’ai illustré avec des images.  Ainsi en est-il du widget Flux ci-haut auquel j'ai ajouté une image décalée vers la gauche. C’est un exercice très facile à exécuter.





1. Avoir le code avec l’url de votre image



La première chose à faire, c’est d’héberger votre image sur un site (Photobucket ou Google Pagecreator) puis récupérer le lien vers l’image que vous collerez dans la balise de code suivante (à l’endroit indiqué).



<img src=" URL DE L’IMAGE " border="0px" />



Il faut noter que la largeur de votre image ne doit pas dépasser celle de la colonne dans laquelle se trouvera le widget. Si par exemple, votre colonne latérale ne dépasse pas 200 pixels de largeur, ne mettez une image de plus de 200 pixels. C’est toujours mieux de mettre une image ayant un pixels inférieur. Je vous conseillerais d’utiliser des images de 80x81 pixels.



Si vous avez une image que vous n’arrivez pas à redimensionner, ajoutez les valeurs width et height au code ci-haut



<img src=" URL DE L’IMAGE " border="0px" widht= "80" height="81" />



Vous pouvez orienter l’image, pour qu’elle soit au centre, à gauche ou à droite.



Pour centrer l’image, utiliser ce code :



<center><img src=" URL DE L’IMAGE " border="0px" /><center>



Exemple : Voir notre widget Récente publications à la page d'accueil (Un widget blog, où s'affichent les messages, proposé par Blogger) et Pour les débutants (un widget Linkliste (liste des liens) fournis par Blogger).



Aligner vers la gauche :



<img style= "float :left ; " src=" URL DE L’IMAGE " border="0px" widht= "80" height="81" />





Exemple : Voir notre Widget Astuces Blogger à la page d'accueil (un widget Flux offert par Blogger).



Aligner vers la droite



<img style= "float :right ; " src=" URL DE L’IMAGE " border="0px" widht= "80" height="81" />





2. Insérer l'image dans le widget



A. Aller sur la Mise en page de votre blog, puis sur modifier le code html. Là cocher sur "Développer des Modèles de gadget"



B. Trouvez le widget dans lequel vous voulez insérer l'image et mettez le code de celle-ci (voir étape 1) juste après la balise <div class='widget-content'> (Voir exemple ci-après )





<b:widget id='Feedjit' locked='false' title='Live Traffic' type='HTML'>

    <b:includable id='main'>

        <b:if cond='data:title'>

            <h2><data:title/></h2>

        </b:if>

        <div class='widget-content'>

<center><img src=" URL DE L’IMAGE " border="0px" /><center>

            CONTENU DU WIDGET

        </div>

    </b:includable>

</b:widget>



Si la balise <b:if cond='data:title'><h2><data:title/></h2></b:if> se trouve après celle <div class='widget-content'>, mettre le code de l'image après cette première.





<b:widget id='LinkList3' locked='false' title='Nom du widget ' type='LinkList'>

<b:includable id='main'>

 <div class='widget-content'>

<center><img src=" URL DE L’IMAGE " border="0px" /><center>

    <b:if cond='data:title'><h2><data:title/></h2></b:if>

   <ul>

     <b:loop values='data:links' var='link'>

       CONTENU DU WIDGET

     </b:loop>

   </ul>

    </div>

</b:includable>

</b:widget>





Enregistrez votre modèle puis allez apprécier le résultat.



Si vous avez bien suivi les instructions, tout se passera bien.



A+





Vous pouvez voter pour cet article sur : Scoopeo !TapemoiBlogastyWikioDiggons



Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.

Lire la suite