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.
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.
J'ai re-personnaliser toutes les classes de cette partie : Titre, sous-titre, images, liste, citation, lien, codes, tableau, bordure, etc.
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).
Dans 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.
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....
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...).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.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 !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.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).
Les Commentaires
Dans 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...Alors qu'en pensez vous ? N'oubliez pas de Tweeter la News....
WOW IL EST TROP FORT CE NOUEAU DESIGN FELICITATION SOFIANE
10/10 le design est plus organiser est légère . Felicitation
@Marty
Merci...
C'est ces Maj !!!!
@Cemination
Merci, c'est trop sympa ....
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
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.
jai oublié de donné mon site www.worldfreaks.tk ^^
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!
@Yacine
C'est quoi le problème au juste ??? de quel script tu parles???
@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!!!
@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 ....
Bonjour,
Votre blog a gagné en sobriété.
Il a toujours été très lisible mais là il est parfait ....
@Francine
Marci Francine, c'est sympa :((
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 :(( :) :( =(( =))
Sorry du dérangement, je constate que tu as corrigé... :))
@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 :)
@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...
@NicTeam
Photoshop ne gère pas directement les images animé gif ;)
@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é...
@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 =((
@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)
Je télécharge et je teste gifresizer...
@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é...
@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...
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...
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 ?
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
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...
N'essaie pas... ça marche pas...
Tu parles de htmlkit.com, oui j'avais déjà essayé merci
http://reduction-image.com/gif-anime/index.php
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...
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 =((
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... ;)
Merci Nicolas,
Tiens regard les Onions http://www.leblogger.com/2009/11/onion-smiley-image.html :)) :)) :))
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
Ninie
Merci ;;)
15 jours sans connection ;)
merci
Excellent ton Nouveau Design, Félicitations et Bonne Continuation à toi Soufiane, ton Blog c'est de l'Or sur le Web.
Merci Akram
Bonjour,
Bravo pour ton blog instructif. J'aimerais connaitre la procédure pour modifier la partie HEADER comme la votre. Merci et bonne continuation.
love your site