Deuxième Sidebar Sur Blogspot?

Dostix · 30 décembre 2005

Mon problème, je souhaiterais faire une deuxième sidebar à gauche.. et je ne sais pas comment faire. le modèle du blog est minima dark.

Est-ce possible?? et si oui,qu'est-ce qu'il faut rajouter?

Merci

Simon

le code de mon modèle.. j'ai apporté quelques modifications

Citation
<!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" xml:lang="en" lang="en">

<head>

<title><$BlogPageTitle$></title>

<$BlogMetaData$>

<style type="text/css">

/*

———————————————--

Blogger Template Style

Name: Minima Black

Designer: Douglas Bowman

URL: www.stopdesign.com

Date: 26 Feb 2004

———————————————-- */

body {

background:#fff url("http://www.gadsden.info/i/gadsden-bg.gif") 50% 0;

margin:0;

padding:40px 20px;

font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;

text-align:center;

color:#ccc;

font-size/* */:/**/small;

font-size: /**/small;

}

a:link {

color:#9ad;

text-decoration:none;

}

a:visited {

color:#a7a;

text-decoration:none;

}

a:hover {

color:#ad9;

text-decoration:underline;

}

a img {

border-width:25;

}

/* Header

———————————————-- */

#header {

width:660px;

margin:0 auto 10px;

border:1px solid #333;

}

#blog-title {

margin:5px 5px 0;

padding:20px 20px .25em;

border:1px solid #222;

border-width:1px 1px 0;

font-size:200%;

line-height:1.2em;

color:#ccc;

text-transform:uppercase;

letter-spacing:.2em;

}

#blog-title a {

color:#ccc;

text-decoration:none;

}

#blog-title a:hover {

color:#ad9;

}

#description {

margin:0 5px 5px;

padding:0 20px 20px;

border:1px solid #222;

border-width:0 1px 1px;

font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;

text-transform:uppercase;

letter-spacing:.2em;

color:#777;

}

/* Content

———————————————-- */

#content {

width:660px;

margin:0 auto;

padding:0;

text-align:left;

}

#main {

width:410px;

float:left;

}

#sidebar {

width:220px;

float:right;

}

/* Headings

———————————————-- */

h2 {

margin:1.5em 0 .75em;

font:bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;

text-transform:uppercase;

letter-spacing:.2em;

color:#777;

}

/* Posts

———————————————-- */

.date-header {

margin:1.5em 0 .5em;

}

.post {

margin:.5em 0 1.5em;

border-bottom:1px dotted #444;

padding-bottom:1.5em;

}

.post-title {

margin:.25em 0 0;

padding:0 0 4px;

font-size:140%;

line-height:1.4em;

color:#ad9;

}

.post-title a {

text-decoration:none;

color:#ad9;

}

.post-title a:hover {

color:#fff;

}

.post div {

margin:0 0 .75em;

line-height:1.6em;

}

p.post-footer {

margin:-.25em 0 0;

color:#333;

}

.post-footer em, .comment-link {

font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;

text-transform:uppercase;

letter-spacing:.1em;

}

.post-footer em {

font-style:normal;

color:#777;

margin-right:.6em;

}

.comment-link {

margin-left:.6em;

}

.post img {

padding:4px;

border:1px solid #222;

}

.post blockquote {

margin:1em 20px;

}

.post blockquote p {

margin:.75em 0;

}

/* Comments

———————————————-- */

#comments h4 {

margin:1em 0;

font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;

text-transform:uppercase;

letter-spacing:.2em;

color:#999;

}

#comments h4 strong {

font-size:130%;

}

#comments-block {

margin:1em 0 1.5em;

line-height:1.6em;

}

#comments-block dt {

margin:.5em 0;

}

#comments-block dd {

margin:.25em 0 0;

}

#comments-block dd.comment-timestamp {

margin:-.25em 0 2em;

font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;

text-transform:uppercase;

letter-spacing:.1em;

}

#comments-block dd p {

margin:0 0 .75em;

}

.deleted-comment {

font-style:italic;

color:gray;

}

/* Sidebar Content

———————————————-- */

#sidebar ul {

margin:0 0 1.5em;

padding:0 0 1.5em;

border-bottom:1px dotted #444;

list-style:none;

}

#sidebar li {

margin:0;

padding:0 0 .25em 15px;

text-indent:-15px;

line-height:1.5em;

}

#sidebar p {

color:#999;

line-height:1.5em;

}

/* Profile

———————————————-- */

#profile-container {

margin:0 0 1.5em;

border-bottom:1px dotted #444;

padding-bottom:1.5em;

}

.profile-datablock {

margin:.5em 0 .5em;

}

.profile-img {

display:inline;

}

.profile-img img {

float:left;

padding:4px;

border:1px solid #222;

margin:0 8px 3px 0;

}

.profile-data {

margin:0;

font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;

text-transform:uppercase;

letter-spacing:.1em;

}

.profile-data strong {

display:none;

}

.profile-textblock {

margin:0 0 .5em;

}

.profile-link {

margin:0;

font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;

text-transform:uppercase;

letter-spacing:.1em;

}

/* Footer

———————————————-- */

#footer {

width:660px;

clear:both;

margin:0 auto;

}

#footer hr {

display:none;

}

#footer p {

margin:0;

padding-top:15px;

font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;

text-transform:uppercase;

letter-spacing:.1em;

}

</style>

</head>

<body>

<div id="header">

<ItemPage><a href="<$BlogURL$>"></ItemPage>

<img src="http://img356.imageshack.us/img356/1189/helyny203xo.jpg">

<ItemPage></a></ItemPage>

</h1>

<p id="description"><$BlogDescription$></p>

</div>

<form method="get" action="http://www.google.com/search">

<input class="" value="and" name="method" type="hidden">

<input class="" value="25" name="matchesperpage" type="hidden">

<input class="" value="score" name="sort" type="hidden">

<input class="" value="http://simon-aubert.blogspot.com/" name="restrict" type="hidden">

<input class="" value="simon-aubert.blogspot.com/" name="domains" type="hidden">

<input class="" value="simon-aubert.blogspot.com/" name="sitesearch" type="hidden">

<input class="" value="lang_fr" name="lr" type="hidden">

<input type="text" value="Rechercher" name="q" size='10' class="texte-10">



<div id="content">

<a href="http://simon-aubert.blogspot.com/2005/09/articles-par-thmes-politique-trangre-l.html">Articles par thèmes</a>



<div id="main"><div id="main2">

<Blogger>

<BlogDateHeader>

<h2 class="date-header"><$BlogDateHeaderDate$></h2>

</BlogDateHeader>



<div class="post"><a name="<$BlogItemNumber$>"></a>

<BlogItemTitle>

<h3 class="post-title">

<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>

<$BlogItemTitle$>

<BlogItemUrl></a></BlogItemUrl>

</h3>

</BlogItemTitle>

<div class="post-body">

<div>

<$BlogItemBody$>

</div>

</div>

<p class="post-footer">

<em>posted by <$BlogItemAuthorNickname$> at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>

<MainOrArchivePage><BlogItemCommentsEnabled>

<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>

</BlogItemCommentsEnabled></MainOrArchivePage> <$BlogItemControl$>

</p>

</div>





<ItemPage>

<div id="comments">

<BlogItemCommentsEnabled><a name="comments"></a>

<h4><$BlogItemCommentCount$> Comments:</h4>

<dl id="comments-block">

<BlogItemComments>

<dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>

<$BlogCommentAuthor$> said…

</dt>

<dd class="comment-body">

<p><$BlogCommentBody$></p>

</dd>

<dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>

<$BlogCommentDeleteIcon$>

</dd>

</BlogItemComments>

</dl>

<p class="comment-timestamp">

<$BlogItemCreate$>

</p>

</BlogItemCommentsEnabled>

<p class="comment-timestamp">

<a href="<$BlogURL$>"><< Home</a>

</p>

</div>

</ItemPage>



</Blogger>

</div></div>





<div id="sidebar"><div id="sidebar2">



<$BlogMemberProfile$>



<MainOrArchivePage>

<h2 class="sidebar-title">Links</h2>

<ul>

LIENS LIBERAUX

<li><a href="http://www.liberte-cherie.com/">Liberté Chérie</a></li>

<li><a href="http://leliberalecolo.blogspot.com/">Le liberal ecolo</a></li>

<li><a href="http://membres.lycos.fr/sitenoir/">Le site noir du communisme</a></li>

<li><a href="http://www.liberaux.org/">http://www.liberaux.org/</a></li>

<li><a href="http://perso.wanadoo.fr/dm01/Cours/Cours-Economie.htm">Cours d'économie</a></li>

<li><a href="http://www.catallaxia.org/">Catallaxia</a></li>

<li><a href="http://hayek.skyblog.com">http://hayek.skyblog.com</a></li>

<li><a href="http://nicolobin.skyblog.com/">http://nicolobin.skyblog.com/</a></li>

<li><a href="http://www.jeunesreformateursliberaux.com/">Jeunes Réformateurs Libéraux</a></li>

<li><a href="http://spaces.msn.com/members/sjperrin">http://spaces.msn.com/members/sjperrin</a></li>

<li><a href="http://lesinkorecteurs.hautetfort.com/index.html">Les Inkos Rekteurs</a></li>

<li><a href="http://bastiat.org/fr/">bastiat.org</a></li>

<li><a href="http://www.u-blog.net/liberte/">http://www.u-blog.net/liberte/ Objectif Liberté</a></li>

<li><a href="http://peres-fondateurs.com/">Pères fondateurs</a></li>

<li><a href="http://www.quebecoislibre.org/">Le quebecois libre</a></li>

<li><a href="http://www.liberaux.org/wiki/index.php?title=Accueil">Wikiberal</a></li>

<li><a href="http://www.les4verites.com/">les 4 vérités (très bon dessins et articles de fonds)</a></li>

<li><a href="http://liberal.skyblog.com/">http://liberal.skyblog.com/</a></li>

<li><a href="http://geoffrey.hautetfort.com/">http://geoffrey.hautetfort.com/</a></li>

<li><a href="http://woland.blogmilitant.com/">http://woland.blogmilitant.com/</a></li>

<li><a href="http://www.reseaulib.org/">reseaulib.org (à consulter tous les jours)</a></li>

<li><a href="http://feimumu.free.fr/expss.WMV">Video à voir! (merci junkkir)</a></li>

<li><a href="http://www.heresie.org">http://www.heresie.org</a></li>

<li><a href="http://spaces.msn.com/members/jeunesliberaux/">le blog des jeunesses libérales</a></li>

<li><a href="http://www.cca-fr.net/">les carnets du chemin ascendant</a></li>

<li><a href="http://frenchcon.blogspot.com/"> French Connection</a></li>

<li><a href="http://eliottmaidenberg.blogspot.com/"> L'archipel du goulag par Eliott Maidenberg</a></li>

<li><a href="http://libertalk.over-blog.com/"> Libertalk</a></li>

gestion des fonds publiques

<li><a href="http://www.contribuables.org/">Contribuables associés</a></li>

<li><a href="http://www.ccomptes.fr/">Cours des comptes</a></li>

<li><a href="http://www.ifrap.org/">IFRAP</a></li>

sites de dissidents

<li><a href="http://www.iranfocus.com/french/modules/news/">iranfocus (surtout des news mais quelque articles plus détaillés)</a></li>

HUMOUR

<li><a href="http://che-mart.com/">Che-mart/</a></li>

<li><a href="http://www.thepeoplescube.com/">thepeoplescube.com/</a></li>

<li><a href="http://pageperso.aol.fr/jeanpol52/index.html?f=fs">jeanpol52</a></li>

<li><a href="http://users.skynet.be/maitredumonde/"> Le site du Maître du Monde</a></li>

<li><a href="http://labaf.blogspot.com/"> La Brigade de l'Argent des Français</a></li>

</ul>

</MainOrArchivePage>

<h2 class="sidebar-title">Links2</h2>

<ul>

LES INDISPENSABLES

<li><a href="http://fr.wikipedia.org/wiki/Accueil">Wikipedia, encyclopédie libre et gratuite</a></li>

<li><a href="http://www.google.com/">Google</a></li>

FAMILLE ET AMIS

<li><a href="http://bresson.skyblog.com/">http://bresson.skyblog.com/ (photos)</a></li>

<li><a href="http://www.gps-traverseepyrenees.chez.tiscali.fr/">La traversée des Pyrénées balisée par gps (site de mon père)</a></li>

<li><a href="http://diakr.over-blog.com/">DiaKr-Cinéma Asiatique (blog de mon frère)</a></li>

</ul>

</MainOrArchivePage>

<h2 class="sidebar-title">Previous Posts</h2>

<ul id="recently">

<BloggerPreviousItems>

<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>

</BloggerPreviousItems>

</ul>

<MainOrArchivePage>

<h2 class="sidebar-title">Archives</h2>

<ul class="archive-list">

<BloggerArchives>

<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>

</BloggerArchives>

</ul>

</MainOrArchivePage>

<p id="powered-by"><a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" /></a></p>



<p> News

vous pouvez maintenant laisser des commentaires sans avoir un compte. .

Pour les commentaires généraux, merci de les laisser sur l'article de présentation du blog.

</p>

</div></div>



</div>





<div id="footer"><hr />

<p> </p>

</div>



</body>

</html>

<script LANGUAGE="Javascript">

<!--

function mesure(_MesurePro, _page)

{

scr_w = screen.width;

scr_h = screen.height;

color = screen.colorDepth;

ref = escape(window.document.referrer);

document.write("<IMG src='http://www.direct-stats.com/cgi-bin/pro/stats/Dostix/marqueur.pl/"+ "?page="+ _page+ "&n="+ Math.round (Math.random () * 1000000000000000)+ "&reso_w="+ scr_w+ "&reso_h="+ scr_h+ "&color="+ color+ "&referer="+ ref+"' border=0>");

pankkake · 30 décembre 2005

Je ne me souviens plus trop, mais tu vas devoir jouer avec ça :

Citation
#content {
width:660px;

margin:0 auto;

padding:0;

text-align:left;

}

#main {

width:410px;

float:left;

}

#sidebar {

width:220px;

float:right;

}

Il te faudra un #sidebar1 et un #sidebar2 (basés sur #sidebar) et après tu mets le contenu entre les <div id="sidebarX"></div>.

Et pour le float:, je sais pas, essaie jusqu'à ce que ça marche .

Sinon il y a des exemples de CSS qui marchent qu'on peut trouver sur le web, je pars souvent de ça quand je cherche à faire un truc.

Et il faudra bien sur changer des width: pour que tout rentre (main+sidebars <=* content).

Sinon le fond m'apparaît blanc en ce moment.

* Par sûreté, il vaut mieux que ça soit inférieur, il y aura peut-être une sombre histoire de marges quelque part…

Dostix · 30 décembre 2005

le fond t'apparait blanc??

moi je le vois noir avec le gadsden flag..

pour le fond, essaie avec firefox… car en effet je viens de tester avec ie…ça plante grave..

EDIT

1)j'ai oublié de te remercier…

2)je ne connaissais pas la fusion des messages rapides..

3)avec firefox t'as droit à ma trombine et mes liens en plus…

Dostix · 30 décembre 2005

pour l'image de fond, j'ai réussi à la faire marcher sous IE.. j'ai hosté le gadsden sur mon blog et hop… la ruse de sioux à deux balles..

pankkake · 30 décembre 2005

J'avais Firefox 1.5, maintenant ça marche. Je ne sais pas où il était mis, mais certains sites bloquent les images quand elles sont accedées depuis un autre (mais pour toi ça marchait car tu as dû regarder l'image avant d'aller sur ton blog donc il était dans le cache de ton navigateur donc pas besoin de la retélécharger).

Et sinon, pour avoir ton image centrée, tu peux mettre ça dans body { } :

Citation
background-position: top center;
background-repeat: repeat-y;

(voir http://pankkake.headfucking.net/wp-content…lt/coldrose.css )

Connexion

Deuxième Sidebar Sur Blogspot?

Messages recommandés

Dostix

pankkake

Dostix

Dostix

pankkake

Archivé

Naviguer

Activité