Nouvelle Template et Nouveau look pour LeBlogger.com

J'ai enfin terminé le nouveau template pour LeBlogger.com et j'espère que vous apprécierez ce nouveau look.
Je suis assez satisfait du résultat, un peu étroit mais avec un meilleur "jeux de bordure" et un meilleur choix de couleur, les différentes sections vont êtres plus "distinctes".
Il y a trop de couleurs et trop d'orange, vous ne trouvez pas ??? N'hésitez pas à donner votre avis en commentaire, cela me serait très utile.

Sachez que le nouveau blog est plus léger que l'ancien: moins de widgets, moins de JavaScript, pas de jQuery ni de mootools (le code HTML actuel fait 40ko contre 90ko pour l'ancien thème).
Le CSS est validé sans erreur mais il y a encore quelques petites améliorations pour le HTML.
Le blog s'affiche à peu près pareil dans tous les navigateurs.
Un nouveau Header
J'ai devisé le "Header" en deux parties avec à gauche des gros liens bien visibles (avec les icônes en plus) et le moteur de recherche; à droite la bannière que je n'ai pas eu le temps de créer (j'ai découpé l'ancienne...).
LeBlogger.com
Le nouveau moteur de recherche en Ajax par google
Une merveille ! Rien a voir avec l'ancien moteur de recherche. Mais il m'a fallu pas mal de temps avant d'avoir ce résultat (presque compatible avec tous les navigateurs, même Internet Explorer). Je suis vraiment très content de cette trouvaille.
LeBlogger.com
Le message de bienvenu
En plus de la partie abonnement RSS, j'ai ajouté un lien Twitter et quelques lignes de présentation avec notamment le compteur des commentaires et une photo. Tout ça pour vous souhaitez la bienvenu !
LeBlogger.com
Une barre centrale / Les articles
La barre centrale des messages fait exactement 610px ce qui est très confortable pour la lecture mais aussi pour l'insertion images.
J'ai re-personnaliser toutes les classes de cette partie : Titre, sous-titre, images, liste, citation, lien, codes, tableau, bordure, etc.
Une barre latérale repensée
Dans la barre latérale j'ai créé 3 sections: 350px, 220px et 125px ça manque un peu d'espace mais je vais arranger ça.
Une nouvelle section: le bas de page
J'ai créé trois sections exactement comme pour la barre latérale avec des tailles de 350px, 350px et 200px. C'est une partie du blog qu'il ne faut pas négliger et je vais y consacrer plus de temps.
Le coin Partager
Cette partie m'a pris beaucoup de temps, mais je suis très satisfait du résultat : sobre et design. J'espère que vous vous en servirez pour Tweeter et Facebooker cet article par exemple.
LeBlogger.com
Twitter
Twitter jouera désormais un rôle très important dans la gestion de ce blog, avec le widget "Live Twitter" tout ce que je fais dans Twitter sera visible sur la page d'accueil de LeBlogger.com, génial non !!!
Et avec les liens que j'ai mis un peu partout, j'espère avoir plus de Followers: @LeBlogger.
Ce widget me servira pour afficher les articles récents, les commentaires récents et les réponses au commentaires. "Live Twitter" sera également un moyen pour communiquer en Live avec vous (comme par exemple pendant la dernière panne de Blogger).
LeBlogger.com
Les Commentaires
LeBlogger.comDans ce domaines j'ai pas fait grande chose. Je voulais replacer les avatars à droite, numéroter les commentaires, etc. Mais je me suis contenté pour l'instant de re-personnaliser les commentaires du proprio du blog ( moi !!!) et d'ajouter un joli compteur de commentaires. C'est vraiment pas simple à faire, il faut jongler avec le CSS pour que les chiffres soit exactement au bon endroit dans l'image.
LinkWithin revient !
Depuis plusieurs semaines j'utilisais le widget de Aneesh pour afficher les articles similaires mais avec les 610px de la barre centrale je peux utiliser LinkWithin et afficher confortablement 5 images...
LeBlogger.com
J'écrirais des tutoriels détaillés pour chaque astuce dans les prochains jours.

Alors qu'en pensez vous ? N'oubliez pas de Tweeter la News....
42 Commentaires
  1. WOW IL EST TROP FORT CE NOUEAU DESIGN FELICITATION SOFIANE

    RépondreSupprimer
  2. 10/10 le design est plus organiser est légère . Felicitation

    RépondreSupprimer
  3. @Cemination
    Merci, c'est trop sympa ....

    RépondreSupprimer
  4. LEblogger

    Stp Aide moi !!
    Jai un beug de script ! Mais Sous !! IE !!
    :( Aide moi Je te donne le mot de passe

    MErci crazyworld-y@hotmail.com

    S---T---P

    RépondreSupprimer
  5. Oui super, on s'attend toujours à des reprises énormes, là tu fais dans le simple et le rapide à l'affichage, bravo.

    J'en profite pour te demander ton aide car je séche.
    Voici mon site: sciencextra.com

    Le header est composé comme tu le vois par l'affichage d'une image en multiple afin de remplir le header de SCIencextrA.

    Voici le code ou il est inséré:

    #header-wrapper {
    width:1020px;
    margin:0 auto 10px;
    border: solid #ffffff;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    background: url( http://www.divshare.com/img/7563126-7e9);
    }

    Je voudrais le remplacer par un script de pub Comclick mais je n'y arrive pas, serais-ce un challenge que tu peut relever?
    Bien à toi.

    RépondreSupprimer
  6. jai oublié de donné mon site www.worldfreaks.tk ^^

    RépondreSupprimer
  7. C'est plus aéré et il y a moins d'orange, c'est vrai (tu dois avoir du sang hollandais dans les veines ;)
    J'essayerais de mettre encore un peu plus d'unité, mais ce n'est que mon avis!
    Bravo en tout cas car je sais le boulot que ça donne!

    RépondreSupprimer
  8. @Yacine
    C'est quoi le problème au juste ??? de quel script tu parles???

    RépondreSupprimer
  9. @Panzer
    Suffit de créer un widget dans la sidebar avec le code de la pub et de le déplacer en dessous du header, ensuite tu enlèves l'image du header header!!!

    RépondreSupprimer
  10. @Attention à la Terre
    Merci .... C'est Blogger qui as du sans hollandais ...
    Mais comme tu le vois maintenant, il ne reste presque plus d'orange ....

    RépondreSupprimer
  11. Bonjour,
    Votre blog a gagné en sobriété.
    Il a toujours été très lisible mais là il est parfait ....

    RépondreSupprimer
  12. @Francine
    Marci Francine, c'est sympa :((

    RépondreSupprimer
  13. waiiiiii, C'est plusssss mieux avec le pointeur qui pointe... Cool ;)

    En regardant d'un peu plus près, j'ai vu que tu avais un souci avec les liens dans le cadre de ta présentation... Juste une faute de frappe... "_blank" pour la fenêtre cible...

    Ils sont marrant tes nouveaux locataires... :)) ;)) ;;) :D ;) :p :(( :) :( =(( =))

    RépondreSupprimer
  14. Sorry du dérangement, je constate que tu as corrigé... :))

    RépondreSupprimer
  15. @NicTeam
    Merci pour le commentaire, c'est vraiment coooooool ;;)

    Ils sont bon ces smiley :(( mais je les ai enlevé parce que j'avais de gros problèmes de bande passante (Les autres Smiley sont hébergés par Yahoo)...

    Depuis hier je cherche un moyen pour redimensionné des images animés (*.gif) mais je ne trouve pas :( j'ai essayé plusieurs sites et installé 3 logiciels.... tu n'aurais pas une idée pour ça :)

    RépondreSupprimer
  16. @Soufiane...

    A ma connaissance, il n'y a pas de service spécialisé sur le net pour redimensionner les gifs animés... Il faut le faire sois-même avec photoshop ou un logiciel de traitement d'images similaires qui utilise les calques... Je vais me renseigner...

    RépondreSupprimer
  17. @NicTeam
    Photoshop ne gère pas directement les images animé gif ;)

    RépondreSupprimer
  18. @soufiane

    On sait redimensionner les gifs animés avec photoshop... Je l'ai déjà fait avec une veille version (V6)... J'ai actuellement la CS3 et je n'ai jamais trouvé le moyen de le faire... Mais je sais que c'est possible...

    Une alternative a laquelle je viens de pensé...
    Tu ne redimensionne pas les gifs...
    Tu "balises" les images [img id="XXX" scr="XXX"]
    Tu leur attribues des propriétés de dimensions dans les css...
    #XXX { width: Xpx; height: Xpx }

    Normalement, en utilisant cette méthodes ils resteront animé...

    RépondreSupprimer
  19. @NicTeam
    Oui j'ai pensé a les redimensionnés avec du CSS mais le but est de diminué le poids de l'image...
    J'ai essayé GifResizer ça marche bien, mais les images redimensionnées sont presque en noir et blan =((

    RépondreSupprimer
  20. @Soufiane

    Précision avec photoshop 6...
    Avant de réenregistrer, il faut reparamètrer la vitesse de défilement des images et mettre le défilement en boucle... (dans Enregistrer pour le net)

    RépondreSupprimer
  21. Je télécharge et je teste gifresizer...

    RépondreSupprimer
  22. @NicTeam
    J'avais le CS4 avec Photoshop Extended, mais je l'ai plus: formatage ....

    GifResizer marche bien mais les images redimensionnées sont de très mauvaise qualité...

    RépondreSupprimer
  23. @Soufiane...

    Je constate, c'est pas l'outil idéal... Le CS3 que j'ai "applati" le gif... Donc, je peux même pas te les redimensionner directement...
    Il y a Gimp, mais je ne sais pas ce que ça vaut...

    RépondreSupprimer
  24. Merci Nicolas, j'essaierais peut être Gimp (pareil que PS et très lourd :D)

    Même Blogger n'affiche pas les images animés...

    RépondreSupprimer
  25. Va sur 01Net.
    Ils ont une bonne petite série de logiciels. Tu tapes "gif" dans la recherche. Il y a dans la liste "Advanced gif optimizer"... J'ai pas essayé, mais d'après la description ça ressemble à se qu'on recherche

    Blogger ne les affiche pas ? C'est bizarre... Via Picassa ça s'affiche...

    Tu as changé quelques choses dans les paramètres de commentaires ? Je ne sais plus faire de copié/collé, ni déplacer le curseur avec les flèches du clavier ?

    RépondreSupprimer
  26. D'accord je vais essayer ces logiciels, merci ...

    Blogger "aplatit" les images, il faut les hébergés ailleurs...

    Pour le curseur, j'ai eu ce problème hier mais là rien ;) je vais essayé de réparé ça plus tard :D

    RépondreSupprimer
  27. Bizarre... bizarre... Tant qu'on sais écrire, c'est pas encore trop grave... lollll

    Picassa n'applatit pas...

    Je viens de penser à un truc... (je pense beaucoup aujourd'hui lollll)... C'est peut-être stupide, mais ça vaut peut-être le coup d'essayer... Le lien que tu as mis dans ton article sur les favicons... Je sais plus comment ça s'appelle... C'est juste la dimension qu'il faudrait...

    RépondreSupprimer
  28. Tu parles de htmlkit.com, oui j'avais déjà essayé merci

    RépondreSupprimer
  29. http://reduction-image.com/gif-anime/index.php

    RépondreSupprimer
  30. Voilà, c'est testé... et hebergé sur picassa...

    Original --> http://lh6.ggpht.com/_oRgYjgpt3wE/SvmZiY3HkTI/AAAAAAAAF1E/H2wBjI4_CD4/%21haha%21.gif

    Redimensionné --> http://lh4.ggpht.com/_oRgYjgpt3wE/Svmlg2KjdDI/AAAAAAAAF1M/ZwOsVavfXt8/2020.gif

    Quoique, j'ai l'impression que le redimensionné est beaucoup plus rapide...

    RépondreSupprimer
  31. Ok j'essaierais d'héberger mes photos dans picasa =))
    Mais biensûr la bande passante est limité, normalement je les hébergeais dans Photobucket, mais j'ai dépassé les 10 GB de bande passante dans mes 2 comptes =((

    RépondreSupprimer
  32. Mwouai... C'est vrai que c'est pas le pied au niveau quantité de stockage...
    Ce que je fais, avant de les mettre en ligne, c'est de les allèger au maximum à la limite de la dégradation visuelle... Je gagne a peu près entre 40 et 50%... Ce qui n'est pas négligeable... Sauf si on veut du top qualité... :))

    Bon ben c'est pas tout ça... j'vais m'préparer à manger... J'ai faim... :))
    Bonne soirée à toi... ;)

    RépondreSupprimer
  33. Merci Nicolas,
    Tiens regard les Onions http://www.leblogger.com/2009/11/onion-smiley-image.html :)) :)) :))

    RépondreSupprimer
  34. coucou...ça déhire ce nouveau template...moi, je trouve très sympa et joli!!!
    15 jours sans connection et quand je reviens, c'est plEin de changements...on dirait Noël...lol

    RépondreSupprimer
  35. Ninie
    Merci ;;)
    15 jours sans connection ;)
    merci

    RépondreSupprimer
  36. Excellent ton Nouveau Design, Félicitations et Bonne Continuation à toi Soufiane, ton Blog c'est de l'Or sur le Web.

    RépondreSupprimer
  37. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  38. Bonjour,
    Bravo pour ton blog instructif. J'aimerais connaitre la procédure pour modifier la partie HEADER comme la votre. Merci et bonne continuation.

    RépondreSupprimer

Copyright 2015 Soufiane.fr