Bouge ton blog !

Vous pouvez mettre dans vos notes des vidéos provenant de DailyMotion.

Si votre blog est sur blogSpirit.com alors la procédure est simple. DailyMotion a intégré blogSpirit dans la liste des plateformes de blogs depuis laquelle vous pouvez publiez vos vidéos sur votre blog :
- Identifiez-vous sur Dailymotion ou créez un compte
- Dans la rubrique Mon compte, cliquez sur Blogs
- Cliquez sur l'option Ajoutez un blog et sélectionnez blogSpirit
- Choisissez le blog (s'il y en a plusieurs) sur lequel vous souhaitez publier vos vidéos
- Publiez !

Si vous êtes sur HautEtFort.com, suivez les trois premières étapes précédentes.
- Sélectionnez dans la liste l'API Metaweblog.
- Entrez dans l'URL de l'API cette adresse : http://api.hautetfort.com/xmlrpc/weblog.php
- Entrez les autres données. Et choisissez votre blog.
- Vous pouvez maintenant publiez des vidéos directement sur votre blog.

Envie de colorer votre calendrier ?

Voici ce que technoblog vous propose :

- Coloration alternée des cases
- Mise en évidence du jour "Aujourd'hui"

Il vous faudra d'abord restaurer votre modèle de calendrier (le code HTML est désormais différent) dans l'onglet Présentation puis éditer votre feuille de style.

Repérer les lignes concernant la boîte calendrier :
TABLE.calendar
Puis sous la dernière ligne concernant le calendrier :
TD.day

Insérez un code de ce type :
TD.even {
background-color: #e8eeee;
}

TD.odd {
background-color: #fff;
}

TD.today, TD.today a, TD.today a:hover {
background-color: #000;
color: #fff;
}

NB : Le design de ce calendrier convient pour un design sur fond blanc. Pour d'autres types de fonds et jeux de couleurs, il vous faudra éditer les codes couleurs #fff (blanc), #e8eeee (gris) et #000 (noir) et les accorder avec votre charte.

Pour aller plus loin :

TABLE.calendar apermet de charter les liens du calendrier sur les jours

TH.day-of-weekpermet de charter la ligne jour de la semaine

Peut-être la connaissez-vous déjà ? Sinon, cliquez à toute vistesse sur Blogbar et ajoutez ça dans une boîte libre de votre blog.

La Blogbar permetait de rechercher une info sur le web directement sur votre blog, et ce parmi les principaux moteurs de recherche du Web (Google, Yahoo, MSN, Exalead) et les moteurs de recherche de blogs (Technorati, BlogPulse, etc...).

La V3 permet maintenant de chercher sur le web ou sur votre blog ! La Blogbar est donc passée de gadget fournisseur de visibilité pour d'autres à un véritable service pour le bloggueur. C'est donc tout naturellement, LE bloc libre à intégrer dans son blog. On peut remarquer que l'intégration sur blogSpirit se fait sans efforts et c'est bien normal puisque les concepteurs de la Blogbar bloguent sur blogspirit (Voir l'annonce de la V3).

Toujours dans la catégorie "Personnaliser son blog", je vous propose maintenant - non pas une nouvelle astuce à intégrer facilement dans votre blog - mais un véritable moyen de connaître les différents éléments qui constituent sa charte graphique.

Voici donc la carte de styles d'un blog de technologie blogSpirit. Il est tout frais et vous permet :

• De connaître les différentes boîtes qui constituent la mise en page globale de votre blog : les colonnes, la bannière, le centre et le container : il s'agit des encadrés.
• De connaître les différents styles qui définissent le style de vos textes et liens. il suffit de cliquer sur un élément textuel pour connaître la ou les classes auxquelles il est rataché.

J'ai vu que des blogs comme celui de Gwenaelle ont un fait un boulot remarquable avec la feuille de style (Il y en a d'autres), j'espère que cette astuce inspirera d'autres graphistes en herbes...

Légende :
La feuille de style de votre blog utilise le modèle des boîtes, voici les principales que vous devez connaître pour personnaliser l'affichage de votre blog.

box : #container, La boîte principale qui contient tout les éléments.

box : #left, #right, #banner, #center : Les 4 boîtes principales pour editer la mise en page globale du blog

box : .sidebar, .content : Styles utilisés pour définir les styles par défaut pour chaque boîte (marges, taille de police, etc...)

box : table.calendar : style propre au calendrier (modèle des tables)

Ce blog statique servira donc de référence pour les différentes astuces abordées ici et sera bien entendu LE support idéal pour personnaliser la feuille de style de votre blog.
Bonne chance !

Voici la première note d'une série d'astuces visant à mieux personnaliser et charter son blog.

Nous allons voir comment "redesigner" ses blocs de colonnes :

Il s'agit d'un exemple simple, qui ne nécessite aucune image de fond, il faut au préalable choisir 3 couleurs qui définiront la charte de son blog. Vous pouvez choisir par défaut les 3 couleurs qui sont assignés à votre modèle de présentation (couleur de la banière, couleur de la colonne, titre, liens etc...) avant de vous lancer dans une vrai création de charte

2 couleurs doivent être dans la même teinte, elles sont utilisées pour les couleurs de fond du titre (#006666 : couleur 1) et du contenu (#009999; : couleur 2). La 3ème couleur doit être choisie comme contraste des 2 premières (#ffffcc : couleur 3)

Voici le code à insérer dans votre feuille de style (Présentation -> configuration avancée) à remplacer par les styles correspondants ou à placer en fin de fichier :


.sidebar h2 {
font-size: 70%;
font-weight: bold;
margin: 0px;
margin-bottom: -2px;
padding: 4px 7px 6px 7px;
background-color: #006666;
color: #ffffcc;
border: 1px solid #006666;
border-bottom: 0px;
}

.sidebar ul {
padding: 5px;
margin: 0px 0px 30px 0px;
background-color: #009999;
color: #FFFFcc;
border: 1px solid #006666;
border-top: 0px;
}

.sidebar li {
margin: 0px 0px 0px 0px;
padding: 2px;
list-style-type: none;
font-size: 65%;
line-height: 150%;
}

.sidebar li.description {
padding: 2px;
text-align: left;
margin: 0px 0px 0px 0px;
font-style: italic;
}

.sidebar li.album {
text-align: center;
}

.sidebar img {
padding: 2px;
border: 1px solid #333;
background: #FFF;
}

.sidebar li.link img {
border: 0px;
padding: 0px;
margin: 0px;
vertical-align: -4px;
}

.sidebar a:link, TABLE.calendar a:link, .sidebar a:visited, TABLE.calendar a:visited {
text-decoration: none;
color: #FFFFcc;
}

.sidebar a:hover, TABLE.calendar a:hover, .sidebar a:active, TABLE.calendar a:active {
text-decoration: underline;
color: #FFFFcc;
}


L'essentiel de la personnalisation se trouve dans les styles .sidebar h2 et .sidebar ul.
Le "padding" vous permet de gérer la marge du texte avec le bord des blocs en pixels.
Le "font-weight" permet de définir des caractères gras avec l'attribut "bold".
Le "border: 1px solid #006666;" permet de définir la largeur des bordure, le style du tracé puis la couleur.

Le calendrier est géré par d'autres styles qu'il faut mettre en conformité avec la charte adoptée :




TABLE.calendar {
background-color: #009999;
color: #FFFFff;
border: 1px solid #006666;
border-top: 0px;
}

TABLE.calendar th {
color: #FFFFcc;
}


A noter qu'il est également possible de réaliser ce type de charte avec 2 couleurs, dans ce cas, il faut privilégier le choix de 2 couleurs contrastes : la première est utilisée pour les bordures et les textes / liens, la seconde pour le fond.

J'ai remarqué que plusieurs blogs affichaient des modules de sondages dans leurs colonnes (ici ou ici). Cette idée de bloc libre semble être très appréciée et le service semble assez bien fait.

Un hic tout de même au niveau de la feuille de style, puisqu'il semble y avoir une surcharge de la part de blogpoll sur des styles des blogs de technologie blogSpirit. Le principal effet est de rendre la colonne centrale du blog bleu, verte ou marron suivant la couleur choisie pour le modèle du sondage.

Voici une solution pour réparer le problème à intégrer dans la feuille de style de son blog :

#center .content {
background: transparent;
}

C'est quand même bien dommage de fournir un service aussi interessant que blogpoll et de le rendre peu compatible au niveau de la feuille de style. Certains noms de styles comme .content, .footer ou .header sont des classiques car utilisés très régulièrement dans les CSS. Le .content est utilisé pour la colonne centrale du blog et blogpoll applique la règle css suivante :

background: #DDEEDD;

D'ou le conflit avec les effets expliqués ci-dessus... La solution est pourtant simple pour blogpoll, il suffirait de mettre un id type "blogpoll-service" et de rendre relatif tous les styles nécessaires à l'affichage du sondage...
Il y a des leçons de CSS qui se perdent...

3 bonnes raisons de passer à un mode 1 colonne :

• Pour mettre en avant le contenu de son blog
• Pour disposer de plus de place pour la colonne centrale
• Comme pour chaque astuces de technoblog : personnaliser son blog

Votre choix est fait ? Voici comment faire :

Tout d'abord, cette modification est applicable uniquement avec les designs 1 et 2 pour un rendu visuel conforme :

Prenons l'exemple de la suppression de la colonne de droite :

1. Dans Présentation -> Configuration Avancée, éditez votre Feuille de styles.
Editez le style #right {} en ajoutant display: none; à la fin :

#right {
...
display: none;
}

Editez le style #center { } en modifiant le paramètre 'width:'. Remplacez 'width: 409px;' par 'width: 589px;'

#center {
...
width: 589px;
}

2. Dans la partie 'Présentation' -> Contenus des colonnes, transférez tous vos blocs de la partie droite vers la partie gauche dans l'ordre souhaité.
Il est possible qu'à l'avenir, certains éléments comme les albums photos s'affichent par défaut dans la colonne de droite. Il vous faudra alors transférer ce bloc vers la colonne de gauche pour le voir s'afficher.

Pour afficher seulement la colonne de droite, revenez à une configuration de base à 2 colonnes puis procédez de la même manière mais en appliquant 'display: none;' au style '#left { }' et en transférant tous les éléments de la gauche vers la droite.

Enfin, pour les plus acharnés, pour obtenir un blog sans colonnes : appliquer le 'display: none;' au 2 styles '#left{ }' et '#right{ }' puis applique une largeur de 769px 'width: 769px;' à votre colonne centrale '#center { }'

Voici un photoblog où vous trouverez tous les blogs relookés via l'édition de la feuille de style. On y trouve aussi bien des blogs anglophones, allemands, chinois et français sur blogSpirit ou HautetFort. Bravo à tous, certains designs sont dignes de modèles professionnels. Cela prouve en tout cas qu'avec quelques connaissances en CSS, on peut personnaliser son blog très facilement...
Si vous connaissez un blog relooké (le votre ?), n'hésitez pas à m'en faire part sur cette note, je l'intègrerai volontier à cette collection.

Comme philippe l'a annoncé, la BlogStation est lancée ! Il s'agit de la plateforme de blogs (ou plutôt PSBlogs) Playstation issue directement de la technologie blogSpirit.

Le temps pour moi de se pencher sur les différents designs proposés :

- Un design PSP, classique mais efficace. A noter, l'image de la PSP en fond sur la photo du bloggueur.
- Un premier design Playstation 2, avec un joli effet de transparence sur une image de fond.
- Un second design Playstation 2 dans le même ton que le design 5 dispo sur blogSpirit

Qu'en pensent les blogueurs assidus de blogSpirit ? Voudriez-vous voir de nouveaux designs sur blogSpirit ?

Envie de formulaires plus sympa pour votre blog ?

Voici ce que "Bouge ton blog" vous propose :

C'est en tout cas comme cela que s'affichera vos formulaires de commentaires sous Firefox ou Opera. Sous Internet Explorer, les bordures arrondies deviendront carrées mais le reste du formulaire tient la route. Qui sait ? Peut-être Microsoft décidera un jour d'accorder un peu plus ses navigateurs avec les capacités du CSS...

Repérez la ligne /* Comentaires */ dans votre feuille de styles (Présentation -> Configuration Avancée -> Feuille de styles). C'est à ce niveau que sont définis les styles des formulaires.
Puis remplacez les styles input { } et textarea {} par le code suivant :

input {
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
color: #01717f;
background-color: #addfe8;
border: 2px solid #addfe8;
-moz-border-radius: 4px;
}

textarea {
clear: both;
width: 99%;
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
color: #000;
background-color: #addfe8;
border: 2px solid #addfe8;
-moz-border-radius: 4px;
}


Notez que le code couleur affiché ici pour la couleur de fond et les bordures est #addfe8, essayez de remplacer ce code par le code couleur d'un de vos éléments (bannière, liens, colonnes etc...) : les différents codes couleurs de votre blog sont tous présents dans votre feuille de style (exemple : #99cc33 ou #4E8ABE). Un petit conseil : préférez une couleur clair pour plus de lisibilité...

Un autre exemple utilisé sur "Bouge ton blog !" :



Le code CSS :

input {
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
background-color: #ffffff;
border: 1px solid #cc6600;
-moz-border-radius: 4px;
}

textarea {
clear: both;
width: 99%;
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
background-color: #ffffff;
border: 1px solid #cc6600;
-moz-border-radius: 4px;
}


Même chose, je vous conseille de remplacer le code couleur #cc6600 par une couleur de votre choix s'accordant avec la charte de votre blog !