Design pour blogspot - Forum Webdesign

La Communauté Webmaster

  Forum-webmaster
  Webdesign / graphisme
  Webdesign (Modérateurs: Shain, Lilian, lauryv, ToToMaStEr)
  Design pour blogspot

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Design pour blogspot (Lu 3006 fois)

Design pour blogspot
« sur: le 02-03-2009 a 12:20:28 »

frankinge
Membre récent

Hors-Ligne

Messages: 3

Je suis un lama!

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 ?

Rapporter au modérateur

Re:Design pour blogspot
« Répondre #1 sur: le 05-03-2009 a 17:58:04 »

frankinge
Membre récent

Hors-Ligne

Messages: 3

Je suis un lama!

Ah bon...? 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>

« Dernière Édition: le 05-03-2009 a 18:00:24 par frankinge »

Rapporter au modérateur

Re:Design pour blogspot
« Répondre #2 sur: le 27-03-2009 a 11:46:20 »

Garyu
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 2

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!

« Dernière Édition: le 27-03-2009 a 11:46:57 par Garyu »

Rapporter au modérateur

Re:Design pour blogspot
« Répondre #3 sur: le 27-03-2009 a 15:41:19 »

frankinge
Membre récent

Hors-Ligne

Messages: 3

Je suis un lama!

tiens j'ai reçu un mail qui me disait avoir reçu une réponse ici je m'y attendais plus trop 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