03 décembre 2010
Centrer un bloc dans une colonne
Voici comment centrer un bloc ou un lien dans une colonne.
Vous avez besoin de la balise <center> </center>
Votre bloc ou votre lien doit se trouver entre les 2 balises.
Comme ceci :
<center>
<CBOwner>
<BlogOwnerPictureURL>
<div class="image"><a href="<$BlogOwnerProfileURL$>"><img src="<$BlogOwnerPictureURL$>" border="0" /></a></div>
</BlogOwnerPictureURL>
</CBOwner>
</center>
Même chose pour centrer un lien ou une image, placez la balise <center> au début et la balise </center> à la fin.
<center><a href="http://lestuto2demolite.canalblog.com/">Les tuto 2 Demolite</a></center>
Ajouter ou supprimer un bloc dans une colonne de votre blog
Voici la liste de tous les blocs :
Il suffit de copier le bloc et de le coller dans votre page d'accueil et dans les autres pages html si vous le souhaitez.
Pour supprimer un bloc, sélectionnez le bloc et supprimez-le tout simplement.
Le nom des blocs se trouve entre la balise <div class="title">Nom des blocs</div>
<div class="title">Derniers messages</div>
<ul>
<CBLastPosts>
<li><a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastPosts>
</ul>
<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>
<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>
<div class="title">Catégories</div>
<ul>
<CBCategories>
<li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
</CBCategories>
</ul>
<CBFeeds>
<BlogFeedHeader><div class="title"><a href="<$BlogFeedURL$>"><$BlogFeedTitle$></a></div></BlogFeedHeader>
<$BlogFeedHeadLines$>
</CBFeeds>
<div class="title">Auteurs</div>
<ul>
<CBMembers>
<li><a href="<$BlogMemberProfileURL$>"><$BlogMemberAuthorNickName$></a></li>
</CBMembers>
</ul>
<div class="title">Navigation</div><$BlogQuickLinks$>
<div class="title">Tags</div>
<ul class="tagcloud">
<CBTags>
<li><a href="<$BlogTagURL$>" style="font-size:<$BlogTagFontSize$>;" title="<$BlogTagCount$> message(s)" rel="tag"><$BlogTagName$></a></li>
</CBTags>
</ul>
<CBCalendar><$BlogCalendar$></CBCalendar>
<form name="sengine" id="sengine" action="<$CBSearchEngineSubmitURL$>" method="get">
<input type="text" name="q" id="sengine_q" value="" />
<input type="hidden" name="bid" id="sengine_bid" value="<$BlogId$>" />
<input type="submit" name="searchbtn" id="sengine_searchbtn" value="Rechercher" />
</form>
<BloggerFriendLinks><BlogFriendLinkHeader>
<div class="title"><$BlogFriendLinkCategoryName$></div>
<ul>
</BlogFriendLinkHeader>
<li><a href="<$BlogFriendLinkURL$>"><$BlogFriendLinkName$></a></li>
<BlogFriendLinkFooter>
</ul>
</BlogFriendLinkFooter> </BloggerFriendLinks>
<BlogSiteFeed>
<div class="item"><a href="<$BlogSiteFeedURL$>" title="S'abonner à ce blog (messages)">Flux RSS des messages</a></div>
<div class="item"><a href="<$BlogCommentsFeedURL$>" title="S'abonner à ce blog (commentaires)">Flux RSS des commentaires</a></div>
</BlogSiteFeed>
<CBOwner>
<BlogOwnerPictureURL>
<div class="image"><a href="<$BlogOwnerProfileURL$>"><img src="<$BlogOwnerPictureURL$>" border="0" /></a></div>
</BlogOwnerPictureURL>
</CBOwner>
<div class="item">
<script type="text/javascript">
<!--
document.write('<a href="<$BlogOwnerNoSpamEmailLink$>">Contactez l\'auteur</a>'); // -->
</script>
</div>
<div class="title">Derniers commentaires</div>
<ul>
<CBLastComments>
<li><a href="<$BlogCommentURL$>"><$BlogCommentTitle$></a> sur <a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastComments>
</ul>
<div class="title">Newsletter</div><form name="newsletter" id="newsletter" action="<$CBNewsletterSubmitURL$>" method="post" target="_blank">
<input name="email" id="email" value="email" type="text" onfocus="this.select();" />
<input name="submit" value="M'abonner" type="submit" />
</form>
Anti clic droit
Ou plutôt comment désactiver le clic droit et supprimer la possibilité de sélectionner du texte ou des photos sur votre blog.
Ce qui a pour effet d'empêcher la copie...(enfin, en apparence...)
Sachez que celui ou celle qui s'y connait un peu pourra tout même récupérer vos images...mais ça en découragera un certain nombre on va dire...
Copiez-collez ce script avant la balise </head> de votre page d'accueil et sur toutes les autres pages html de votre blog :
<!-- DEBUT DU SCRIPT -->
<script language="JavaScript1.2">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
function ejs_nodroit()
{
alert('Clic droit interdit');
return(false);
}
document.oncontextmenu = ejs_nodroit;
</script>
<!-- FIN DU SCRIPT -->
Rediriger vos visiteurs vers une nouvelle adresse
Vous avez changez d'adresse...ce script est pour vous !
Vos visiteurs seront automatiquement dirigés de l'ancienne adresse à la nouvelle ou tout simplement sur la page de votre choix.
Copiez-collez le script suivant sur la page d'accueil de votre blog avant la balise </head>
<META HTTP-EQUIV="refresh" CONTENT="10; URL=Adresse de votre nouveau blog">
Mettez dans le script ci-dessus l'adresse de votre nouveau blog.
Le 10 correspond au temps en secondes de redirection, ça laisse le temps aux visiteurs de lire éventuellement le petit message que vous aurez laissé en première page bien en évidence pour les avertir de cette redirection...
Vous pouvez mettre ce script sur la page de votre choix...profil etc...
Ouvrir les liens dans une nouvelle page
Avec cette balise, tous les liens de votre blog s'ouvriront dans une nouvelle page.
<base target="_blank" />
Il suffit de coller cette balise avant la balise </head> dans vos pages Html.
Ecrire dans vos colonnes
Pour mettre du texte dans vos colonnes, copiez le code ci-dessous et collez-le dans votre feuille de style comme sur la capture.
#texte {
border-style: none;
font-family: Georgia;
color: #00ff00;
font-size:medium;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: left;
}
Vous pouvez changer la police en modifiant font-family vous mettez Arial à la place de Georgia, la couleur du texte en mettant un autre code couleur ect...
Une fois fait, vous pouvez valider en bas de page.
Ensuite il suffit d'écrire votre texte dans le code ci-dessous entre les balises et de le coller dans votre page d'accueil ou une autre page d'ailleurs...à l'endroit où vous voulez qu'il apparaisse.
Voici 2 exemples :
Dans le premier, votre texte sera centré dans la colonne grâce à la balise <center></center>
<div id="texte"><center>Votre texte ici</center></div>
Si vous voulez un texte qui démarre à gauche, ne mettez pas la balise <center> votre texte ce place à gauche automatiquement et vous ajoutez un <br> pour chaque retour à la ligne.
Si vous ne mettez pas la balise <br> le retour à la linge est automatique en fonction de la largeur de votre colonne.
<div id="texte">Votre texte ici<br>suite du texte à la ligne<br>encore du blabla mon texte est très long</div>
Vous devez maintenant coller le code dans votre page d'accueil là ou vous voulez que votre texte apparaisse.
Comme ceci :
Dans cet exemple, le texte apparaitra dans la colonne de gauche au dessus du profil.
Pour mettre un lien à la place du texte :
<div id="texte"><a href="Adresse du lien">Mon texte</a></div>
02 décembre 2010
Lire la suite...
Voici comment cacher la suite d'un texte très long, il suffit de cliquer sur Lire la suite pour que le reste du texte apparaisse.
Commencez par ouvrir la feuille de style et collez tout en bas le code suivant :
#hidden {display:none}
Ouvrez un Nouveau message et écrivez votre texte comme d'habitude et passez le en mode Html
Puis collez le code suivant au tout début de votre texte avant la première lettre.
<script ="type/css">
#hidden {display:none}
</script>
Ensuite, à l'endroit où vous voulez que le Lire la suite apparaisse, collez le code suivant :
<p><a href="#nogo" onclick="document.getElementById('hidden').style.display = 'block';
this.style.display = 'none';">Lire la suite...</a></p>
Puis ajoutez ce code devant la première lettre du texte à cacher :
<p id="hidden">
Et pour finir vérifiez qu'il y a bien cette balise </p> à la fin de votre texte.
Votre message en mode Html doit ressembler à ça :
(Les codes en rouge et le texte en vert)
Entre ces 2 balises : <p id="hidden"> </p> Il ne doit pas y avoir de balise <p> et </p>.
Vous devez les remplacer par <br> et </br> pour faire vos retours à la ligne.
Lorsque vous repassez en Mode texte, la suite de votre message apparait, mais lorsque vous publiez le message, elle ne sera plus visible...
Si vous voulez mettre plusieurs Lire la suite sur la même page, vous devez mettre un #hidden différent par texte :
#hidden1, #hidden2, #hidden3
Que vous devez ajouter dans la feuille de style comme pour le premier.
Vous pouvez changer le Lire la suite et le remplacer par le texte de votre choix.
<p><a href="#nogo" onclick="document.getElementById('hidden').style.display = 'block';
this.style.display = 'none';">Lire la suite...</a></p>
Modifier un fichier Js
Certains scripts contiennent des fichiers Js,
<script src="http://p7.storage.canalblog.com/77/88/198257/13901288.js" type="text/javascript">
Copiez cette adresse et collez-la dans la barre d'adresse de votre navigateur pour l'ouvrir.
Fichier / Enregistrer sous pour l'enregistrer sur votre pc.
Ensuite vous devez cliquer droit sur le fichier js et choisir l'option ouvrir avec le bloc-note.
Le bloc note s'ouvre avec le contenu du fichier js, que vous pouvez maintenant modifier.
Enregistrez et Fermez le bloc-notes.
Pour récupérer l'adresse de votre fichier Js, ouvrez un Nouveau message et cliquez sur l'icône Insertion d'un fichier
Passez le message en mode Html pour récupérer l'adresse du fichier Js.
Voila, il ne vous reste plus qu'à coller cette adresse à la place de l'ancienne dans votre script.
Faire une copie de vos page Html !
Voici comment accéder à vos pages html...page d'accueil, page d'un message, feuille de style etc...puis d'en faire une copie avant d'y faire la moindre modification, vous les garderez précieusement...et serez bien content de remettre la main dessus en cas de problème...
Allez dans l'onglet Apparence puis cliquez sur Editer les fichiers de ce modèle
Ensuite, vous voila devant votre fameuse page d'accueil...
Pour accéder aux autres pages, sélectionnez-les tout simplement dans le menu.
Et enfin pour copier le contenu de la page, placez votre curseur n'importe où dans la page et faites Ctrl+A ce qui va sélectionner toute la page, ensuite il faut la copier en faisant Ctrl+C et pour finir, ouvrez le bloc-notes et collez en faisant Ctrl+V
Voila... je vous conseille de vous servir du Ctrl+A car très souvent en sélectionnant vous même avec votre curseur, vous en oubliez souvent au passage.
Si vous êtes plus à l'aise avec le copier-coller rien ne vous pêche de faire un clic droit et de copier-coller...mais servez vous du Ctrl+A j'insiste !
Maintenant vous devez coller le contenu dans le bloc-notes qui se trouve dans Démarrer / Programmes / Accessoires / Bloc-notes
Enregistrez les copies de vos pages dans un dossier spécial au mon de votre blog, pour les retrouver facilement en cas de problème.
Mettre un pied de page sur votre blog
Un pied de page, comme son nom semble l'indiquer, c'est un truc qui se trouve tout en bas, comme vos pieds...c'est à l'opposé du head en fait...de votre tête quoi ;o)
Alors si vous voulez ajouter un pied de page avec un petit message pour dire bye bye à vos gentils visiteurs, suivez le guide...
Commencez par créer avec Photofiltre votre pied de page, il doit faire la même taille en largeur que votre #Container pour être bien centré.
Collez le code ci-dessous dans votre feuille de style entrez la taille de votre image et son adresse puis validez.
#pied {
float: left;
width: 1000px;
height: 180px;
margin-right: auto;
margin-left: 0px;
background: url(http://Adresse de mon image.gif) no-repeat 0% 0%;
display: block;
overflow: hidden;
}
Ouvrez ensuite votre page d'accueil, descendez tout en bas sur cette ligne :
</div></div><div class="clear"> </div></div></body></htlm>
Puis ajoutez les codes en blanc dans la ligne comme ceci :
</div></div><div class="clear"> <div id="pied"><div class="pieds"></div></div></div></div></body></htlm>
Visualisez, votre pied de page est en place vous pouvez valider.
Ajoutez aussi ces codes sur vos autres pages Html.
« 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
