02 décembre 2010
Cadre css pour vos blocs et titres de vos articles
Pour les blocs dans vos colonnes ça peut donner ça :
Pour le titre des articles ceci :
Il est possible d'ajuster la taille du cadre en largeur et aussi d'ajouter un fond et aussi une image comme dans le modèle ci-dessus, tout simplement allant ajoutant deux trois petites choses dans la feuille de style.
Voici comment faire :
Ouvrez votre feuille de style et collez le bloc suivant :
#moncadre {
background: url("http://Adresse de l'image de fond.jpg") no-repeat;
width:350px;
margin-left: 50px;
padding:20px;
background-color:#707070;
border-left:1px solid #C4C4C4;
border-right:1px solid #C4C4C4;
border-bottom:1px solid #C4C4C4;
border-top:1px solid #C4C4C4;
}
Ce bloc est renseigné pour afficher le cadre comme dans le modèle, à vous d'y mettre l'adresse de votre image et les codes couleur, la largeur du cadre avec le witdh etc...(une fois que vous aurez terminé le tuto).
En vous aidant de Web developer si vous le possédez.
Ouvrez votre page d'accueil puis descendez sur la balise : <h3><$BlogItemTitle$></h3> qui correspond au titre de vos messages, en vous aidant de Ctrl+F.
Puis ajoutez les codes suivants <div id="moncadre"> </div> comme ci-dessous :
<div id="moncadre"><h3><$BlogItemTitle$></h3></div>
Vous pouvez visualiser avant de valider, le titre de vos articles est bien encadré.
Pour encadrer les titres des blocs dans vos colonnes, c'est exactement la même chose, sauf que vous devez ajouter un nouveau bloc dans la feuille de style et lui attribuer un numéro pour le différencier de l'autre...
Comme ceci : (Dans ce modèle j'ai remplacé l'image par un fond uni).
#moncadre1 {
background-color:#707070;
width:350px;
margin-left: 50px;
padding:20px;
border-left:1px solid #C4C4C4;
border-right:1px solid #C4C4C4;
border-bottom:1px solid #C4C4C4;
border-top:1px solid #C4C4C4;
}
Même chose dans la page d'accueil avec le code <div id="moncadre1"> </div> on lui ajoute aussi le même numéro, comme ceci :
<div id="moncadre1"><div class="title">Derniers messages</div></div>
<ul>
<CBLastPosts>
<li><a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastPosts>
</ul>
Voilà, vous pouvez ajouter autant de blocs (dans la feuille de style) que vous voulez pour encadrer de façon différente vos blocs, Titres ou encore la date de vos messages, en fait vous pouvez encadrer tout ce que vous voulez du moment que vous placez les codes suivants au bon endroit dans votre page d'accueil.
<div id="moncadre1">Ici la balise de ce que vous voulez encadrer</div>
<div id="moncadre2">Ici la balise de ce que vous voulez encadrer</div>
<div id="moncadre3">Ici la balise de ce que vous voulez encadrer</div>
Une dernière précision, vous devez placer ces codes également sur la page d'un message et celle des archives sinon les cadres apparaitront seulement sur votre page d'accueil...
Si vous aviez déjà encadré vos titres, pensez à mettre le border-width à 0px dans les blocs correspondants dans votre feuille de style.
Encadrer vos articles avec un cadre scintillant
Repérez la balise <blogger> dans votre Page d'accueil , puis collez en dessous les codes suivants :
<table cellspacing="8" cellpadding="1" width="590" align="left" background="http://Adresse carde scintillant.gif" border="3">
<tbody><tr><td background="http://p7.storage.canalblog.com/75/65/251752/31038847.jpg">
L'adresse en gris correspond au cadre scintillant, c'est à dire que ça clignote comme un arbre de noël...
L'adresse
en vert correspond au fond du cadre, la page de vos articles...vous n'êtes pas obligés de mettre un fond sous forme d'image,
si vous voulez un fond uni, collez l'adresse d'un fond uni à la place avec la couleur de votre choix.
Pensez à modifier le width="590" en fonction de la largeur de votre #Content.
Ajoutez les balises suivantes :
</td></tr></tbody></table>
Au dessus de la balise <div class="itemfooter"> comme sur la capture ci-dessus.
Voilà...c'est tout.
Encadrer vos articles
Pour encadrer vos articles de la date jusqu'au pied de message c'est pas bien compliqué...
Commencez par coller dans votre feuille de style le bloc suivant, qui permet la mise en forme de votre cadre :
.message tbody td {
background: #000000;
width: 500px;
border:5px #FFFFFF ridge;
}
Si votre #Content fait 500px mettez le width à 500px.
Pour le reste, à vous de changer les codes couleurs ou encore ajouter une image de fond...(voir plus bas).
Ensuite ouvrez votre Page d'accueil et repérez la balise <Blogger>.
Juste en dessous, collez les balises suivantes :
<table class="message">
<tbody>
<td>
Puis descendez sur la balise </blogger> et collez les balises suivantes juste au dessus :
</td>
</tbody>
</table>
Comme sur la capture :
Ce qui permettra d'afficher le cadre autour de tous vos articles, vous devez installer ces codes dans la page des archives et aussi dans la page des messages, sinon seule votre page d'accueil aura ses articles encadrés.
Vous pouvez ensuite ajouter une image de fond dans votre cadre en ajoutant la ligne ci-dessous dans le bloc de votre feuille de style et en y collant l'adresse d'une image comme indiqué :
Background: url(http:Adresse de l'image de fond.jpg);
Cette ligne permet de changer la couleur, l'épaisseur et le style du cadre : border:2px #FFFFFF solid;
.message tbody td {
width: 500px;
border:2px #FFFFFF solid;
Background: url(http:Adresse de l'image de fond.jpg);
}
Encadrer le titre de vos articles
Voici comment encadrer le titre de vos messages.
Ouvrez votre feuille de style et descendez sur le bloc suivant :
.blogbody h3 {
font-family: Georgia, Times New Roman, Times, serif;
color: #4D191B;
font-size: medium;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #000000;
margin-bottom: 10px;
padding: 0px;
}
Vous devez remplacer les "none" des lignes border, par "solid" pour un cadre plein, ou "dotted" pour un cadre en pointillés, ou encore "ridge" pour un cadre en relief..."dotted" "outset" "inset" "double" "groove" (compatibilité à vérifier d'un navigateur à l'autre...)
Ajoutez un code couleur si il n'y en a pas, sur la ligne border-color: #000000;
Vous pouvez épaissir le cadre avec la ligne border-widht:1px; en augmentant la valeur.
Mettre de jolies bordures à son blog
A la demande de Karipuce, voici comment mettre de jolies bordures à son blog comme ici : http://makeitsweet.canalblog.com/
Dans un premier temps vous devez modifier votre bannière...soit vous refaite une bannière en lui ajoutant des bordures, soit vous ajoutez des bordures à votre bannière actuelle, comme ceci :
Ensuite il faut "fabriquer" les bordures de #container...
Allez dans votre feuille de style pour relever la taille de votre #container...votre image avec les bordures doit faire la même taille.
Dans cet exemple notre #container fait 960px...notre bannière aussi d'ailleurs.
Ouvrez Photofiltre et faites Nouveau pour obtenir un rectangle blanc qui doit faire 960x26 px dans cet exemple, la hauteur n'a pas d'importance, tout dépend de la taille de votre motif, il va se répéter sur toute la hauteur.
Ensuite vous fabriquez vous même des bordures ou vous en collez des toutes faites que vous trouverez sur le net avec une petite recherche d'image sur Google par exemple...
Pensez à mettre la couleur de votre fond d'écran sur les extrémités de votre image pour que les bordures se confondent avec votre fond d'écran (même chose pour la bannière).
Vous trouverez le code couleur de votre fond d'écran dans la feuille de style :
Si vous avez une image en fond d'écran, vous devez rendre les extrémités transparentes.
Maintenant allez sur votre feuille de style et ajoutez cette ligne à votre #container :
background: url("http://Adresse de votre image container avec les bordures.jpg") repeat 0% 0%;
Ajoutez ensuite ce bloc au dessus ou en dessous du bloc #leftbar :
#leftdentelle {
float: left;
width: 25px;
background-color: ;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
Vous devez maintenant remplacer l'adresse de votre bannière par l'adresse de la nouvelle bannière avec les bordures.
Dernière étape, ouvrez votre page d'accueil et collez ces codes ci-dessous sur la ligne du <body> juste après la balise </h2> comme sur la capture :
</div> <div id="leftdentelle"> <div class="leftdentelle"> </div>
Voilà, c'est fini...
Mettre un carillon sur votre blog
Voici comment mettre un carillon sur votre blog et comment le positionner en haut à droite de l'écran, sans qu'un vilain pavé bleu apparaisse en doublon dans une des colonnes...
Avec les scripts que donne le site Kurukuru je n'arrivais pas à mettre le carillon en haut sans avoir un pavé bleu dans ma colonne, alors j'ai bidouillé le fichier Js qui est dans le script et en supprimant dedans l'adresse de l'image et bien, le pavé bleu disparait...
Allez sur le site Kurukuru...(rien que le nom m'amuse !)
Plusieurs possibilités s'offrent à vous...
Soit vous copiez le script ci-dessous et vous le collez dans une de vos colonnes, (vous devez être en mode avancé) c'est tout bête vous n'avez pas besoin de moi pour ça...
Avec ce modèle, vous aurez le carillon comme il est présenté au dessus dans une de vos colonnes.
Soit vous voulez que votre carillon soit en haut à droite de votre blog et dans ce cas il faut ruser...
<script type='text/javascript' src='http://parts.kuru2jam.com/js/SWFLayer.js'></script>
<script type='text/javascript' src='http://parts.kuru2jam.com/js/wind_chime.js'></script>
Copiez le script et collez le dans un message en mode Html, apparaitra pas sur votre page d'accueil.
Validez, le carillon s'affiche en haut à droite de votre blog.
Tant que votre article avec le carillon reste en page d'accueil, le carillon reste aussi...une fois qu'il passe dans les archives, le carillon sonnera dans les archives, il faut remettre un article en page d'accueil avec le cariollon dedans, le plus simple est tout de même de passer en mode avancé et de mettre le carillon dans une de vos colonnes...
Pour modifier le fichier Js et supprimer le pavé bleu dans la colonne, copiez puis collez l'adresse du fichier Js dans la barre de votre navigateur.
Le contenu s'ouvre dans la page, vous devez maintenant l'enregistrer sur votre pc pour pouvoir le modifier.
Pour ouvrir le fichier Js cliquez droit dessus, Ouvrir avec, puis Bloc-notes.
Cette page s'ouvre :
Supprimez cette ligne de code, c'est l'adresse du pavé bleu...comme ça il ne pourra plus s'afficher...
Fermez et enregistrez.
Maintenant vous devez récupérer l'adresse de ce fichier que vous venez de modifier et mettre son adresse dans le script du départ...
Ouvrez un Nouveau message, puis importez le fichier Js en passant par Insertion d'un fichier et passez le message en mode Html pour récupérer l'adresse.
Collez l'adresse dans le script ci-dessous à la place de l'adresse en bleu.
Voilà, vous n'avez plus qu'à coller ce script dans une de vos colonnes pour que le carillon sonne dans le haut de votre blog...et sans le pavé bleu !
Changer la police du titre de vos blocs
Il s'agit du titre de vos catégories : les Derniers messages, Newsletter, Derniers commentaires etc...
Il suffit de changer la police dans le bloc Navlinks title qui se trouve dans la feuille de style...
Ouvrez la feuille de style, descendez au bloc suivant :
Il ne vous reste plus qu'à remplacer la police en place "Century Gothic" par celle de votre choix.
01 décembre 2010
Mettre en valeur du texte dans un article
Lorsque vous écrivez un article, vous pouvez avoir envie de mettre en avant un passage, ou ajouter en fin d'article une astuce bien visible...
Astuce : Voilà comment différencier une zone de texte et aussi comment la mettre en valeur...
Commencez par copier-coller dans la feuille de style, le bloc ci-dessous qui va permettre l'affichage de la zone d'écriture :
.code {
width: 700px;
border: 1px dashed #00FFFF;
margin-left: 1em;
padding: 5px 5px 5px 10px;
background: #000000;
}
Le bloc s'appelle code, car vous pouvez ajouter autant de bloc que vous voulez avec des tailles différentes ou encore des images en fond.
Le nom du bloc changera, papillon par exemple si l'image représente un papillon, astuce etc...
Maintenant pour que la zone apparaisse dans votre article, une fois que vous avez terminé de le rédiger, passez en mode html en cliquant sur <> il ne reste plus qu'à entourer le texte concerné avec ces balises :
<p class="code"> </p>
Votre texte doit se trouver entre ses balises, il ne doit surtout pas y avoir de balises <p> ou </p> à l'intérieur, sinon ça ne peut pas marcher !
Pour les retours à la ligne, utiliser les <br> </br>.
Voila ce que ça donne dans mon message en mode thml :
<p class="fleur"><font color="#000000">Mon texte est dans la zone, il apparaitra dans un cadre avec une image en fond</font></p>
Mon texte est dans la zone, il apparaitra dans un cadre avec une image en fond
Pour changer la couleur du texte dans le cadre vous pouvez ajouter une balise couleur <font color="#000000"> </font>
Pour modifier le style, la couleur, la grandeur, l'image etc...c'est dans le bloc de la feuille de style bien sur...
.code {
width: 700px;
border: 1px dashed #00FFFF;
margin-left: 1em;
padding: 5px 5px 5px 10px;
background: #000000;
}
Pour mettre une image de fond prenez plutôt ce bloc et collez l'adresse de votre image dedans :
.code {
width: 700px;
border: 1px dashed #00FFFF;
margin-left: 1em;
padding: 5px 5px 5px 10px;
background: #C0C0C0 url("http://adresse de l'image.jpg");
}
Si votre image est petite et que vous mettez un cadre assez grand, votre image se répètera sur le fond du cadre.
Pour que votre image ne se répète pas, ajoutez no-repeat; comme ceci à la fin de cette ligne :
background: #C0C0C0 url("http://Adresse de l'image.jpg") no-repeat;
Vous pouvez harmoniser la couleur du fond en changeant le code couleur #C0C0C0.
Si vous voulez un cadre de la même taille que votre image, le width qui correspond à la largeur du cadre doit avoir la même taille que l'image.
Pluie d'étoile sous votre curseur
Voici comment faire tomber des petites étoiles ou plutôt des petites croix, qui se désintègrent au fil de leur descente...
Alors si vous voulez que votre curseur soit animé sur toutes les pages de votre blog, vous devez coller le script ci-dessous entre <body> et </body> sur toutes les pages html...
Je vous conseille de le mettre en bas de page juste avant </body> ça évite de mettre tout ce charabia en plein milieu de votre page, déjà pas mal encombrée par toute sortes de codes ;o)
<script type="text/javascript">
var colour="#00ff00";
var sparkles=50;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
Pour changer la couleur des étoiles, rendez-vous à la deuxième ligne et changer le code couleur :
var colour="#00ff00";
Faire tomber la neige sur votre blog
C'est de saison en ce moment, je regarde par la fenêtre et je la vois tomber...
Coller le script ci-dessous dans votre page d'accueil tout en bas entre et
<script>//Snow - http://www.btinternet.com/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Configure here.
var num = 10; //Nombre d'images
var timer = 200; //Vitesse de descente
var enableinNS6 = 1 //La vitesse varie selon les navigateurs. (1=yes, 0=no).
//Adresse des gifs ci-dessous
var url_gif = new Array();
url_gif[0]= "http://mon image.gif";
url_gif[1]= "http://mon image.gif";
url_gif[2]= "http://mon image.gif";
url_gif[3]= "http://mon image.gif";
nb_floc = 5; // Nombre de d'images différentes
//End.
var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
if (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
num = 12;
for (i = 0; i < num; i++){
sfs[i] = 15; // Math.round(1 + Math.random() * 1);
document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:"><img src="'+url_gif[i%(nb_floc-1)]+'"><\/div>');
// '+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px;border:1px solid #dddddd;
currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}
if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth*0.80;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth*0.80;
}
h = rh - 2;
w = rw - 2;
}
else{
h = r.clientHeight - 2;
w = r.clientWidth*0.80;
}
}
function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function snow(){
var dy,dx;
for (i = 0; i < num; i++){
dy = fall[i];
dx = fall[i] * Math.cos(currStep[i]);
y[i]+=dy;
x[i]+=dx;
if (x[i] >= w || y[i] >= h){
y[i] = -10;
x[i] = Math.round(Math.random() * w);
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}
theFlakes[i].top = y[i] + scrl(0) + pix;
theFlakes[i].left = x[i] + scrl(1) + pix;
currStep[i]+=step[i];
}
setTimeout(snow,timer);
}
function init(){
winsize();
for (i = 0; i < num; i++){
theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
y[i] = Math.round(Math.random()*h);
x[i] = Math.round(Math.random()*w);
}
snow();
}
if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}
})();
}//End.</script>
Vous devez collez l'adresse de vos flocons de neige dans cette ligne, c'est la onzième en partant du haut :
url_gif[0]= "http://Adresse de l'image.gif";
Vous devez renseigner les 4 lignes avec l'adresse de vos images, elles peuvent bien sur être différentes ou vous pouvez coller 4 fois la même image, à vous de voir...
Vérifiez si vous utilisez Firefox, que le script fonctionne correctement sur Internet explorer.
Le script tel qu'il est fonctionne sur les 2, alors si vous n'êtes pas sur de vous, changez seulement les images.
Pour créer des flocons de neige le tuto c'est par là !
BBBrrrr....il fait froid d'un coup !
« 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
