Paris, ville lumière...

Découvrir et visiter Paname. Blog, infos, reportages, photos de Paris.

"Ne pouvoir se passer de Paris, marque de bêtise ; ne plus l'aimer, signe de décadence" Gustave Flaubert.
"Toutes ces petites choses que vous avez toujours eu envie de savoir sur Paris mais sur lesquelles n'avez jamais eu le temps de vous pencher ! " La rédaction Uniterre.

{ Page précédente } { Page 185 sur 238 } { Page suivante }

Comment j'ai modifié ce blog ? Tutorial pour modifier le modèle de votre blog...

10:57 , 18 avril 2007 .. Publié dans .News et tutoriels du blog .. 2 commentaires .. Lien

A la demande de certains ou certaines de mes chers "clients" , voici un petit tutorial sur comment personnaliser son blog Uniterre.
Ce tutorial est d'ailleurs adaptable à d'autre types de sites, concernant les règles de html et les manipulations des images. Seul les modèles et balises spécifiques "Uniterre" sont non transposables.

Je vais vous expliquer ce que j'ai fais, ceci vous montrera un cas pratique concret, probablement pas exhaustif, sur ce qui peut être réalisé. Ceci constituera, en tous cas, une excellente base avant de voler de vos propres ailes et d'innover par vous mêmes.

Au préalable, je me permets de vous rappeller les billets déja écrits en guise d'introduction :
Je complèterai cette série très bientôt par :
  •      un tutorial simple mais détaillé du travail sur le traitement des images avec paint shop pro et photofiltre. Il vous montrera comment recadrer, améliorer,  rendre plus net, alléger vos images demanière très simple et facile.

PS :

En outre je vous recommande vivement à nouveau les FAQ et forum Uniterre de très bonne facture et très conviviaux .
Ainsi que l'indispensable Aide en ligne accessible depuis votre interface d'administration.

Regardez les "balises" qui existent pour savoir les reconnaître.
Comme les balises html qui ont des fonctions elles aussi elles commencent par un < et finissent part />


Voilà donc comment j'ai modifié mon blog :

D'abord je suis allé choisir un modèle de présentation qui me convenait, comme chacun.
J'ai choisi le modèle "Tunnel".
Ensuite j'ai ouvert mon modèle de présentation.


Pour voir mon "code", faîtes clic-droit sur ma page et sélectionnez "code source de la page", vous verrez alors mon code (celui du modèle de présentation modifié, entre autre) et suivrez plus aisément les modifications que j'ai faites.

Ce qui est facile à changer, pour commencer, ce sont les images.
Vous regardez avant tout quelles tailles elles font.
Pour cela quand vous surfez sur le site, vous faites clic-droit sur l'image : propriétés, et vous obtenez la largeur et la hauteur de l'image, ainsi que son nom avec le chemin où elle est stockée

Ca donne quelque chose comme :

http://blog.uniterre.com/images/templates/mexican_sunset_title.jpg

où ce qui est en gras est le nom du fichier,
le reste étant le chemin d'accès du répertoire où est stockée l'image.

J'ai créé une image de ma composition, aux mêmes dimensions, et je l'ai mise sur mon site perso Redbook.free.fr dans le répertoire mesbannieres

J'ai donc remplacé le code d'origine par :
http://redbook.free.fr/mesbannieres/monnomdefichier.jpg

J'ai pris les mêmes dimensions pour ne pas trop chahuter les tailles des cadres du modèle pour commencer ; mais on fait ce qu'on veut !

Un petit point important !
Si votre image est mise comme "image de fond", il faudra faire d'abord afficher l'image pour pouvoir faire la manip que je viens de vous indiquer (clic droit/propriétés etc...). C'est généralement le cas des bannières du haut des modèles (appellés aussi "templates") Uniterre.

Vous pouvez bien entendu, si vous n'avez pas d'autre site, charger une image dans votre galerie image Uniterre ; puis aller la chercher via le code suivant :

http://blog.uniterre.com/uploads/"votre pseudo"/"nomdevotreimage".jpg

Ensuite vous pouvez modifier vos métatags, ça sera fait.
Voir le tutorial évoqué en début d'article...

Modifiez toujours les choses une par une ; et sauvegardez votre code à chaque fois, surtout si vous débutez.


Vous remarquez dans le code du modèle qu'il y a des choses qui sont mises en commentaires.

Quand vous supprimerez un morceau de code (par exemple, j'ai supprimé la balise qui fait apparaître l'avatar) il peut être bon de le mettre en commentaires (regardez comment les balises sont faites) ce qui permet de revenir en arrière plus facilement si nécéssaire) :

<-- ANCIEN CODE -->      Ceci est du commentaire  (j'ai omis exprès un " ! " )

Les balises sont entre les signes  < >

Rappel : La liste des balises Uniterre est dans l'aide en ligne très claire

Les balises html indispensables sont en particulier :
  • BR pour aller à la ligne
  • B pour mettre en gras
  • Href est la balise qui permet de faire un lien
  • Image src est la balise qui appelle une image
  • etc...
Le mieux est de regarder votre page et de voir comment sont codées les choses qui apparaissent et de travailler à l'imitation.

J'ai supprimé des menus qui ne m'allaient pas et j'ai ajouté des menus :
  • Top liens
  • Album photos
  • Echanges de liens : des images cliquables pour référencer mes partenaires.
  • Références
Tout cela est dans la partie "right side" de mon modèle puisque c'est dans la colonne de droite.
Pour répérer où faire les modifs, répérez tout simplement le code de ce qui est déja affiché par défaut, ce n'est pas dur...
Et travaillez par copier/coller et remplacement au début...

Pour faire apparaître ma rubrique Top liens

J'ai écrit le mot Top Liens et je l'ai mis à l'intérieur d'une balise qui lui applique un "style"
h2 est  une balise qui est définie dans une "feuille de style" en début de modèle ;
 là où vous trouvez ceci :

h2
margin-top: 0px;
margin-bottom: 0px;
font-size: 12pt;
color: #FFFFFF;
font-weight: bold;
font-family: "Trebuchet MS", verdana, arial, serif;

L'interêt de la feuille de style, vous le comprenez, c'est que l'on définit un style (par exemple ici h2), en début de page, une bonne fois pour toute ; et on l'applique quand on veut en l'invoquant via les balises h2.

Je suis clair ?

Un autre exemple de l'application d'un style : Le titre de mon blog dont j'ai modifié la place.
Par défaut le titre Paris, ville lumière
Se met en bas du cadre (dans lequel l'image de fond s'affiche), tout ceci est définit ici :
title 
height: 230px;
width: 700px;
padding: 10px;
background-image: url(http://redbook.free.fr/mesbannieres/paname.jpg);
border: 3px solid #666666;
border-top: none;
vertical-align: top;

Pour mettre mon titre en haut de page, à gauche, j'ai remplacé le mot "bottom" (en bas) par "top" :
vertical-align: top

Pour l'affichage de ma rubrique

Références

(entre les balises h2 ppour apparaître comme un titre en blanc et en gras...),

avec des logos cliquables, voici mon code (exemple du logo Uniterre ) :

<a href="http://www.uniterre.com/" target="_blank">
<img src="http://www.uniterre.com/partenaires/uniterre.gif"
alt
="Annuaire des carnets de voyage - Uniterre"

width
="60" height="60"
border="0">a>

<a href="http://www.uniterre.com/" On fait un lien vers uniterre

target="_blank" qui s'ouvre dans une nouvelle fenêtre

Je vais chercher l'image ici :

img src="http://www.uniterre.com/partenaires/uniterre.gif

alt="Annuaire des carnets de voyage

C'est ce qui s'affiche quand la souris se pose sur l'image !

ceci forme aussi une excellente légende pour vos images vis à vis des moteurs de recherche ; 
à bon entendeur,..


width
="60" height="60"
sont les dimensions de l'image (logo, b

annière)
target="_blank" veut dire que le lien s'ouvrira dans une nouvelle fenêtre
border=0 permet de ne pas avoir de contour de couleur inesthétique à l'image.

> on oublie pas de fermer les balises qu'on a ouvertes 

Je pense que c'est assez clair, on appelle une image, on met un lien associé.


Rappellez vous si ces styles (styles des titres, des liens, ...) ne vous plaisent pas, vous les modifiez dans la partie ad hoc de votre code.
Vous pouvez aussi créer de nouveaux styles en vous inspirant de ce qui est fait (en modifiant au coup par coup, progressivement, votre code)

Mes autres modifications :

Toutes les autres modifications sont un peu du même type ; à l'instar de mentions légales du bas de page ; il faut juste bien repérer où mettre le code et être rigoureux (ou rigoureuse ) dans la recopie des codes types

Pour le code :
{ Page précédente } { Page 1 sur 60 } { Page suivante }

que j'ai mis en haut de page, avec une ligne écrite "Les articles sont classés du plus récent au plus ancien : ", c'est bien sur un simple copier/coller du code présent par défaut en bas de page.




   Allez, 2 trucs en supplément, parce que c'est vous...

Si vous voulez rendre la bannière du haut de votre page cliquable, c'est simple si c'est une image insérée normalement ; mais si c'est une image de fond dans un cadre ("background-image"), l'astuce consiste a créer une image transparente de la même taille, de l'insérer et de rendre cette image cliquable avec le lien...

Une excellente façon d'apprendre comment coder en html, par exemple comment coder un lien texte cliquable ou l'insertion d'une image, il vous suffit de le réaliser grâce à l'éditeur de html que vous utilisez pour créer des articles puis de cliquer sur "HTML" pour voir le code produit. Reste ensuite, comme je vous ai dit, a travailler par copier/coller ou à l'imitation !!


Facile, non ?

Si vous avez un souci, laissez un message dans le forum, la communauté vous aidera bien volontiers.
Mais n'oubliez quand même pas de chercher par vous même !



Voilà, vous savez déja pas mal de choses, à vos blogs !



Ajouter un commentaire

Commentaire sans titre

08:35 , 19 avril 2007 .. Publié par ysa
Merci red, c'est génial de partager tout cela avec nous. Je m'y mets ce week-end !!
@ bientôt

Si , oui,ia

03:43 , 26 mai 2007 .. Publié par delia
tu est bien clair ,masi faudrait jouer avec.....il faudrait tellement du temps pour bien reussir.
Pas de desespoir...

{ Page précédente } { Page 185 sur 238 } { Page suivante }
ACCUEIL

Plan du site
Tous les articles

Rubriques

.Cinema, TV et Video
.En savoir plus sur Paris
.Image du jour à Paris
.Itinéraires et reportages
.La foire, le bazar, le marché
.Les bouquins
.Les évènements
.News et tutoriels du blog
.Paris sur le Web
.Textes, chansons, citations

Photos de Paris

Diaporama photos
Album photo (mon site perso)
Envoyer une carte postale
Cartes postales Internaute
Album photo Routard.com

A propos du blog

Me contacter
Le livre d'or
Fonds d'écran
bannières
Faire un lien




Qui suis-je ?

Mon book en ligne
Auteur I-voyages.net


Creative Commons License
Cette création est mise à disposition sous un contrat Creative Commons.




Top Liens

I-Voyages
Mac and Photo
Strogs prague pics
Arnaud Frich photo
EOS numérique
ROME, Ville jumelle de Paris
I-Trekkings
Photos de Voyage autour du monde

Amis Uniterre

delia
monette
dede
ysa
nulanhic
daniel
monyselia

Liens Paris utile

RATP
Office du tourisme Paris
Office du tourisme IDF
Mairie de Paris
L'Internaute Paris
Wikipedia, encyclo libre
Cityvox, Sorties et loisirs
Cartes Google Paris
All-Paris-Apartments
Réservations hotels online

Liens Web Paris

Photos only
Ticket de métro parisien
Paris Balades
Panamorama
paris 13e en images
Gavroche, père et fils

Références


Une sélection de la


Annuaire des carnets de voyage - Uniterre



Itinérances : Annuaire des Voyages et des Activités de Plein Air

Référencé par Blogtrafic

THE BOBs

Trafic Booster

Référencement gratuit dans Vitavous.com

Site de Tourisme, voyage recommandé par MonSéjour.com

Référencé sur Paname Ensemble !

Référencement en cours sur Blogonautes, les blogs francophones !

Open Directory Project at dmoz.org

Site recommandé par Ousurfer.com

http://www.wikio.fr/a_la_une

sélectionné par Freegaia

voyage vacances

Boutique livres de WRICe site est listé dans la catégorie Villes et villages : Paris Dictionnaire


le site
des photobloggers parisiens

BlogueParade.com - Annuaire des Blogues francophones

Echanges de liens

ch8art l'Annuaire du net
Blogarama - The Blog Directory
Annuaire Webmaster
Blogotop Actualités
Référencé sur Annuaire Blogs
Experts de la blogosphère
Annuaire des Blogs - inscrivez votre Blog !
Deco pour blog
Annuaire gratuit
Rêve lemanique
Annuaire Wozzor
Annuaire blogs
Annuaire de blogs
Paris sur BIG-annuaire
annuaire blogagence web

Listiblog: annuaire de blogs

Photography Directory by PhotoLinks

Autres échanges de liens, annuaires de sites et de blogs


Retour ACCUEIL