|
Paris, ville lumière... | |
|
Découvrir et visiter Paname. Blog, infos, reportages, photos de Paris.
"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 165 sur 218 } { Page suivante } Comment j'ai modifié ce blog ? Tutorial pour modifier le modèle de votre blog...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 :
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 claireLes balises html indispensables sont en particulier :
J'ai supprimé des menus qui ne m'allaient pas et j'ai ajouté des menus :
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 ; margin-top: 0px; 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; Pour mettre mon titre en haut de page, à gauche, j'ai remplacé le mot "bottom" (en bas) par "top" : width: 700px; padding: 10px; background-image: url(http://redbook.free.fr/mesbannieres/paname.jpg); border: 3px solid #666666; border-top: none; vertical-align: top; vertical-align: topPour 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"> <a href="http://www.uniterre.com/" On fait un lien vers uniterre ceci forme aussi une excellente légende pour vos images vis à vis des moteurs de recherche ; target="_blank" veut dire que le lien s'ouvrira dans une nouvelle fenêtreborder=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 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 typesPour 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 { Page précédente } { Page 165 sur 218 } { 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 ParisDiaporama photosAlbum photo (mon site perso) Envoyer une carte postale Cartes postales Internaute Album photo Routard.com A propos du blogMe contacterLe livre d'or Fonds d'écran bannières Faire un lien 
Qui suis-je ?Mon book en ligneAuteur I-voyages.net Blog Monvoyage Météo Paris & heure
Top LiensI-VoyagesMaison et Compagnie Mac and Photo Strogs prague pics Arnaud Frich photo EOS numérique ROME, Ville jumelle de Paris Sur la route d'Israël Blogit Express Centre de recherche d'info Decisionnel Info Le site de Fabrice I-Trekkings Photos de Voyage autour du monde Hélène Lemeunier Amis Uniterremikanubis18delia monette dede ysa nulanhic daniel Monyselia maxETmam Liens Paris utileRATPOffice du tourisme Paris Office du tourisme IDF Mairie de Paris L'Internaute Paris Wikipedia, encyclo libre Cityvox, Sorties et loisirs Cartes Google Paris Liens Web ParisPhotos onlyTicket de métro parisien Paris Balades Panamorama RéférencesUne sélection de la 
 
Echanges de liensch8art l'Annuaire du net
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  
 
Autres échanges de liens, annuaires de sites et de blogs Je teste les Tags Paris
|
