Blogger au bout du doigt: modèle blogger à 3 colonnes

Affichage des articles dont le libellé est modèle blogger à 3 colonnes. Afficher tous les articles

100 modèles Blogger pour 2012

By Rodney // 13 commentaires:

Envie de changer le modèle de votre blog ? Envie d'avoir un modèle Blogger frais et en harmonie avec la thématique de votre blog ou les nouvelles tendances ? Si votre réponse est oui, alors laissez moi vous présenter ces 100 modèles Blogger qu'il ne faut pas négliger en 2012.

Changer le modèle de son blog redonne parfois le tonus nécessaire pour s'en occuper encore avec beaucoup plus de passion, car on le voit tout neuf, tout frais, tout beau.

modèles Bogger sur le jeux, musique, cuisine, sport, photographie, etc.

Récoltés sur le web par Swamykant, ces modèles Blogger couvrent plusieurs thématiques: jeux, musique, cuisine, sport, News, photographie, automobile, etc.

Ces modèles Blogger vont du plus simple au plus compliqué. On retrouve aussi parmi eux des modèles avec une seule colonne, deux colonnes, trois colonnes et même quatre colonnes.

Cliquez ici pour voir ces 100 modèles Blogger pour 2012. Qui sait si l'un d'eux vous donnera envier de changer carrément le modèle de votre blog, en le prenant tel qu'il est ou en l'adaptant (changer son image de fond ou ses couleurs).

Que pensez-vous de ces 100 modèles Blogger ? Lequel avez-vous adopté pour 2012 ?

ComicPress : Un nouveau modèle 3 colonnes pour Blogger

By Rodney // 2 commentaires:

ComicPress v2.8 modèle pour Blogger blogspot template

Démonstration en ligne | Télécharger

Mesdames et messieurs, je suis heureux de vous présenter le premier modèle que je met à la disposition des utilisateurs de Blogger, à savoir ComicPress V.

ComicPress V2.8 est un thème wordpress 3 colonnes avec une largeur fixe, conçu par Tyler Martin, John Bintz and Philip M. Hofer . Il est très simple à installer. Vous allez aimer ce design Chic, mais neutre, pour sa simplicité et son efficacité.

Voici quelques unes de ses caractéristiques (Les instructions pour installer un modèle sont à la réponse n°2 de cette page).

CARACTÉRISTIQUES:

- 3 colonnes
- Titre et description

Pour changer le titre et la description, allez à modifier le code html et trouvez ce code

<div id='header'>
<h1><a href=' http://comicpress-blogger-template.blogspot.com/ '> ComicPress 2.8 for Blogger Demo </a></h1>
<div class='description'> Vertical 3-Column Layout for Blogger </div>
<div class='clear'/>
</div>

Remplacez ComicPress 2.8 for Blogger Demo par le titre de votre blog et remplacez Vertical 3-Column Layout for Blogger par la description de votre blog.

Remplacer aussi http://comicpress-blogger-template.blogspot.com/ par le lien de votre blog.

Barre de menu

Pour changer les mots et les liens sur la barre de menu, allez sur "modifier le code html" et trouvez ce code (celui en gras est pour le bouton avec une petite flèche au coin droit) :

<div id='menunav'>
                                                        <div class='menunav-prev'>
                    <a href='http://souvenirs-de-prison.blogspot.com/'/>                    </div>
                                </div>
        <ul id='menu'>
        <li class='page_item page-item-home current_page_item'><a href='http://comicpress-blogger-template.blogspot.com/'>Home</a></li>
        <li class='page_item page-item-2'><a href='http://blogger-mastering.blogspot.com/2010/01/comicpress-v28-blogger-template-3.html' title='About'>About</a></li>
<li class='page_item page-item-3'><a href='http://comicpress.org/demo-v3c/about/' title='Original ComicPress'>Original</a></li>
        </ul>
    <div class='clear'/>
</div>

- Numérotation des Pages

Pour changer ce paramètre en fonction de votre blog, allez à modifier le code html et trouvez les lignes suivantes (à la fin de la page):

var postperpage=2;
var numshowpage=4;

Postperpage : Combien d'articles à afficher par page de votre blog
numshowpage : Combien des chiffres seront afficher sur la numérotation des pages

- Archives en forme de calendrier (Merci à Phydeayx3) : Notez que vous pouvez ajouter un autre widget archives

Voici la configuration à mettre pour la date de votre widget, en allant sur "Mise en page" puis en cliquant sur "modifier" pour le widget archive (le premier de la colonne gauche)

Le titre peut du widget peut être n'importe lequel, mais il faut respecter le format ci-dessus : cochez le deuxième point de la première ligne et le premier point de la troisième ligne. Mettre la date au format "janvier 2010".

Enregistrez les modifications et allez voir sur votre blog si tout est correct. Le calendrier devrait être opérationnel.

Modifier le diaporama ...

Il vous faut d'abord préparer vos images qui doivent avoir 510px de largeur et 340px de longueur. Ensuite, rendez vous sur "Mise en page" et cliquez sur "modifier" pour le premier widget (html/javascript) de la colonne centrale (celui au dessus de message de blog).

<div id='myGallery'>





<!-- First Picture Start -->





<div class='imageElement'>





<h3>Titre 1  </h3>





<p/>





<a class='open' href='LIEN 1 '/>





<img alt='Valentine And Moi' class='full' src='URL DE L'IMAGE 1 '/>





</div>





<!-- First Picture End -->





<!-- Second Picture Start -->





<div class='imageElement'>





<h3>Titre 2  </h3>





<p/>





<a class='open' href='LIEN 2 '/>





<img alt='Valentine And Me' class='full' src='URL DE L'IMAGE 2 '/>





</div>





<!-- Second Picture End -->





<!-- Third Picture Start -->





<div class='imageElement'>





<h3>Titre 3  </h3>





<p/>





<a class='open' href='LIEN 3 '/>





<img alt='Valentine And Me' class='full' src='URL DE L'IMAGE 3 '/>





</div>





<!-- Third Picture End -->







</div>

Enregistrez les modifications et allez admirer le résultat. Notez que ce widget ne s'affichera que sur la page d'accueil.

Maintenant, votre modèle ComicPress est installé avec succès!

Eliminer le décallage entre les bloc de résumés d'articles sur Turnout Mag

By Rodney // 3 commentaires:

Ceci est un article de Michèle, du blog Attention à la terre, Blog sur environnement, developpement durable, energies renouvelables, les energies solaires, musique mp3 et videos youtube, ...

Le gros défaut que j'ai rencontré en installant le modèl Turn out Mag sur Attention à la Terre, et le décallage qui se présentait entre les différents blocs de résumés d'articles sur la page d'accueil.
Il a donc fallu supprimer une partie du code (ou plutôt le mettre en stand by) car la date et les libellés empêchaient l'allignement parfait. (voir illustrations).

éliminer le décallage entre les blocs de résumés d'articles sur Turnout Mag

modèle turnout mag arrangé libellés et date

Pour supprimer ce décallage, voici ce qu'il vous faut  faire :

Allez sur le tableau de bord
cliquez sur l'onglet "Mise en page"
Menu "Modifier le code HTML"
cochez la case "Développer des modèles de gadgets"
Faire "Ctrl+f" pour trouver : <b:if cond='data:post.dateHeader'>

Code à supprimer ou mettre entre  <-- votre code --> afin de le rendre inactif

<!-- <p class='details1'> <b:if cond='data:post.dateHeader'>
        <data:post.dateHeader/>
      </b:if> /         <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url + "?max-results=300"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if></p> -->

 Vous pouvez retrouver Michèle sur son blog, Attention à la terre, où elle se fera un plaisir de vous faire découvrir son univers pas comme les autres. Pour s’abonner à son blog, cliquez sur le lien suivant.

Articles sur deux colonne en page d'accueil

By Rodney // 20 commentaires:

article sur deux colonne en page d'accueil

Après la publication de l’article sur la possibilité d’afficher très simplement un résumé de ses articles à la page d’accueil comme sur le modèle Schemer mag, beaucoup sont ceux qui ont voulu aussi afficher ces résumés d’articles en 2 colonnes à la page d’accueil de leur blog. Cet article va se faire le plaisir d’assouvir leur soif.

Si, après avoir pu afficher les résumés d’articles sur la page d’accueil d’un modèle que vous avez absolument voulu garder, vous voulez en plus de cela afficher deux colonnes des résumés à l’accueil dans ce modèle que vous chérissez tant, voici ce qu’il faut faire :

Conseil : Effectuez d'abord toute la manoeuvre suivante dans un blog test ayant les mêmes modèle et paramètres que le votre. Si tout est réussi dans celui-ci, allez répeter la manoeuvre sur votre blog.

1. Se connecter à votre compte Blogger, aller sur « Mise en page » pour le blog que vous voulez transformez, et allez ensuite sur « Modifier le code html ».

2. Mettre le script suivant juste après la balise </head>

<SCRIPT type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 230; summary_img = 200; img_thumb_height = 80; img_thumb_width = 80; </SCRIPT> <SCRIPT src='http://myblogtalk.com/bloggertemplates/turnoutmag/autoreadmorethumb.js' type='text/javascript'/>

Si vous aviez déjà utilisé le code pour afficher le résumé à la page d’accueil, enlevez-le pour le remplacer par celui ci-haut.

3. Remplacez le code css pour les articles par le code suivant (clic droit puis enregistrer sous). Notez que la partie contenant le code css pour vos articles porte souvent l’identifiant /* Post Body, soit /* Posts ou encore /* content.

Il vous faudra changer la taille dans ce code css pour le faire correspondre aux valeurs de votre blog. Dans le code qui vous sera proposé, la largeur (width) de la partie dédiée aux articles est de 655 pixels et la largeur pour les blocs des résumés à l’accueil est de 315 pixels.

Si dans votre blog, la partie dédiée aux articles a une largeur de 480 pixels, il va de soi que vous devrez diminuer la largeur des blocs de résumé à 230 pixels, à moins que vous ne changiez la valeur de la grandeur de votre blog pour que la partie des articles soit maintenant à 655 pixels.

Le changement que vous allez effectuer dans le code css suivant va affecter le script de l’étape 2 où il vous faudra changer les valeurs de la largeur occupée par le résumé quand il n’y pas d’image (actuellement 230 pixels) et la largeur occupée quand il y a une image illustrative (actuellement 200 pixels).

Voici le nouveau css pour les articles (faire click droit puis « enregistrer sous »).

Notez que vous pouvez simplement copier le code css fournit et allez l'installer juste avant la balise ]]></b:skin> dans votre modèle.

Après l’avoir installé dans votre blog, enregistrez votre modèle.

Petite explication : Les codes css portant l’identifiant #contentb .post, sont ceux pour les résumés à l’accueil tandis que ceux portant l’identifiant #contentb .single, sont ceux pour les articles paraissant seul sur les pages d’articles.

4. Remplacez toute la section contenant le widget blog, qui ressemble à ceci :

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

par ce code (clic droit puis enregistrer sous) et enregistrez votre modèle.

Allez maintenant admirer le résultat que ça donne sur votre blog. Normalement, vous devriez voir apparaître deux colonnes des résumés à l’accueil de votre blog.

Si vous voulez obtenir le même résultat pour les pages des libellés et d’archives, lisez l’article : Résumé d'articles avec photos sur pages libellés - Modèle Turn Out mag

Résumé d'articles avec photos sur pages libellés - Modèle Turn Out mag

By Rodney // 6 commentaires:

résumé articles avec photo sur pages libellés modèle turnout mag

J'ai reçu plusieurs demandes sur la possibilité d'afficher des blocs des résumés d'articles avec photos illustratives sur les pages de libellés comme cela se présente sur la page d'accueil dans le modèle TurnOut Mag. Après plusieurs essais et tests, voici la bonne méthode à suivre pour avoir le résultat désiré (vous pouvez faire un essai sur la page de libellé "widget blogger" de ce blog).

1. Trouver les codes suivants :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<p class='details1'> <b:if cond='data:post.dateHeader'>

2. Remplacer la première ligne du code ci-haut par

<b:if cond='data:blog.pageType != "item"'>

3. Trouver les code suivant :

<b:else/>


<div id='contentb'>

4. Remplacez les codes ci-haut par :

</b:if>


<b:if cond='data:blog.pageType == "item"'>
<div id='contentb'>

5. Trouve les codes ci-après :

<b:includable id='main' var='top'>
  
  <div class='blog-posts'>
   <data:adStart/>
   <b:loop values='data:posts' var='post'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
   <b:if cond='data:blog.pageType != "item"'>

   <h5 style='padding-top: 10px;'><a expr:href='data:post.url'>
   <data:post.title/></a></h5>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>
<b:else/>
   <b:include data='post' name='post'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
   <b:include data='post' name='comments'/>
   </b:if>
   </b:loop>
   <data:adEnd/>
  </div>

6. Remplacez-les par :

<b:includable id='main' var='top'>

<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<div class='date-header'>
<data:post.dateHeader/>
</div>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:else/>
   <b:include data='post' name='post'/>
</b:if>
</b:loop>
<data:adEnd/>
</div>

Pour ne pas avoir un message au dessus des articles du genre "Affichage de tous les messages portant le libellé "xxxxx"", vous devez effacer la ligne <b:include data='top' name='status-message'/> dans le code ci-haut.

7. Enregistrez votre modèle et allez admirer le résultat sur une page de libellé.

Deux modèles magazines qui vont vous plaire

By Rodney // 5 commentaires:

Après avoir publié l'article sur le concours organisé par Blogger trick, j'étais allé jéter un coup d'oeil sur ce site, et ai découvert des modèles magazines qui vont certainement plaire à certains parmi vous (il semble que Gaëtan les avait découvert avant, il est un peu cachotier on dirait).

les templates en question sont :

1. Turn Out Mag : 4 colonnes à la page d'accueil, dont dueux affichant en plusieurs blocs les résumés des articles récement publiés avec leurs photos illustratives. Les deux barres latérales sont toutes à droite.

Voir ce modèle en Live / Télécharger ce modèle

Les instructions pour l'installation sont ici (english)

2. Schemer-marg : Un peu sembable au premier à la seule différence qu'il a 3 colonnes, une barrre latérale à gauche, l'autre à droite. A l'accueil sont affiché en bloc successifs les résumés des articles récemment publiés aveci une petite image (si l'article en contient).

Voir ce modèle en Live / Télécharger ce modèle

Les instructions pour l'installation sont ici (english)

Qui est preneur ?

Des modèles originaux pour Blogger sur Btemplate et Eblogtemplates

By Rodney // 4 commentaires:

Avez-vous envie de donner un air nouveau à votre blog ? Rien de plus simple que changer de modèle pour cela. Mais, où trouver un modèle original et si pas des adaptations des modèles Wordpress pour Blogger ?

Le site Btemplate et Eblogtemplates sont là pour vous. Ils vous proposent des modèles de toutes sortes (1, 2, 3 voire 4 colonnes) sur des thèmes différents, et même des adaptations des modèles Wordpress pour Blogger.

Vous savez sûrement que le nouveau modèle que j'utilise est une adaptation d'un modèle Wordpress que j'avais trouvé sur Eblogtemplates. J'ai trouvé d'autres thèmes sur Btemplate que j'aimerais utiliser dans les jours à venir pour mes autres blogs.

Alors, si ça vous tente de donner de la fraîcheur à votre blog, n'hésitez pas d'aller jeter un coup d'oeil sur les sites précités, vous risquez d'être surpris par la beauté et la qualité des offres.

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.

Les variables dans un modèle Blogger

By Rodney // 2 commentaires:

Ceci est la quatrième partie d'une série de 4 articles sur la création d'un modèle Blogger. Ecrit par Thur, cette série n'est peut-être pas un guide complet sur la création d'un modèle Blogger, mais elle vous permettra d'avoir une plus grande compréhension de la structure des modèles Blogger et de la façon qu'il vous faut les manipuler.

L’un des avantages de modèle pour le nouveau Blogger est l’utilisation des variables (bien qu’elles ne sont limitées qu’aux polices et aux couleurs).

Comme expliqué au premier article de cette série :

Notez

<style type="text/css">
<!-quelques styles css ici -->
</style>

est remplacé par :

<b:skin><![CDATA[/*
*/
<!-quelques styles css ici -->
]]></b:skin>

Les variables sont insérées entre les balises de commentaire /* */, comme ceci :

<b:skin><![CDATA[/*

Variable definitions
====================

<Variable name="" description="" type="" default="" value="">

*/
<!-Quelques styles css ici -->
]]></b:skin>

Comme vous pouvez le constater, la variable a quelques attributs obligatoires :

name (nom): Un identifiant technique unique;

description: ladescription du nom (name) - comme elle apparaîtra sur la page de modification des Couleurs ;

type: 'color (couleur)' ou 'font (police)' - rien de plus, hélas!;

default: the default value : valeur par défaut, peut être le nom d’une couleur (ou son code hexadecimal ) ou encore la valeur de la police (style de la police, taille de la police, etc. = font-style font-weight font-size font-family).
;

value: nouvelle valeur - peut rester vide;

Voici deux exemples (pour chaque type):

<b:skin><![CDATA[/*

Variable definitions
====================

<Variable name="textcolor" description="Couleur du texte"
type="color" default="#ccc" value="#cccccc">

<Variable name="bodyfont" description="Police du contenu"
type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">

*/

]]></b:skin>

Il faut noter que :

Pour chaque police ou couleur, vous pouvez utiliser des variables prédéfinis dans votre code CSS

Voici deux exemples (pour chaque type):

A la place de

body {
color: #CCC;
font: italic bold x-small 'Trebuchet MS', Trebuchet, Verdana, Sans-serif;
}

on peut écrire

body {
color: $textcolor;
font: $bodyfont;
}

Ainsi vous pouvez définir des couleurs séparées pour les couleurs des polices (fonts), liens (links), fond (backgrounds), bordures (borders), et cetera ... et différencier la police pour les articles, les commentaires, les liens, les colonnes latérales, l’entête, et cetera.

Ainsi, vous n’aurez plus à aller toucher au code html de votre blog pour changer une couleur ou une police. Vous pouvez tout contrôler en allant sur Mise en page, puis «police et couleur » à partir de votre tableau de bord.

Vous aurez compris que dans un modèle blogger, la grande partie se joue dans le code css (pour définir l’habillement, la disposition des chaque partie, etc.). Il ne vous reste plus qu’à chercher un bon tuto sur le csss pour approfondir vos connaissance sur la question.

Vous pouvez voter pour cet article sur : Votez sur Scoopeo

Créer un modèle fluide sur Blogger

By Rodney // Aucun commentaire:

Ceci est la troisième partie d'une série de 4 articles sur la création d'un modèle Blogger. Ecrit par Thur, cette série n'est peut-être pas un guide complet sur la création d'un modèle Blogger, mais elle vous permettra d'avoir une plus grande compréhension de la structure des modèles Blogger et de la façon qu'il vous faut les manipuler.

Nous avions vu dans le tuto passé comment créer un modèle fixe du genre Partie centrale- Colonne droite - Colonne Gauche et un du genre Colonne 1 - Partie Centrale - Colonne 2.

Les modèles que nous avions conçu étant fixe, quand l’écran est trop petit pour afficher son entièreté (en largeur), pour voir la partie non affichée (ça peut être l’une des colonnes), le visiteur sera obligé de se déplacer dans la page en faisant défiler à gauche le bouton de déplacement de son navigateur.

Pour créer un modèle fluide qui peut s’afficher dans toute sa largeur quelque soit la taille de l’écran, il suffit d’effectuer trois changement dans le modèle que nous avions conçu précédemment.

Voici à quoi ressemblait le style css dont on avait eu besoin pour faire notre modèle fixe :

body {
margin: 0px;
padding: 0px;
}

#container {
width: 960px;
margin: 10px auto;
padding: 0 10px;
}

#header {
padding: 10px;
}

#main {
width: 560px;
float: left;
}

#sidebar1, #sidebar2 {
width: 190px;
float: left;
margin-left: 10px;
}

#footer {
padding: 10px;
clear: both;
}

Pour faire de ce modèle un modèle fluide, seuls trois attributs doivent être changé :

body {
margin: 0px;
padding: 0px;
}

#container {
width: 96%;
margin: 10px auto;
padding: 0 10px;
}

#header {
padding: 10px;
}

#main {
width: 48%;
float: left;
}

#sidebar1, #sidebar2 {
width: 24%;
float: left;
margin-left: 10px;
}

#footer {
padding: 10px;
clear: both;
}

Ceci donnera un modèle fluide, qui s’adapte à n’importe quel écran puisque chaque partie occupera un pourcentage donné de l’écran.

Il faut quand même que je vous avoue que je n’aime pas trop ce genre de modèle, puisque parfois les éléments s’entremêlent (ce qui ne fait pas beau). Comme tout le monde ne sera jamais du même avis que moi, bof !

Quoi qu’il en soit, vous aurez remarqué que nous n’avons jusque là pas défini les couleurs et les polices des titres et contenus de chaque partie du modèle. Les explorateurs affichent par défaut les styles qui y sont prédéfinis.

Prochainement, nous verrons comment définir les couleurs et les polices de notre modèle.

Vous pouvez voter pour cet article sur : Votez sur Scoopeo

Créer un modèle blogger 2 : les codes css de base

By Rodney // 2 commentaires:

Ceci est la deuxième partie d'une série de 4 articles sur la création d'un modèle Blogger. Ecrit par Thur, cette série n'est peut être pas un guide complet sur la création d'un modèle Blogger, mais elle vous permettra d'avoir une plus grande compréhension de la structure des modèles Blogger et de la façon qu'il vous faut les manipuler.

Voyons aujourd'hui quelques bases du CSS pour donner à cette page non formatée une présentation décente. Tout ceci n'est pas un vrai guide, ni un profond manuel ! On se penche seulement sur la base indispensable! Les codes css ci-dessous sont à mettre à l'endroit où il était écrit dans l'article précédent.

[ click image to view page ]

Tout d'abord définir la marge (marging) et le padding (connaît pas sa signification française) du corps du blog (body) à zéro:

body {
margin: 0px;
padding: 0px;
}

Utilisez une largeur (width) (960px ici, donc cette mise en page fonctionnera dans une résolution minimum de 1024) et centrer le contenu (en utilisant margin-left et margin-right = auto):

#container {
width: 960px;
margin: 10px auto;
padding: 0 10px;
}

Donnez l'en-tête certains espace intérieur:

#header {
padding: 10px;
}

La partie importante!
Pour un positionnement pouvez utiliser les divs flottant ici.
Donner à la partie centrale (main) qui contient les messages du blog ( principal et les barres latérales (sidebars) leur largeur et ajouter les flotteurs et quelques marges:

#main {
width: 560px;
float: left;
}

#sidebar1, #sidebar2 {
width: 190px;
float: left;
margin-left: 10px;
}

(Notez que les deux barres latérales ont les mêmes styles ici, afin que nous puissions nous faciliter la tâche.)

Mettre un peu d'espace à l'intérieur du pied de page également, et une indication clear afin de faire du pied de page le dernier élément à afficher sur la page:

#footer {
padding: 10px;
clear: both;
}

Ceci donnera un modèle avec Partie principale - Colonne latérale 1 - Colonne latérale 2 :

[ cliquer sur l'image pour voir le résultat ]

Il est très simple de le changer en un modèle du genre Colonne 1 - Partie centrale - Colonne 2.

Il suffit d'introduire une marge négative et une autre marge de plus :

#main {
width: 560px;
float: left;
margin-left: 200px;
}

#sidebar1 {
margin-left: -760px;
}

#sidebar2 {
margin-left: 10px;
}

#sidebar1, #sidebar2 {
width: 190px;
float: left;
}

Ces petits changements sont les seuls nécessaires pour créer le squelettes d'un modèle du genre Colonne 1 - Partie centrale - Colonne 2.

[ cliquer sur l'image pour agrandir ]

Voici le code complet du modèle affiché sur la photo :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
*/

/***************************/
/* Thur Broeders */
/* march 2007 */
/* From Scratch v0.1 */
/* */
/* http://www.thurboeders.nl/ */
/* postmaster (at) thurbroeders (dot) nl */
/***************************/

body {
margin: 0px;
padding: 0px;
}

#container {
width: 960px;
margin: 10px auto;
padding: 0 10px;
}

#header {
padding: 10px;
}

#main {
width: 560px;
float: left;
margin-left: 200px;
}

#sidebar1 {
margin-left: -760px;
}

#sidebar2 {
margin-left: 10px;
}

#sidebar1, #sidebar2 {
width: 190px;
float: left;
}

#footer {
padding: 10px;
clear: both;
}

]]></b:skin>
</head>
<body>


<div id='container'>


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>



<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>



<b:section class='sidebar' id='sidebar1'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>



<b:section class='sidebar' id='sidebar2'>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>



<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>


</div>


</body>
</html>

Vous pouvez promouvoir ou voter pour cet article sur : Votez sur Scoopeo

Créer un modèle Blogger

By Rodney // 3 commentaires:

Ceci est la première partie d'une série de 4 articles sur la création d'un modèle Blogger. Ecrit par Thur, cette série n'est peut être pas un guide complet sur la création d'un modèle Blogger, mais elle vous permettra d'avoir une plus grande compréhension de la structure des modèles Blogger et de la façon qu'il vous faut les manipuler.

Assumons que vous avez un modèle, une structure (x)html de base - crée grâce à un générateur de modèle ou fait par vous-même ou encore emprunté quelque part (dans ce cas, soyez fairplay et faites un lien vers le designer original).

Le modèle en question devrait ressembler à quelque chose comme ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">

</style>
</head>
<body>

<div id='container'>
<div id='header'> </div>
<div id='main'> </div>
<div id='sidebar1'> </div>
<div id='sidebar2'> </div>
<div id='footer'> </div>
</div>

</body>
</html>

Ceci est un modèle rudimentaire et non garnis (en widgets). Pour le transformer en un modèle Blogger, il faut juste deux étapes :

1) En faire un document XML (eXtensible Markup Language) !

Pour cela, prendre n'importe quel modèle Blogger et en prendre l'entête (X)HTML et le mettre à la place de celui du modèle ci-haut :

Notez que

<style type="text/css">

</style>

est remplacé par

<b:skin><![CDATA[/*
*/

]]></b:skin>

Oui, c'est tout. Vous avez maintenant un modèle Blogger.

Mais, il est vide. Alors, il faut :

2) ajouter des widgets Blogger au contenu !

Pour cela, allez voir la liste des codes html pour widgets Blogger en une ligne.

Notez qu'il a suffit d'ajouter seulement :

<b:section class='sidebar' id='sidebar1'/>
<b:section class='sidebar' id='sidebar2'/>
<b:section class='footer' id='footer'/>

Dès que votre modèle sera enregistré, vous pouvez commencer ajouter des widgets entre ces sections.

Dès que vous aurez fini, vous aurez un modèle Blogger, non formaté, sans style css.

Le pied de page et les deux colonnes latérales ne sont pas visibles car aucun widget n'est ajouté... mais ils sont présents.

Vous pouvez voir ce modèle rudimentaire à l'oeuvre ici.

A ce stade, si vous avez une solide connaisance de Css, vous serez en mesure de donner à votre modèle l'apparence que vous voulez.

A+

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.

Les modèles classiques Blogger en 3 colonnes

By Rodney // 11 commentaires:

Le tuto que j'avais posté sur l'ajout d'une autre colonne latérale dans son blog semble avoir attiré l'attention de certains. Seulement, vu qu'il y a une certaine incompréhension (genre : les gens insèrent même le numéro alors qu'ils sont là juste à titre d'indication), je vous propose des modèles classiques proposé par blogger et mis en 3 colonnes par Ashwini Khare.

Pour installer :

1. Télécharger: faite un clique droit sur le titre au dessus de l'image du modèle qui vous intèresse et sauvegardez-le dans votre ordi.

2. Aller sur "modèle", "modifier le code html" et là cliquer sur "parcourir"

3. Après avoir sélectionné le fichier xml à partir de votre ordi et cliqué sur "transférer", vous risquez d'avoir un message vous demandant de confirmer la supression de certains widgets, confirmez si vous pouvez facilement les remttre en place ou allez voir cet article pour savoir comment mettre un nouveau modèle sans perdre ses widgets.

Minima White