Les codes HTML pour votre blog

Posted by : Unknown vendredi 3 janvier 2014

Comment ajouter des codes html pour ton blog?

Une liste des Code HTML que j'utilise dans mes blogs pour donner un peu de fantaisie, voici une liste des Codes HTML :

1.Pour Balises la tête de ton Blogger
choisi un bon titre qui doit exprimer l'idée générale du contenu qui le suit. C'est d'après son titre que les moteurs de recherche déterminent le sujet de votre article.Dans Blogger, il est désormais possible de désigner du texte comme l'"en-tête", de sorte que le moteur de recherche le reconnaisse comme étant un résumé du contenu de votre blog. Il existe ainsi quelques balises d'en-tête que vous pouvez ajouter à votre texte, et dont l'unique fonction est de définir la hiérarchie des différents en-têtes et d'appliquer la taille de police correspondante.

Par exemple, voici une liste d'en-têtes (du plus grand au plus petit).
Mon premier titre, présentant le thème général
Un sous-titre
Un sous-titre de sous-titre
2.Propriétés de l'image pour Blogger (Référencement)

Supposons que vous tenez un blog touristique et que vous arpentez les ruelles de Paris l'appareil photo à la main.

Votre blog est original et vous espérez que les lecteurs à la recherche d'adresses de fromagerie près de Notre-Dame auront accès à votre article détaillé sur la gastronomie.

Vous souhaiterez alors probablement que vos photos puissent également apparaître dans les résultats de recherche ?

Dans cette optique, vous pouvez désormais facilement ajouter des attributs "alt" et "title" à vos images.

Pour ce faire, cliquez sur une image dans votre éditeur d'articles, puis sélectionnez Propriétés. Une zone de texte s'affiche et vous permet d'ajouter des attributs "alt" et "title" à votre image.

Les attributs "Alt" correspondent à la description de l'image qui s'affichera pour les utilisateurs qui ne peuvent pas voir l'image (à cause de problèmes d'incompatibilité de navigateur ou de vue, par exemple).

L'attribut "tilte" permet de fournir une description plus longue de l'image.

Une fois que vous avez modifié les attributs "alt" et "title" dans l'éditeur d'articles, vous pouvez passer en mode d'affichage HTML pour vérifier les modifications que vous avez apportées à votre balise d'image.
3.Limiter affichage d’un widget à certaines pages

Comment limiter l’affichage de certains widgets à la page d’accueil, soit la page d’un libellé ou soit la page d’un article donné, mais encore limiter seulement aux pages dédiées aux articles.

Alors vous connecter à votre compte Blogger,aller sur modifier le code HTML et cocher sur "développer des modèles de gadgets".

Trouvez le widget dont vous voulez limiter l’affichage et respectez l’une des méthodes ci-après.

Utiliser la fonction recherche clavier CTRL+ F et Tape le nom du widget.
4. Widgets apparaissant seulement aux pages dédiées aux articles et jamais à la page d'accueil :

Si vous voulez qu’un widget n’apparaisse pas à la page d’accueil ni à une page pour libellé

et ni à celle des archives, Ajoutez :

<b:widget id='HTML1' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

CONTENU DU WIDGET

</b:if>

</b:includable>

</b:widget>

Ce widget n’apparaîtra qu’aux pages dédiés aux articles et non à la page d’accueil, d’archives

ou de libellés.

5.Widget affiché seulement à la page d’accueil
Pour n’afficher un widget qu’à la page d’accueil, ajoutez le code en rouge ci-dessous

à votre widget :

<b:widget id='HTML1' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

CONTENU DU WIDGET

</b:if>

</b:includable>

</b:widget>

6.Widget limité à une page donnée de votre blog
Si vous voulez limiter un widget à une page donnée de votre blog, voici le code

en rouge à ajouter dans celui-ci :

<b:widget id='HTML1' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.url == "URL_DE_VOTRE_PAGE"'>

CONTENU DU WIDGET

</b:if>

</b:includable>

</b:widget>

Remplacez URL_DE_VOTRE_PAGE par le lien de l’article où vous voulez voir le widget

s’afficher et ce widget ne s’affichera plus dans les autres pages du blog.
7. Widget limité à une page libellé

Si vous voulez limiter un widget seulement à la page d’un libellé donnée.

Pour cela, voici le code en rouge à ajouter à votre widget :

<b:widget id='HTML1' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.url=="http://nom de votre blog.blogspot.com/search/label/nom-du-libellé"'>

CONTENU DU WIDGET

</b:if>

</b:includable>

</b:widget>

Remplacez l’URL entière par l’URL de votre libellé et votre widget n’apparaîtra que sur la

page dédiée à ce libellé.

8.Comment intégrer Liens code URL, HTML, Forum en dessous articles Blogger

Je vous explique comment créer un widget, pour que vos visiteurs fassent un lien vers votre article. je viens installer ce widget ou gadget dans le blog . Le widget propose 3 codes ( URL de l'article, le code HTML pour intégrer dans des messages à un site, un lien Forum pour intégrer votre message à un forum)
alors suivez les étapes indiquées ci-dessous :
A.Connectez-vous à votre tableau de bord Blogger -> mise en page --> Modifier le code HTML

B.Faites défiler jusqu'à l'endroit où vous voyez </head>

C.Copiez le code ci-dessous et collez-le juste avant la </head>

Le code CSS :
<style type='text/css'>
.about-article{
background-color:#f9f9f9;
padding-bottom:5px;
padding-left:20px;
font-size:11px;
}
.about-article input{
background-color:#ffffff;
}
</style>
D. Maintenant trouverez ci-dessous le code:

<data:post.body/> avec cltr+F dons le tableau du votre Template
Copiez code ci-dessous et collez-le juste après la

<data:post.body/>

<b:if cond='data:blog.pageType == "item"'>

<div class="about-article"><p>Si vous trouvez cet article utile, faite un lien dans votre blog.</p><p class="noborder"><label for="aa-url">URL:</label><br /><input size="80" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-url" value="<data:post.url/>" /></p><p><label for="aa-forum">Lien HTML:</label><br /><input size="80" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-forum" value="<a href=&quot;<data:post.url/>&quot;><data:post.title/></a>" /></p><p>

<label for="aa-forum">Lien Forum:</label><br />

<p align='center'><a href='http://www.tousurblog.blogspot.com/' style='display:none;' target='_blank'>Widget par tousurblog de Web</a></p>

</div><br/>

</b:if>

NOTE : Ne changez rien dans le code ci-dessus.

E.Enregistrez votre modèle et vous avez terminé.
9.Comment ajouter des bordures aux images Blogger

Premier chos Login à votre tableau de bord Blogger mise en page Modifier le code HTML

AFaites défiler jusqu'à l'endroit où vous voyez balise .

B.Copier le code html ci-dessous et collez-le juste avant la balise .

<style type='text/css'>

#inner-borders a img, #inner-borders a { border: none; overflow: hidden; float: left; }

#inner-borders a:hover { border: 3px solid #0000ff; }

#inner-borders a:hover img { margin: -3px; }

</style>

NOTE: Vous pouvez changer la couleur des bordures, la taille de la bordure, la marge ...

Mais les deux tailles de la bordure et la marge doit avoir une même valeur numérique.

C.Ensuite, ajouter vos images ci-dessous.

<div id="inner-borders">

</div>

Et enregistrer.
1O.Comment faire pour afficher Date et heure dans la barre de titre?

Je vous aider à afficher la date et l'heure pour les visiteurs qui viennent sur votre site ou blog voit l'heure et la date s'affiche dans la barre.

Pour ajouter cette fonctionnalité à votre site ou blog, il suffit de suivre les étapes ci-dessous...

A.Login à votre tableau de bord Blogger et aller au Format -> Éléments de la page.

B.Cliquez sur Ajouter un "gadget dans la barre latérale".

C.Sélectionnez "HTML / Javascript" et ajouter ce morceau de code html donné ci-dessous

<Script Language="JavaScript" Type="Text/JavaScript">

var mytime1=24;

function mytime2() {

mytime3=mytime1+6;

mytime4=mytime1+mytime3;

timexx=mytime1+mytime3+mytime4;

timexxx=timexx/mytime4*mytime1; twelfth=mytime4*mytime1/12*mytime3;

timexxxx=mytime1+mytime3/timexxx-16*timexx;

timexxxxx=twelfth*(mytime1-5)/mytime4+timexx;

timexxxxxx=timexxxxx/timexxxx+mytime1*mytime4-timexx;

mytime5=(timexxxxxx+mytime1/mytime4*timexx+mytime3*timexxx)/twelfth+timexxxxx-timexxxxxx-1;

mytime6=Math.floor(mytime5);

mytime8=mytime6*mytime3/2+100;

mytime7 = window.setTimeout("mytime2()", mytime8);

var mytime9 = new Date();

var mytime10= mytime9.toLocaleString();

document.title = mytime10;}

function op(){mytime2()}

window.onload=op;

</script>

et cliquez sur Enregistrer.
11.Utiliser les balises HTML

<!DOCTYPE...>

Elément facultatif qui désigne le type de document. Ce place en haut d'un document donc hors du Body et Head.

ex: <!doctype html public>

<A>...</A>

S'associe avec plusieurs autres éléments comme HREF par exemple pour les liens.

ex: <A HREF="http://tousurblog.blogspot.com/">

<ACRONYM>...</ACRONYM>

Utilisé pour signaler un sigle.

ex: <ACRONYM title=" Federal Bureaucratic

Investigation">FBI </ACRONYM>

<ADDRESS>...</ADDRESS>

Infos sur l'auteur de la page web.

<APPLET>...</APPLET>

Effectue un applet java.

<B>...</B>

Pour le texte en caractère gras.

<BASE>

Définit le répertoire de référence pour les url.

<BASEFONT>

Définit la police de caractère du document.

<BGSOUND>

Comme son nom l'indique tout ce qui concerne le son.

<BIG...</BIG>

Affiche le texte dans une police plus grosse.

<BLINK>...</BLINK>

Ne marche qu'avec Netscape. Fait clignoter du texte.

<BODY>...</BODY>

Tout ce que peut conporter votre site.

<BR>

Force une rupture de ligne un racourci shift + entrée.

<BUTTON>...</BUTTON>

Créer un bouton.

<CENTER>...</CENTER>

Centre un objet ciblé.

<DEL>...</DEL>

Cette commande marque les parties d'un document qui ont

été supprimées.

<EMBED>

Pour mettre un objet mutimédiat.

ex : <EMBED src="kai.mov">

<FONT>...</FONT>

Spécifie la police utilisé.

<FORM>...<FORM/>

Ce tag est pour les formulaires.

<FRAME>...</FRAME>

Definition d'un cadre.

<HEAD>...</HEAD>

Définit la section d'en-tête d'une page.

<I>...</I>

Met en italique le texte.

<IMG>

Insertion d'une image.

<MARQUEE>...</MARQUEE>

Texte défilant.

<META>

Définit les propriètés d'un document (auteur, date...).

<NOFRAMES>...</NOFRAMES>

Ceci est tilisé pour les navigateurs qui 'acceptent pas

les frames.

<NOSCRIPT>...</NOSCRIPT>

La même chose pour les scripts.

<OBJET>...</OBJET>

Insertion d'un objet dans un document.

<SCRIPT>...</SCRIPT>

Insertion d'un script dans un document.

<SMALL>...</SMALL>

Police plus petite.

<STRIKE>...</STRIKE>

Le texte est barré.

<STRONG>...</STRONG>

Caractère gras.

<STYLE>...</STYLE>

Mise en forme d'un document, appel un fichier css.

<SUB>...</SUB>

Util pour mettre un indice.

<SUP>...<SUP>

Util pour mettre un exposant.

<TABLE>...</TABLE>

Mise en forme d'un tableau.

<TD>...</TD>

Contenu d'une cellule.

<THEAD>...</THEAD>

En-tête d'un tableau.

<TITLE>...</TITLE>

Titre du document.

<U>...</U>

Souligne le texte.
12.Ouvrir un lien dans une nouvelle fenêtré

Ouvrir les liens texte et image dans une nouvelle fenêtré (ou anglet de navigation) dans votre Blog Blogger?

1. Il suffit d’ajouter au lien en HTML l’attribut :

target="_blank"

Comment ça marche :

Pour ouvrir un lien texte dans une nouvelle fenêtre, il suffit d'ajouter

target ="_blank"

Qui donne
< a href="http://www.tousurblog.blogspot.com" target="_blank" >tousurblogdeweb< /a >

2.Pour ouvrir une image dans une nouvelle fenêtre :

Il faut ajouter

target ="_blank"

Qui donne

< a href="http://www.tousurblog.blogspot.com/URL" >< img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7TaR0pfNnr-1UZ-qsk9HmXJ_QV4x9qCoFfx32YLpbWYuLRc5Qy3mdZ7aiNIa_-PL_3p7gtE1fERTOIp-6ETSERyDXDxXDpiE_CosZuKh5uCyOEDPGNFhSLjTBbfUCHAyoTa65oYgj_Sz/s400/money-128.png"/ target="_blank" >

13.Comment mettre un texte defilant sur son blog
Il faut aller sur "Mise en page" En suite "Element de page "

Ajouter un élémént: un HTML/JavaScript

Et Copier/Coller ce code :
<span style="text-decoration: underline;"> <div style="FONT-SIZE: 18px; LEFT: 50%; MARGIN-LEFT: -435px; WIDTH: 575px; COLOR: #000000; FONT-FAMILY: trebuchet; POSITION: absolute; TOP: 20px; HEIGHT: 450px"><marquee width="100%" scrollamount="5"><strong>TEXTE <strong></strong></strong></marquee></div></span>

Note : la couleur du texte est noir mais pour la changer repéré #000000 et choisissais votre couleur ici et évidement taper votre texte à la place de "TEXTE "

En faite on utile les Balises Blanches
14.Mettre un message dans un lien
Un Exemple: tousurblogdeweb

Copier/coller le code HTML et changer "http:...." , "tousurblog" "tousurblogdeweb" et "Le site qui vous aide"

<span style="text-decoration: underline;"><A HREF="http://tousurblog.blogspot.com" STYLE="color:#000099" onMouseOver="this.style.color='#FF0000';this.innerText='Le site qui vous aide'" onMouseOut="this.style.color='#000099';this.innerText='tousurblog'">tousurblogde

web</A>

15.Créer une liste sur un blog ou Blog spot

Le code pour créer facilement un menu ou une liste sur une page du blog.

<br /><h1>VOTRE TITRE ICI</h1>

<li><a href="#" accesskey="VOTRE LIEN 1 ICI">VOTRE TITRE 1</a></li>

<br />

<li><a href="#" accesskey="VOTRE LIEN 2 ICI">VOTRE TITRE 2</a></li>

<br />

<li><a href="#" accesskey="VOTRE LIEN 3 ICI">VOTRE TITRE 3</a></li>

<br />

<li><a href="#" accesskey="VOTRE LIEN 4 ICI">VOTRE TITRE 4</a></li>

<br />

<li><a href="#" accesskey="VOTRE LIEN 5 ICI">VOTRE TITRE 5</a></li>

</ul>

16.Souligner avec Blogger

Petite astuce pour ceux qui ne connaissent pas l'HTML et qui veulent souligner des mots ou des phrases dans leurs messages :

Cliquez sur l'onglet "Modifier le code HTML" (juste à côté de rédiger) Et ajoutez ceci :

<span style="text-decoration: underline;">TEXT</span> ou<u>TEXT</u>

Remplacez ensuite TEXT par les mots que vous souhaitez souligner.

Texte barré avec Blogger

Pour barrer un ou plusieurs mots dans vos messages :Cliquez sur l'onglet "Modifier le code HTML" (juste à côté de rédiger) Et ajoutez ceci :

<span style="text-decoration: line-through;">mots barrés</span> ou <strike>TEXT</strike>

Il suffit maintenant de remplacer TEXTE par les mots que vous souhaitez barrer.

Ce qui donne : tousurblogdeweb OU tousurblogdeWeb
17.Code Texte : BALISE MARQUEE

Faites un copier/coller des codes pour avoir l'effet et remplacer "TEXTE" par le votre nome du bloge par exemple :

<marquee>TEXT</marquee>

<marquee direction="right">TEXT</marquee>

<marquee behavior="alternate">TEXT</marquee>

<marquee direction="up">TEXT</marquee>

<marquee direction="down">TEXT</marquee>

<marquee direction="up" behavior="alternate">TEXT</marquee>

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">TEXT</marquee></marquee>

<marquee behavior="alternate" width="10%">>></marquee>TEXT<marquee behavior="alternate" width="10%"><<</marquee>

<span><marquee direction="left" style="background:BLUE">TEXT</marquee></span>

<marquee style="border:BLUE 2px SOLID">TEXT</marquee>

<marquee behavior="alternate"><marquee width="150">LeBloGGersDuNeT</marquee></marquee>

<marquee behavior="alternate" direction="up" scrollamount="2" scrolldelay="65" height="80" style="Text-align;filter:wave(add=0,phase=1, freq=1,strength=15,color=.FFFFFF)"><center>TEXT<br/>TEXT</center></marquee>

18.COMMENT CRÉER UNE PARAGRAPHE ?
Voici un exemple simple :
<!DOCTYPE html>
<html>
<head>
<style>
p {display:inline}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
remplacer le élément en rouge avec votre texte
le texte afficher comme ça :
This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph