samedi 25 août 2007

Faire évoluer le modèle sur Blogger

Il est possible d'accèder au code du template : onglet "Template", menu "Edit HTML" et ainsi modifier la mise en forme du post.
Les informations développées ici viennent de .
Pour lire cet article, cliquer sur Read more.

C'est une page html où l'on retrouve les tags HTML, Head et Body. La partie CSS apparaît dans cette page.
Il est conseillé de sauvegarder son modèle avant toute manip. Ce modèle sauvegardé pourra être recharger.
En bas de la fenêtre de code, on retrouve des commandes qui permettent d'enregistrer les modifications.
Celles-ci ne portent que sur le modèle considéré.
Cocher "Expand Widget Templates" permet de d'avoir tout le code dans la partie "body".
La structure est la suivante : Le template principale (Classic Templage) composé du "header", du "crossbar" (sous le header), du "main" , du "navbar" et du "footer" et les widgets représentent les éléments que l'on insert. notamment dans la navbar.

Code et retour template de base visible avec "View" et "Revert to " "Classic Template".
Retour possible au modèles de widget avec "Revert widget templates to default".


Le CSS est dans une balise ![CDATA[ .... ]].

Les grandes parties du template, selon le CSS, sont :
Header, Content, Headings, Comments, Sidebar Content, Profile, Footer.

Les balises commence avec "b:"
.b:if cond="data:post.showBacklinks". (un paramètre de post, True / False)
.b:include data="post" name="backlinks". (commande include si Yes. Noter la fermeture de la balise include)
./b:include.

Ces balises sont incluses dans des .b:if>

Les données sont dans des 'data:objetdonnées'.
(Voir ci-dessous)

Balises des éléments de la page pour la mise en forme
http://help.blogger.com/bin/answer.py?answer=46888
Le body est composé de sections et widgets.
Les sections représentent un espace de la page : sidebar, footer,
Widget est un élément dans cette section : image, blogroll, que vous pouvez ajouter à la page.
Vous pouvez ajourter du code HTML dans les paragraphes de sections.

Les sections
.b:section id="'header'" class="'header'" maxwidgets="1" showaddelement="no" growth="'vertical']">
./b:section>

Dans le code, les sections sont, selon la class : Header, Crosscol (zone au dessus des deux colonnes (main et sidebar), Main, Sidebar, Footer

Une section contient seulement des widgets, il ne peut pas contenir d'autres sections ou du code.

Les widgets
.b:widget id="myList" type='ListView' [locked="no" title="My Favorite Things" pagetype="item"] />
Type of widgets : Blog archive, blog, feed, header, HTML, singleimage,, linklist, list, logo, blogprofil, navbar, videobar, newsbar.

Note : Chaque "b:section" ou "b:widget" sera remplacé par un "div"", aussi dans votre CSS, faire référence à "div.idsection".

Balises des éléments de font et colors
http://help.blogger.com/bin/answer.py?answer=46871
Voir dans le "Head" du code, les variables pour le CSS dans la balise "skin".
Dans le CSS, il existe des variables, déclarées dans les commentaires du CSS /* .. */ :
.variable name="bgColor" description="Page Background Color" type="color" default="#efefef" value="#efefef"> ./variable>
et utiliser comme cela :
background: $bgColor;
Pour quelques rappels sur le CSS : http://help.blogger.com/bin/answer.py?answer=41954

Balises des widgets
Includable et Include
Le contenu d'un widget est dans une balise "includable".
.b:includable id='main' var='thiswidget'>
[insert whatever content you want here]
./b:includable>
Le nom "id" d'un "includable est unique. Si vous avez besoin de plusieurs expression à l'intérieur d'un "includable, utiliser : .b:include name="new" />.
.b:includable id='main'>
.b:loop var='i' values='posts'>
.b:include name='post' data='i'/>
./b:loop>
./b:includable>
"var" servant à faire passer les variables comme une fonction.

Data
L'expression est la suivante : data:objetdonnées'.
Le lien vers les différents types de données.
http://help.blogger.com/bin/answer.py?answer=47270#header
Par exemple, le titre du blog : "data:blog.tilte".

Loop
Pour faire des boucles, répétitions : liste, rautres

If / Else
Pour faire apparaître ou non des éléments dans le blog.

Ajouter d'autres fonctionnalités

Voir : http://help.blogger.com/bin/topic.py?topic=8932
Voir la réponse au problème :
http://betabloggerfordummies.blogspot.com/2007/02/expandable-post-summaries.html

Le code html du post doit être :
div pour le "text-align: justify" que l'on ferme tout à la fin (incluant la balise "spam"
La séparation des textes se fait à la balise :
"span class="fullpost""

Dryat120

Aucun commentaire: