Titre: Design pour blogspot
Posté par: frankinge le le 02-03-2009 a 12:20:28
| Bonjour , j'ai donc ce blog ( http://13circles.blogspot.com ) et strictement rien n'est indiqué dans mon tableau de bord (contrairement à myspace et autre...) pour me permettre de personnaliser la déco . J'ai essayé au pif ce site pour récupérer un code Pimp my profil.com mais lorsque j'essaye de faire "coller" dans le cadre htlm de mon tableau de bord , le "coller" donc , ne s'affiche pas , est ce parceque ce n'est pas compatible , et que blogspot n'accepte pas d'autres codes que les quelque un qu'ils proposent ? |
Titre: Re:Design pour blogspot
Posté par: frankinge le le 05-03-2009 a 17:58:04
Ah bon...? ;D je plaisante...
alors en fait je crois avoir compris mais techniquement c'est autre chose... , donc si quelqu'un sait répondre , ça serait bien ;)
bref je crois qu'il faut inclure dans le code html que j'ai actuellement , le code , enfin l'adresse d'une image ou d'un simple fond d'écran disons . Seulement je sais pas du tout à quelle ligne je dois l'inclure , donc voilà mon code de départ :
<?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 expr:dir='data:blog.languageDirection' 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[/*
* Blogger Template Style
*
* Simple II
* by Jason Sutter
*/
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#000" value="#000000">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#000" value="#cc0000">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#000" value="#000000">
<Variable name="footercolor" description="Date and Footer Color"
type="color" default="#555" value="#555555">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999"> Used to be #969
<Variable name="bordercolor" description="Border Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia,Serif;" value="normal normal 100% Georgia,Serif;">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal bold 200% Georgia,Serif" value="normal bold 200% Georgia,Serif">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/
body {
margin:0;
font:$bodyfont;
background:$bgcolor;
color:$textcolor;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
#outer-wrapper {
margin-top: 0px;
margin-$endSide: 3em;
margin-bottom: 0;
margin-$startSide: 3em;
}
h1 {
border-bottom:dotted 1px $bordercolor;
margin-bottom:0px;
color: $pagetitlecolor;
font: $pagetitlefont;
}
h1 a, h1 a:link, h1 a:visited {
color: $pagetitlecolor;
}
h2 {
margin:0px;
padding: 0px;
}
#main .widget {
padding-bottom:10px;
margin-bottom:20px;
border-bottom:dotted 1px $bordercolor;
clear: both;
}
#main .Header {
border-bottom-width: 0px;
}
h2.date-header {
padding-top:15px;
color:$footercolor;
padding-bottom:0px;
margin-bottom:0px;
font-size: 90%;
}
h3.post-title {
font-size: 140%;
color: $titlecolor;
}
.post {
padding-$startSide:5%;
padding-$endSide:10%;
}
.post-footer {
color:$footercolor;
}
#comments {
padding-top:30px;
color:$textcolor;
padding-bottom:0px;
margin-bottom:0px;
font-weight:bold;
}
#comments .comment-footer {
font-size:1em;
font-weight:normal;
color:$footercolor;
margin-$endSide:10px;
display:inline;
}
.comment-author {
margin-top: 3%;
}
.comment-body {
font-size:1em;
font-weight:normal;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.comment-link {
margin-$startSide:.6em;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
.clear {
clear: both;
}
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
}
body#layout #outer-wrapper {
margin-top: 0px;
margin-$endSide: 50px;
margin-bottom: 0;
margin-$startSide: 50px;
}
]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='13 CIRCLES (en-tête)' type='Header'/>
<b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog'/>
<b:widget id='Profile2' locked='false' title='Qui êtes-vous ?' type='Profile'/>
<b:widget id='Label1' locked='false' title='Libellés' type='Label'/>
<b:widget id='BlogArchive2' locked='false' title='Archives du blog' type='BlogArchive'/>
<b:widget id='BlogList1' locked='false' title='Ma liste de blogs' type='BlogList'/>
<b:widget id='Image1' locked='false' title='Rona Figueroa' type='Image'/>
<b:widget id='Gadget1' locked='false' title='Astronomy Picture of the Day' type='Gadget'/>
<b:widget id='Followers2' locked='false' title='Abonnés fidèles' type='Followers'/>
</b:section>
</div>
</body>
</html>
|
Titre: Re:Design pour blogspot
Posté par: Garyu le le 27-03-2009 a 11:46:20
Salut!
Alors personnellement je ne m'y connais pas non plus "des masses" en blogspot, et j'ai pas mal bidouillé avant d'arriver à faire des blogs assez correct au niveau du design : (du genre ça : http://nihon-seishin.blogspot.com
ou ça : http://moonlitwilderness.blogspot.com )
J'imagine que c'est ça que tu cherches à faire?
si oui alors tu dois modifier les lignes qui sont en gras :
<?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 expr:dir='data:blog.languageDirection' 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[/*
* Blogger Template Style
*
* Simple II
* by Jason Sutter
*/
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#000" value="#000000">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#000" value="#cc0000">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#000" value="#000000">
<Variable name="footercolor" description="Date and Footer Color"
type="color" default="#555" value="#555555">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999"> Used to be #969
<Variable name="bordercolor" description="Border Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia,Serif;" value="normal normal 100% Georgia,Serif;">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal bold 200% Georgia,Serif" value="normal bold 200% Georgia,Serif">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/
body {
background-image : url(); dans les parenthèses tu mets l'URL de ton image
margin:0;
font:$bodyfont;
background:$bgcolor;
color:$textcolor;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
#outer-wrapper {
margin-top: 0px;
margin-$endSide: 3em;
margin-bottom: 0;
margin-$startSide: 3em;
}
h1 {
border-bottom:dotted 1px $bordercolor;
margin-bottom:0px;
color: $pagetitlecolor;
font: $pagetitlefont;
}
h1 a, h1 a:link, h1 a:visited {
color: $pagetitlecolor;
}
h2 {
margin:0px;
padding: 0px;
}
#main .widget {
padding-bottom:10px;
margin-bottom:20px;
border-bottom:dotted 1px $bordercolor;
clear: both;
}
#main .Header {
border-bottom-width: 0px;
} ici pareil, si tu veux mettre l'image directement dans la case tu rajoute background-image : url(); et tu met une url d'image dans les parenthéses
h2.date-header {
padding-top:15px;
color:$footercolor;
padding-bottom:0px;
margin-bottom:0px;
font-size: 90%;
}
h3.post-title {
font-size: 140%;
color: $titlecolor;
}
.post {
padding-$startSide:5%;
padding-$endSide:10%;
}
.post-footer {
color:$footercolor;
}
#comments {
padding-top:30px;
color:$textcolor;
padding-bottom:0px;
margin-bottom:0px;
font-weight:bold;
}
#comments .comment-footer {
font-size:1em;
font-weight:normal;
color:$footercolor;
margin-$endSide:10px;
display:inline;
}
.comment-author {
margin-top: 3%;
}
.comment-body {
font-size:1em;
font-weight:normal;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.comment-link {
margin-$startSide:.6em;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
.clear {
clear: both;
}
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
}
body#layout #outer-wrapper {
margin-top: 0px;
margin-$endSide: 50px;
margin-bottom: 0;
margin-$startSide: 50px;
}
]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='13 CIRCLES (en-tête)' type='Header'/>
<b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog'/>
<b:widget id='Profile2' locked='false' title='Qui êtes-vous ?' type='Profile'/>
<b:widget id='Label1' locked='false' title='Libellés' type='Label'/>
<b:widget id='BlogArchive2' locked='false' title='Archives du blog' type='BlogArchive'/>
<b:widget id='BlogList1' locked='false' title='Ma liste de blogs' type='BlogList'/>
<b:widget id='Image1' locked='false' title='Rona Figueroa' type='Image'/>
<b:widget id='Gadget1' locked='false' title='Astronomy Picture of the Day' type='Gadget'/>
<b:widget id='Followers2' locked='false' title='Abonnés fidèles' type='Followers'/>
</b:section>
</div>
</body>
</html>
Ça c'est uniquement si tu veux mettre une image de fond (c'est ce que j'ai compris après tu veux peut être faire autre chose? ^^)
Tu peux aussi rajouter des bouts de code pour modifier les tailles des blocs de ton blog ...
Mais bon voila, si tu veux d'autres informations, n'hésite pas à m'envoyer un MP! Je suis dispo toute la journée ^^
Tchao! |
Titre: Re:Design pour blogspot
Posté par: frankinge le le 27-03-2009 a 15:41:19
tiens j'ai reçu un mail qui me disait avoir reçu une réponse ici :) je m'y attendais plus trop :D en tout cas merci d'avoir répondu .
Bon en fait du coup j'ai pris une déco noire pour mon blog , pour l'instant ça me va comme ça mais un de ces quatres (surtout qd j'aurais un peu plus de choses à y présenter), je le personnaliserais beaucoup plus et effectivement dans le style du tiens (ça fait génial) .
L'autre chose c'est que le cadre des articles est vraiment très petit sur blogspot pour présenter des tableaux en photo par exemple ... donc je te redemanderai ça en MP .
Sinon vraiment chouette tes blogs ! je suis fan du japon moi même d'ailleurs (j'ai d'ailleurs un petit topic sur le japon dans "le forum" qui se lie à mon blog)
à plus |
Titre: Re:Design pour blogspot
Posté par: Garyu le le 27-03-2009 a 16:05:27
lol, je vois ^^
De rien c'est normal, je t'explique en MP pour les tailles alors ;)
Japan powa ! ;D |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|