Les tuto 2 Demolite

Blog tuto, aide à la création et au design des blogs et sites internet, Montage photo, trucs et astuces, logiciels gratuits...

06 décembre 2010

Changer un bloc (une catégorie) de colonne

Posté par Demolite - Dans la catégorie Canalblog
Tags : , , , ,

Pour repérez ce que j'appelle un Bloc c'est à dire "Catégories, Liens, Derniers messages etc..." vous devez ouvrir votre page d'accueil, et vos grands yeux...

Voici à quoi ressemble le bloc des catégories :

<div class="title">Cat&eacute;gories</div>
<ul>
  <CBCategories>
  <li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
  </CBCategories>
</ul>

La première ligne correspond au titre.

Si vous modifiez Cat&eacute;gories entre les balises, un nouveau texte apparaitra à la place.

ex : <div class="title">Mes créations</div>

Maintenant si vous voulez changer de place le Bloc des catégories coupez le bloc de code ci-dessus et collez-le ailleurs.

Pour repérer vos colonnes dans la page d'accueil :

La colonne de gauche commence à partir de la ligne <body> et tout au bout de cette ligne vous verrez :

<div id="leftbar"><div class="navlinks">

Ce qui indique le début de la colonne de gauche.

Le corps du message (la partie centrale, le Content) commence avec cette ligne :
(Elle annonce aussi la fin de votre colonne de gauche...)

</div></div><div id="content"><div class="blogbody">

Et enfin la colonne de droite qui commence avec cette ligne :
(Elle annonce aussi la fin de la partie centrale...)

<$CBControlNavLinks$></div></div><div id="rightbar"><div class="navlinks">

Et qui se termine avec celle-la :

</div></div><div class="clear"> </div></div></body></html>

Voila...j'espère que c'est déjà un peu plus clair...

Je vous conseille de séparer les blocs de codes dans vos pages html, c'est plus facile ensuite pour se repérer et pour coller les scripts ou déplacer des blocs...

http://p8.storage.canalblog.com/81/54/359007/17393139.jpg

Quelques blocs :

Bloc des derniers messages :

<div class="title">Derniers messages</div>            
<ul>
  <CBLastPosts>
  <li><a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
  </CBLastPosts>
</ul>

Bloc Albums photos :

<div class="title">Albums photos</div>                        
<ul>
<CBAlbum>
<li><a href="<$BlogAlbumURL$>"><img src="<$BlogAlbumCoverURL$>" width="75" height="75" alt="<$BlogAlbumTitle$>" /></a><br /><a href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a></li>
</CBAlbum>
</ul>

Bloc des Archives :

<div class="title">Archives</div>                                     
<ul>
  <BloggerArchives>
  <li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
  </BloggerArchives>
  <li><a href="<$BlogArchiveFileName$>">Toutes les archives</a></li>
</ul>

Bloc des Derniers commentaires :

<div class="title">Derniers commentaires</div>         
<ul>
  <CBLastComments>
  <li><a href="<$BlogCommentURL$>"><$BlogCommentTitle$></a> sur <a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
  </CBLastComments>
</ul>

Bloc du Contactez l'auteur :

<div class="item">                                                      
<script type="text/javascript">
<!--
document.write('<a href="<$BlogOwnerNoSpamEmailLink$>">Contactez l\'auteur</a>'); // -->
</script>
</div>


Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici


« Accueil 1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41