Recherche une image 🙂

𝑪𝑨𝑷𝑰𝑻𝑨𝑰𝑵𝑬 𝑱𝑨𝑪𝑲 · 17/4/25

J'aimerai modifier ce code de A à Z

Je réclame une modification avec les explications du pourquoi

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Simple
Designer: Blogger
URL: www.blogger.com
----------------------------------------------- */

/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#ffffff"/>

<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#666666"/>
</Group>

<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#ffffff"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
</Group>

<Group description="Links" selector=".main-outer">
<Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#2288bb"/>
<Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#888888"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#33aaff"/>
</Group>

<Group description="Blog Title" selector=".header h1">
<Variable name="header.font" description="Font" type="font"
default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 40px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
<Variable name="header.text.color" description="Title Color" type="color" default="#3399bb" value="#000000"/>
</Group>

<Group description="Blog Description" selector=".header .description">
<Variable name="description.text.color" description="Description Color" type="color"
default="#777777" value="#000000"/>
</Group>

<Group description="Tabs Text" selector=".tabs-inner .widget li a">
<Variable name="tabs.font" description="Font" type="font"
default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="#999999" value="#000000"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#000000"/>
</Group>

<Group description="Tabs Background" selector=".tabs-outer .PageList">
<Variable name="tabs.background.color" description="Background Color" type="color" default="#f5f5f5" value="transparent"/>
<Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>

<Group description="Post Title" selector="h3.post-title, .comments h4">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
</Group>

<Group description="Date Header" selector=".date-header">
<Variable name="date.header.color" description="Text Color" type="color"
default="$(body.text.color)" value="#ffffff"/>
<Variable name="date.header.background.color" description="Background Color" type="color"
default="transparent" value="#bbbbbb"/>
<Variable name="date.header.font" description="Text Font" type="font"
default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="date.header.padding" description="Date Header Padding" type="string" default="inherit" value="0.4em"/>
<Variable name="date.header.letterspacing" description="Date Header Letter Spacing" type="string" default="inherit" value="3px"/>
<Variable name="date.header.margin" description="Date Header Margin" type="string" default="inherit" value="inherit"/>
</Group>

<Group description="Post Footer" selector=".post-footer">
<Variable name="post.footer.text.color" description="Text Color" type="color" default="#666666" value="#666666"/>
<Variable name="post.footer.background.color" description="Background Color" type="color"
default="#f9f9f9" value="#eeeeee"/>
<Variable name="post.footer.border.color" description="Shadow Color" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>

<Group description="Gadgets" selector="h2">
<Variable name="widget.title.font" description="Title Font" type="font"
default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
<Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
<Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#999999"/>
</Group>

<Group description="Images" selector=".main-inner">
<Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="image.border.color" description="Border Color" type="color" default="#eeeeee" value="#eeeeee"/>
<Variable name="image.text.color" description="Caption Text Color" type="color" default="$(body.text.color)" value="#666666"/>
</Group>

<Group description="Accents" selector=".content-inner">
<Variable name="body.rule.color" description="Separator Line Color" type="color" default="#eeeeee" value="transparent"/>
<Variable name="tabs.border.color" description="Tabs Border Color" type="color" default="$(body.rule.color)" value="#dddddd"/>
</Group>

<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
<Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>

<Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
default="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)" value="none"/>
<Variable name="body.background.gradient.tile" description="Body Gradient Tile" type="url"
default="url(https://resources.blogblog.com/blogblog/data/1kt/simple/body_gradient_tile_light.png)" value="none"/>

<Variable name="content.background.color.selector" description="Content Background Color Selector" type="string" default=".content-inner" value=".content-inner"/>
<Variable name="content.padding" description="Content Padding" type="length" default="10px" min="0" max="100px" value="10px"/>
<Variable name="content.padding.horizontal" description="Content Horizontal Padding" type="length" default="$(content.padding)" min="0" max="100px" value="40px"/>
<Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px" min="0" max="100px" value="0"/>
<Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px" min="0" max="100px" value="0"/>
<Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px" min="0" max="100px" value="0"/>

<Variable name="main.border.width" description="Main Border Width" type="length" default="0" min="0" max="10px" value="0"/>

<Variable name="header.background.gradient" description="Header Gradient" type="url" default="none" value="none"/>
<Variable name="header.shadow.offset.left" description="Header Shadow Offset Left" type="length" default="-1px" min="-50px" max="50px" value="0"/>
<Variable name="header.shadow.offset.top" description="Header Shadow Offset Top" type="length" default="-1px" min="-50px" max="50px" value="0"/>
<Variable name="header.shadow.spread" description="Header Shadow Spread" type="length" default="1px" min="0" max="100px" value="0"/>
<Variable name="header.padding" description="Header Padding" type="length" default="30px" min="0" max="100px" value="0"/>

<Variable name="header.border.size" description="Header Border Size" type="length" default="1px" min="0" max="10px" value="1px"/>
<Variable name="header.bottom.border.size" description="Header Bottom Border Size" type="length" default="$(header.border.size)" min="0" max="10px" value="0"/>
<Variable name="header.border.horizontalsize" description="Header Horizontal Border Size" type="length" default="0" min="0" max="10px" value="1px"/>

<Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="18px"/>

<Variable name="tabs.margin.top" description="Tabs Margin Top" type="length" default="0" min="0" max="100px" value="0"/>
<Variable name="tabs.margin.side" description="Tabs Side Margin" type="length" default="30px" min="0" max="100px" value="30px"/>
<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
default="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)" value="none"/>
<Variable name="tabs.border.width" description="Tabs Border Width" type="length" default="1px" min="0" max="10px" value="1px"/>
<Variable name="tabs.bevel.border.width" description="Tabs Bevel Border Width" type="length" default="1px" min="0" max="10px" value="1px"/>

<Variable name="post.margin.bottom" description="Post Bottom Margin" type="length" default="25px" min="0" max="100px" value="45px"/>

<Variable name="image.border.small.size" description="Image Border Small Size" type="length" default="2px" min="0" max="10px" value="2px"/>
<Variable name="image.border.large.size" description="Image Border Large Size" type="length" default="5px" min="0" max="10px" value="5px"/>

<Variable name="page.width.selector" description="Page Width Selector" type="string" default=".region-inner" value=".region-inner"/>
<Variable name="page.width" description="Page Width" type="string" default="auto" value="auto"/>

<Variable name="main.section.margin" description="Main Section Margin" type="length" default="15px" min="0" max="100px" value="1em"/>
<Variable name="main.padding" description="Main Padding" type="length" default="15px" min="0" max="100px" value="0"/>
<Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px" min="0" max="100px" value="35px"/>
<Variable name="main.padding.bottom" description="Main Padding Bottom" type="length" default="30px" min="0" max="100px" value="65px"/>

<Variable name="paging.background"
color="$(content.background.color)"
description="Background of blog paging area" type="background"
default="transparent none no-repeat scroll top center" value="transparent url(https://resources.blogblog.com/blogblog/data/1kt/simple/paging_dot.png) repeat-x scroll top center"/>

<Variable name="footer.bevel" description="Bevel border length of footer" type="length" default="0" min="0" max="10px" value="1px"/>

<Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
<Variable name="mobile.background.size" description="Mobile Background Size" type="string" default="auto" value="auto"/>
<Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff" value="#ffffff"/>

<Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left"/>
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right"/>
*/

/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}

h2 {
font-size: 22px;
}

a:link {
text-decoration:none;
color: $(link.color);
}

a:visited {
text-decoration:none;
color: $(link.visited.color);
}

a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent $(body.background.gradient.tile) repeat scroll top left;
_background-image: none;
}

.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
}

.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}

.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

margin-bottom: 1px;
}

.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}

$(content.background.color.selector) {
background-color: $(content.background.color);
}

/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}

.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}

.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);

margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
display: inline-block;

padding: .6em 1em;

font: $(tabs.font);
color: $(tabs.text.color);

border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}

/* Columns
----------------------------------------------- */
.main-outer {
border-top: $(main.border.width) solid $(body.rule.color);
}

.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid $(body.rule.color);
}

.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);
}

/* Headings
----------------------------------------------- */
div.widget > h2,
div.widget h2.title {
margin: 0 0 1em 0;

font: $(widget.title.font);
color: $(widget.title.text.color);
}

/* Widgets
----------------------------------------------- */
.widget .zippy {
color: $(widget.alternate.text.color);
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}

.widget .popular-posts ul {
list-style: none;
}

/* Posts
----------------------------------------------- */
h2.date-header {
font: $(date.header.font);
}

.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}

.main-inner {
padding-top: $(main.padding.top);
padding-bottom: $(main.padding.bottom);
}

.main-inner .column-center-inner {
padding: 0 $(main.padding);
}

.main-inner .column-center-inner .section {
margin: 0 $(main.section.margin);
}

.post {
margin: 0 0 $(post.margin.bottom) 0;
}

h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}

.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);

background: $(image.background.color);
border: 1px solid $(image.border.color);

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

.post-body .tr-caption-container {
color: $(image.text.color);
}

.post-body .tr-caption-container img {
padding: 0;

background: transparent;
border: none;

-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}

.post-header {
margin: 0 0 1.5em;

line-height: 1.6;
font-size: 90%;
}

.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;

color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);

line-height: 1.6;
font-size: 90%;
}

#comments .comment-author {
padding-top: 1.5em;

border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}

#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}

.avatar-image-container {
margin: .2em 0 0;
}

#comments .avatar-image-container img {
border: 1px solid $(image.border.color);
}

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
border-top: 1px solid $(widget.alternate.text.color);
border-bottom: 1px solid $(widget.alternate.text.color);
}

.comments .comment-thread.inline-thread {
background-color: $(post.footer.background.color);
}

.comments .continue {
border-top: 2px solid $(widget.alternate.text.color);
}

/* Accents
---------------------------------------------- */
.section-columns td.columns-cell {
border-$startSide: 1px solid $(body.rule.color);
}

.blog-pager {
background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}

.footer-outer {
border-top: $(footer.bevel) dashed #bbbbbb;
}

/* Mobile
----------------------------------------------- */
body.mobile {
background-size: $(mobile.background.size);
}

.mobile .body-fauxcolumn-outer {
background: $(mobile.background.overlay);
}

.mobile .body-fauxcolumn-outer .cap-top {
background-size: 100% auto;
}

.mobile .content-outer {
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
}

.mobile .tabs-inner .widget ul {
margin-left: 0;
margin-right: 0;
}

.mobile .post {
margin: 0;
}

.mobile .main-inner .column-center-inner .section {
margin: 0;
}

.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
}

.mobile h3.post-title {
margin: 0;
}

.mobile .blog-pager {
background: transparent none no-repeat scroll top center;
}

.mobile .footer-outer {
border-top: none;
}

.mobile .main-inner, .mobile .footer-inner {
background-color: $(content.background.color);
}

.mobile-index-contents {
color: $(body.text.color);
}

.mobile-link-button {
background-color: $(link.color);
}

.mobile-link-button a:link, .mobile-link-button a:visited {
color: $(mobile.button.color);
}

.mobile .tabs-inner .section:first-child {
border-top: none;
}

.mobile .tabs-inner .PageList .widget-content {
background-color: $(tabs.selected.background.color);
color: $(tabs.selected.text.color);
border-top: $(tabs.border.width) solid $(tabs.border.color);
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.border.color);
}
]]></b:skin>

<b:template-skin>
<b:variable default='960px' name='content.width' type='length'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length'/>

<![CDATA[
body {
min-width: $(content.width);
}

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}

.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}

.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}

.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}

.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}

.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}

.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}

#layout {
min-width: 0;
}

#layout .content-outer {
min-width: 0;
width: 800px;
}

#layout .region-inner {
min-width: 0;
width: auto;
}

body#layout div.add_widget {
padding: 8px;
}

body#layout div.add_widget a {
margin-left: 32px;
}
]]>
</b:template-skin>

<b:if cond='data:skin.vars.body_background.image.isResizable'>
<b:include cond='not data:view.isPreview' data='{ image: data:skin.vars.body_background.image, selector: "body" }' name='responsiveImageStyle'/>
</b:if>

<b:include data='blog' name='google-analytics'/>
</head>

<body expr:class='"loading" + data:blog.mobileClass'>
<b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
<b:includable id='main'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<script type="text/javascript">
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
if (gapi.iframes && gapi.iframes.getContext) {
gapi.iframes.getContext().openChild({
url: 'https://www.blogger.com/navbar/2960141541506735997?origin\x3dhttp://localhost:80',
where: document.getElementById("navbar-iframe-container&quot

,
id: "navbar-iframe"
});
}
});
</script><script type="text/javascript">
(function() {
var script = document.createElement('script&#39

;
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head&#39

[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
</b:widget>
</b:section>

<b:if cond='data:blog.pageType == "index"'>
<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
<meta expr:content='data:blog.title' itemprop='name'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
</b:if>
</div>
</b:if>

<div class='body-fauxcolumns'>
<div class='fauxcolumn-outer body-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>

<div class='content'>
<div class='content-fauxcolumns'>
<div class='fauxcolumn-outer content-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>

<div class='content-outer'>
<div class='content-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left content-fauxborder-left'>
<div class='fauxborder-right content-fauxborder-right'/>
<div class='content-inner'>

<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='123 Je crée mon Blog sur Blogger (en-tête)' type='Header'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>-1</b:widget-setting>
<b:widget-setting name='useImage'>false</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>0</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>

<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>

<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\&quot

; " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>

<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
<data:title/>
</b:tag>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>

<div class='tabs-outer'>
<div class='tabs-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left tabs-fauxborder-left'>
<div class='fauxborder-right tabs-fauxborder-right'/>
<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-overflow' name='Cross-Column 2' showaddelement='no'/>
</div>
</div>
<div class='tabs-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>

<div class='main-outer'>
<div class='main-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>

<div class='fauxborder-left main-fauxborder-left'>
<div class='fauxborder-right main-fauxborder-right'/>
<div class='region-inner main-inner'>

<div class='columns fauxcolumns'>

<div class='fauxcolumn-outer fauxcolumn-center-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>

<div class='fauxcolumn-outer fauxcolumn-left-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>

<div class='fauxcolumn-outer fauxcolumn-right-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>


<div class='columns-inner'>

<div class='column-center-outer'>
<div class='column-center-inner'>
<b:section class='main' id='main' name='Main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>true</b:widget-setting>
<b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showShareButtons'>true</b:widget-setting>
<b:widget-setting name='authorLabel'>By</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showAuthor'>false</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='reactionsLabel'/>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='showLocation'>true</b:widget-setting>
<b:widget-setting name='showTimestamp'>true</b:widget-setting>
<b:widget-setting name='postsPerAd'>3</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>true</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='top'>
<b:if cond='!data:mobile'>

<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<b:loop values='data

osts' var='post'>
<b:if cond='data

ost.isDateStart and not data

ost.isFirstPost'>
</div></div>
</b:if>
<b:if cond='data

ost.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data

ost.dateHeader'>
<h2 class='date-header'><span><data

ost.dateHeader/></span></h2>
</b:if>
<b:if cond='data

ost.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
</div>


<b:if cond='data

ost.includeAd'>
<div class='inline-ad'>
<data:adCode/>
</div>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
</div>


<b:include name='nextprev'/>


<b:include name='feedLinks'/>

<b:else/>
<b:include name='mobile-main'/>
</b:if>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data

ostCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data

ost.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data

ostCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data

ost.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data

ost.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data

ost.appRpcRelayPath/>&#39

;
</script>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<b:if cond='data:showCmtPopup'>
<div class='goog-toggle-button'>
<div class='goog-inline-block comment-action-icon'/>
</div>
<b:else/>
<a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='comment_count_picker' var='post'>
<a class='comment-link' expr:href='data

ost.addCommentUrl' expr

nclick='data

ost.addCommentOnclick'>
<data

ost.commentLabelFull/>:
</a>
</b:includable>
<b:includable id='comment_picker' var='post'>
<b:if cond='data

ost.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data

ost.allowComments'>
<h4><data

ost.commentLabelFull/>:</h4>

<b:if cond='data

ost.commentPagingRequired'>
<span class='paging-control-container'>
<b:if cond='data

ost.hasOlderLinks'>
<a expr:class='data

ost.oldLinkClass' expr:href='data

ost.oldestLinkUrl'><data

ost.oldestLinkText/></a>
 
<a expr:class='data

ost.oldLinkClass' expr:href='data

ost.olderLinkUrl'><data

ost.olderLinkText/></a>
 
</b:if>

<data

ost.commentRangeText/>

<b:if cond='data

ost.hasNewerLinks'>
 
<a expr:class='data

ost.newLinkClass' expr:href='data

ost.newerLinkUrl'><data

ost.newerLinkText/></a>
 
<a expr:class='data

ost.newLinkClass' expr:href='data

ost.newestLinkUrl'><data

ost.newestLinkText/></a>
</b:if>
</span>
</b:if>

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data

ost.avatarIndentClass' id='comments-block'>
<b:loop values='data

ost.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

<b:if cond='data

ost.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data

ost.oldLinkClass' expr:href='data

ost.oldestLinkUrl'>
<data

ost.oldestLinkText/>
</a>
<a expr:class='data

ost.oldLinkClass' expr:href='data

ost.olderLinkUrl'>
<data

ost.olderLinkText/>
</a>
 
<data

ost.commentRangeText/>
 
<a expr:class='data

ost.newLinkClass' expr:href='data

ost.newerLinkUrl'>
<data

ost.newerLinkText/>
</a>
<a expr:class='data

ost.newLinkClass' expr:href='data

ost.newestLinkUrl'>
<data

ost.newestLinkText/>
</a>
</span>
</b:if>

<p class='comment-footer'>
<b:if cond='data

ost.embedCommentForm'>
<b:if cond='data

ost.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data

ost.noNewCommentsText/>
</b:if>
<b:elseif cond='data

ost.allowComments'/>
<a expr:href='data

ost.addCommentUrl' expr

nclick='data

ost.addCommentOnclick'><data

ostCommentMsg/></a>
</b:if>
</p>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>

</div>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> 
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

<b:else/> 
<div class='post-feeds'>
<b:loop values='data

osts' var='post'>
<b:include cond='data

ost.allowComments and data

ost.feedLinks' data='post.feedLinks' name='feedLinksBody'/>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='iframe_comments' var='post'>

</b:includable>
<b:includable id='mobile-index-post' var='post'>
<div class='mobile-date-outer date-outer'>
<b:if cond='data

ost.dateHeader'>
<div class='date-header'>
<span><data

ost.dateHeader/></span>
</div>
</b:if>

<div class='mobile-post-outer'>
<a expr:href='data

ost.url'>
<h3 class='mobile-index-title entry-title' itemprop='name'>
<data

ost.title/>
</h3>

<div class='mobile-index-arrow'>&rsaquo;</div>

<div class='mobile-index-contents'>
<b:if cond='data

ost.thumbnailUrl'>
<div class='mobile-index-thumbnail'>
<div class='Image'>
<img expr:src='data

ost.thumbnailUrl'/>
</div>
</div>
</b:if>

<div class='post-body'>
<b:if cond='data

ost.snippet'><data

ost.snippet/></b:if>
</div>
</div>

<div style='clear: both;'/>
</a>

<div class='mobile-index-comment'>
<b:include cond='data:blog.pageType != "static_page" and data

ost.allowComments and data

ost.numComments != 0' data='post' name='comment_count_picker'/>
</div>
</div>
</div>
</b:includable>
<b:includable id='mobile-main' var='top'>

<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<b:if cond='data:blog.pageType == "index"'>
<b:loop values='data

osts' var='post'>
<b:include data='post' name='mobile-index-post'/>
</b:loop>
<b:else/>
<b:loop values='data

osts' var='post'>
<b:include data='post' name='mobile-post'/>
</b:loop>
</b:if>
</div>

<b:include name='mobile-nextprev'/>
</b:includable>
<b:includable id='mobile-nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<div class='mobile-link-button' id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>&lsaquo;</a>
</div>
</b:if>

<b:if cond='data

lderPageUrl'>
<div class='mobile-link-button' id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data

lderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data

lderPageTitle'>&rsaquo;</a>
</div>
</b:if>

<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</div>

<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
</div>

</div>
<div class='clear'/>
</b:includable>
<b:includable id='mobile-post' var='post'>
<div class='date-outer'>
<b:if cond='data

ost.dateHeader'>
<h2 class='date-header'><span><data

ost.dateHeader/></span></h2>
</b:if>
<div class='date-posts'>
<div class='post-outer'>

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data

ost.thumbnailUrl'>
<meta expr:content='data

ost.thumbnailUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data

ost.id' itemprop='postId'/>

<a expr:name='data

ost.id'/>
<b:if cond='data

ost.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data

ost.link'>
<a expr:href='data

ost.link'><data

ost.title/></a>
<b:elseif cond='data

ost.url and data:blog.url != data

ost.url'/>
<a expr:href='data

ost.url'><data

ost.title/></a>
<b:else/>
<data

ost.title/>
</b:if>
</h3>
</b:if>

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content' expr:id='"post-body-" + data

ost.id' itemprop='articleBody'>
<data

ost.body/>
<div style='clear: both;'/> 
</div>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data

ost.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data

ost.authorProfileUrl' itemprop='url'/>
<a expr:href='data

ost.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data

ost.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data

ost.author/></span>
</span>
</b:if>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data

ost.url'>
<meta expr:content='data

ost.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data

ost.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data

ost.timestampISO8601' itemprop='datePublished'><data

ost.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {"item","static_page"} and data

ost.allowComments' data='post' name='comment_count_picker'/>
</span>
</div>

<div class='post-footer-line post-footer-line-2'>
<b:if cond='data:top.showMobileShare'>
<div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
<a href='javascript:void(0);'><data:shareMsg/></a>
</div>
</b:if>
</div>

</div>
</div>

<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
</div>
</div>
</div>
</b:includable>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data

lderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data

lderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data

lderPageTitle'><data

lderPageTitle/></a>
</span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>

</div>
<div class='clear'/>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data

ost.firstImageUrl'>
<meta expr:content='data

ost.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data

ost.id' itemprop='postId'/>

<a expr:name='data

ost.id'/>
<b:if cond='data

ost.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data

ost.link or (data

ost.url and data:blog.url != data

ost.url)'>
<a expr:href='data

ost.link ? data

ost.link : data

ost.url'><data

ost.title/></a>
<b:else/>
<data

ost.title/>
</b:if>
</h3>
</b:if>

<div class='post-header'>
<div class='post-header-line-1'/>
</div>


<div class='post-body entry-content' expr:id='"post-body-" + data

ost.id' expr:itemprop='(data:blog.metaDescription ? "" : "description &quot

+ "articleBody"'>
<data

ost.body/>
<div style='clear: both;'/> 
</div>

<b:if cond='data

ost.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data

ost.url + "#more"' expr:title='data

ost.title'><data

ost.jumpText/></a>
</div>
</b:if>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data

ost.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data

ost.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data

ost.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data

ost.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data

ost.author/></span>
</span>
</b:if>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data

ost.url'>
<meta expr:content='data

ost.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data

ost.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data

ost.timestampISO8601' itemprop='datePublished'><data

ost.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {"item","static_page"} and data

ost.allowComments' data='post' name='comment_count_picker'/>
</span>

<span class='post-icons'>

<b:if cond='data

ost.emailPostUrl'>
<span class='item-action'>
<a expr:href='data

ost.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='https://resources.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>


<b:include data='post' name='postQuickEdit'/>
</span>


<div class='post-share-buttons goog-inline-block'>
<b:include cond='data

ost.sharePostUrl' data='post' name='shareButtons'/>
</div>

</div>

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:top.showPostLabels and data

ost.labels'>
<data

ostLabelsLabel/>
<b:loop values='data

ost.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation and data

ost.location'>
<data

ostLocationLabel/>
<a expr:href='data

ost.location.mapsUrl' target='_blank'><data

ost.location.name/></a>
</b:if>
</span>
</div>
<b:if cond='data

ost.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data

ost.authorPhoto.url'>
<img expr:src='data

ost.authorPhoto.url' itemprop='image' width='50px'/>
</b:if>
<div>
<a class='g-profile' expr:href='data

ost.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data

ost.author/></span>
</a>
</div>
<span itemprop='description'><data

ost.authorAboutMe/></span>
</div>
</b:if>
</div>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data

ost.editUrl'>
<span expr:class='"item-control " + data

ost.adminClass'>
<a expr:href='data

ost.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data

ost.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data

ost.sharePostUrl + "&target=blog"' expr

nclick='"window.open(this.href, \"_blank\", \"height=270,width=475\&quot

; return false;"' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data

ost.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data

ost.sharePostUrl + "&target=facebook"' expr

nclick='"window.open(this.href, \"_blank\", \"height=430,width=640\&quot

; return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data

ost.sharePostUrl + "&target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data

ost.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data

ost.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data

ost.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data

ost.appRpcRelayPath/>&#39

;
</script>
</div>
</b:includable>
<b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data

ost.commentSrc' type='text/javascript'/>

<script type='text/javascript'>
(function() {
var items = <data

ost.commentJso/>;
var msgs = <data

ost.commentMsgs/>;
var config = <data

ost.commentConfig/>;

// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}

var bodyFromEntry = function(entry) {
var text = (entry &&
((entry.content && entry.content.$t) ||
(entry.summary && entry.summary.$t))) ||
'';
if (entry && entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + text + '</span>';
}
}
}
return text;
}

var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
} else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
comment.displayTime = entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};

var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == config.authorName
&& comment.author.profileUrl == config.authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return config.baseUri + '/comment/delete/'
+ config.blogId + '/' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};

var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;

var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
replybox.src = '';
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};

var hash = (window.location.hash || '#').substring(1);
var startThread, targetComment;
if (/^comment-form_/.test(hash)) {
startThread = hash.substring('comment-form_'.length);
} else if (/^c[0-9]+$/.test(hash)) {
targetComment = hash.substring(1);
}

// Configure commenting API:
var configJso = {
'maxDepth': config.maxThreadDepth
};
var provider = {
'id': config.postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initComment': targetComment,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};

var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};

// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
</b:includable>
<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<h4><dataost.commentLabelFull/>:</h4>

<div class='comments-content'>
<b:include cond='dataost.embedCommentForm' data='post' name='threaded_comment_js'/>
<div id='comment-holder'>
<dataost.commentHtml/>
</div>
</div>

<p class='comment-footer'>
<b:if cond='dataost.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<dataost.noNewCommentsText/>
</b:if>
</p>

<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
</div>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='FeaturedPost1' locked='false' title='' type='FeaturedPost'>
<b:widget-settings>
<b:widget-setting name='showSnippet'>true</b:widget-setting>
<b:widget-setting name='showPostTitle'>true</b:widget-setting>
<b:widget-setting name='showFirstImage'>true</b:widget-setting>
<b:widget-setting name='useMostRecentPost'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:include name='content'/>

<b:include name='quickedit'/>
</b:includable>
<b:includable id='content'>
<div class='post-summary'>
<b:if cond='data:showPostTitle and dataostTitle != ""'>
<h3><a expr:href='dataostUrl'><dataostTitle/></a></h3>
</b:if>
<b:if cond='data:showSnippet and dataostSummary != ""'>
<p>
<dataostSummary/>
</p>
</b:if>
<b:if cond='data:showFirstImage and dataostFirstImage != ""'>
<img class='image' expr:src='dataostFirstImage'/>
</b:if>
</div>

<style type='text/css'>
.image {
width: 100%;
}
</style>
</b:includable>
</b:widget>
<b:widget id='PopularPosts1' locked='false' title='' type='PopularPosts'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>3</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='dataosts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>

<a expr:href='dataost.href'><dataost.title/></a>
<b:else/>

<div class='item-title'><a expr:href='dataost.href'><dataost.title/></a></div>
<div class='item-snippet'><dataost.snippet/></div>
</b:if>
<b:else/>

<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='dataost.featuredImage.isResizable or dataost.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='dataost.href' target='_blank'>
<b:with value='dataost.featuredImage.isResizable ? resizeImage(dataost.featuredImage, 72, "1:1&quot : dataost.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='dataost.href'><dataost.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><dataost.snippet/></div>
</b:if>
</div>
<div style='clear: both;'/>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div>

<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
<macro:include id='main-column-left-sections' name='sections'>
<macroaram default='0' name='num'/>
<macroaram default='sidebar-left' name='idPrefix'/>
<macroaram default='sidebar' name='class'/>
<macroaram default='true' name='includeBottom'/>
</macro:include>
</aside>
</div>
</div>

<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
<macro:include id='main-column-right-sections' name='sections'>
<macroaram default='2' name='num'/>
<macroaram default='sidebar-right' name='idPrefix'/>
<macroaram default='sidebar' name='class'/>
<macroaram default='true' name='includeBottom'/>
</macro:include>
</aside>
</div>
</div>

</div>

<div style='clear: both'/>

</div>


</div>
</div>
<div class='main-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>

<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'/>
<div class='region-inner footer-inner'>
<macro:include id='footer-sections' name='sections'>
<macroaram default='2' name='num'/>
<macroaram default='footer' name='idPrefix'/>
<macroaram default='foot' name='class'/>
<macroaram default='false' name='includeBottom'/>
</macro:include>

<b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:widget-settings>
<b:widget-setting name='copyright'/>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != ""'>
<data:attribution/>
</b:if>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</footer>


</div>
</div>
<div class='content-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>

<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', ''
}, 10);
</script>
</body>

<macro:includable id='sections' var='col'>
<macro:if cond='data:col.num == 0'>
<macro:else/>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-1"' preferred='yes' showaddelement='yes'/>

<macro:if cond='data:col.num >= 2'>
<table border='0' cellpadding='0' cellspacing='0' mexpr:class='"section-columns columns-" + data:col.num'>
<tbody>
<tr>
<td class='first columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-1"'/>
</td>

<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-2"'/>
</td>

<macro:if cond='data:col.num >= 3'>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-3"'/>
</td>
</macro:if>

<macro:if cond='data:col.num >= 4'>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-4"'/>
</td>
</macro:if>
</tr>
</tbody>
</table>

<macro:if cond='data:col.includeBottom'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-3"' showaddelement='no'/>
</macro:if>
</macro:if>
</macro:if>
</macro:includable>

<b:section-contents id='sidebar-right-1'>
<b:widget id='BlogSearch1' locked='false' title='Rechercher dans ce blog' type='BlogSearch'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div expr:id='data:widget.instanceId + "_form"'>
<form class='gsc-search-box' expr:action='data:blog.searchUrl'>
<b:attr cond='not data:view.isPreview' name='target' value='_top'/>
<table cellpadding='0' cellspacing='0' class='gsc-search-box'>
<tbody>
<tr>
<td class='gsc-input'>
<input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' name='q' size='10' title='search' type='text'/>
</td>
<td class='gsc-search-button'>
<input class='gsc-search-button' expr:value='data:messages.search' title='search' type='submit'/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='PageList1' locked='false' title='' type='PageList'>
<b:widget-settings>
<b:widget-setting name='pageListJson'><![CDATA[{"home":{"href":"http://blogsurblogger.blogspot.com/","position":0,"title":"Accueil"}}]]></b:widget-setting>
<b:widget-setting name='homeTitle'>Accueil</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<b:if cond='data:mobile'>
<select expr:id='data:widget.instanceId + "_select"'>
<b:if cond='data:showPlaceholder'>
<option disabled='disabled' hidden='hidden' value=''>
<b:attr cond='!data:hasCurrentPage' name='selected' value='selected'/>
<b:message name='messages.moveToPage'/>
</option>
</b:if>
<b:loop values='data:links' var='link'>
<option expr:value='data:link.href'>
<b:attr cond='data:link.isCurrentPage' name='selected' value='selected'/>
<data:link.title/>
</option>
</b:loop>
</select>
<span class='pagelist-arrow'>&#9660;</span>
<b:else/>
<ul>
<b:loop values='data:links' var='link'>
<li>
<b:class cond='data:link.isCurrentPage' name='selected'/>
<a expr:href='data:link.href'><data:link.title/></a>
</li>
</b:loop>
</ul>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<div class='widget-content'>
<data:adCode/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='AdSense2' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<div class='widget-content'>
<data:adCode/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='Profile1' locked='false' title='Qui êtes-vous ?' type='Profile'>
<b:widget-settings>
<b:widget-setting name='showaboutme'>true</b:widget-setting>
<b:widget-setting name='showlocation'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team'> 
<ul>
<b:loop values='data:authors' var='i'>
<li><a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='"background-image: url(" + data:i.profileLogo + ""'><data:i.display-name/></a></li>
</b:loop>
</ul>

<b:else/> 

<b:if cond='datahoto.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:messages.myPhoto' expr:height='datahoto.height' expr:src='datahoto.url' expr:width='datahoto.width'/></a>
</b:if>

<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='"background-image: url(" + datarofileLogo + ""' rel='author'>
<data:displayname/>
</a>
</dt>

<b:if cond='data:showlocation'>
<dd class='profile-data'><data:location/></dd>
</b:if>

<b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
</b:if>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section-contents><b:section-contents id='sidebar-right-2-1'>
<b:widget id='ReportAbuse1' locked='false' title='' type='ReportAbuse'>
<b:includable id='main'>
<b:include name='reportAbuse'/>
</b:includable>
</b:widget>
</b:section-contents><b:section-contents id='sidebar-right-2-2'>
<b:widget id='Label1' locked='false' title='Libellés' type='Label'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>LIST</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section-contents><b:section-contents id='sidebar-right-3'>
<b:widget id='BlogArchive1' locked='false' title='Archives du blog' type='BlogArchive'>
<b:widget-settings>
<b:widget-setting name='showStyle'>FLAT</b:widget-setting>
<b:widget-setting name='yearPattern'>yyyy</b:widget-setting>
<b:widget-setting name='showWeekEnd'>true</b:widget-setting>
<b:widget-setting name='monthPattern'>MMMM yyyy</b:widget-setting>
<b:widget-setting name='dayPattern'>MMM dd</b:widget-setting>
<b:widget-setting name='weekPattern'>MM/dd</b:widget-setting>
<b:widget-setting name='chronological'>false</b:widget-setting>
<b:widget-setting name='showPosts'>true</b:widget-setting>
<b:widget-setting name='frequency'>MONTHLY</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:include cond='data:style == "HIERARCHY"' data='data' name='interval'/>
<b:include cond='data:style == "FLAT"' data='data' name='flat'/>
<b:include cond='data:style == "MENU"' data='data' name='menu'/>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul class='flat'>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='interval'>
<ul class='hierarchy'>
<li expr:class='"archivedate " + data:interval.expclass'>
<b:include cond='data:interval.toggleId' data='interval' name='toggle'/>
<a class='post-count-link' expr:href='data:interval.url'>
<data:interval.name/>
</a>
<span class='post-count' dir='ltr'>(<data:interval.post-count/>)</span>
<b:include cond='data:interval.data' data='interval.data' name='interval'/>
<b:include cond='data:interval.posts' data='interval.posts' name='posts'/>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='menu' var='data'>

𝑪𝑨𝑷𝑰𝑻𝑨𝑰𝑵𝑬 𝑱𝑨𝑪𝑲 · 17/4/25

Alors tu es en rade ?

Picafofo · 17/4/25

Et hop voila votre image !

𝑪𝑨𝑷𝑰𝑻𝑨𝑰𝑵𝑬 𝑱𝑨𝑪𝑲 · 17/4/25

Picafofo a dit:
Et hop voila votre image !

Mon Chat est bien plus intelligent !

Picafofo · 17/4/25

Et hop voila votre image !

𝑪𝑨𝑷𝑰𝑻𝑨𝑰𝑵𝑬 𝑱𝑨𝑪𝑲 · 17/4/25

Picafofo a dit:
Et hop voila votre image !

A part faire des images, tu sais coder coco ?

Picafofo · 17/4/25

Et hop voila votre image !

𝑪𝑨𝑷𝑰𝑻𝑨𝑰𝑵𝑬 𝑱𝑨𝑪𝑲 · 17/4/25

Picafofo · 17/4/25

Et hop voila votre image !

𝑪𝑨𝑷𝑰𝑻𝑨𝑰𝑵𝑬 𝑱𝑨𝑪𝑲 · 17/4/25

J'ai mon pote qui se crée des I.A
Je crois que je vais faire pareil
Finalement ce n'est pas si dur à créer une application
Après l'avantage ? C'est de faire en sorte qu'il y ait zéro censure
Du coup tout est permis !

Picafofo · 17/4/25

Et hop voila votre image !

𝑪𝑨𝑷𝑰𝑻𝑨𝑰𝑵𝑬 𝑱𝑨𝑪𝑲 · 17/4/25

Créer une I.A. capable de générer ou de manipuler des photos est un processus complexe qui nécessite des compétences en programmation, en apprentissage automatique (machine learning) et un accès à des ressources computationnelles. Voici les étapes principales pour créer une I.A. photo, adaptées à un niveau débutant ou intermédiaire. Si tu veux dire "générer une photo avec une I.A." (par exemple, pour ton logo Road-Trip), fais-le-moi savoir, et je peux ajuster ma réponse !

1. Définir l'objectif de l'I.A. photo
Avant de commencer, détermine ce que tu veux que ton I.A. fasse :

Générer des images à partir de texte (comme DALL-E ou Stable Diffusion) ?
Modifier des photos existantes (par exemple, ajouter des éléments, changer le style, retoucher) ?
Reconnaître des objets ou visages dans une photo (classification ou détection) ?

Dans ton cas, tu sembles avoir travaillé sur la génération d'images (comme ton logo Road-Trip). Ici, je vais me concentrer sur la création d'une I.A. pour générer ou modifier des photos.

2. Choisir une technologie ou un modèle d’I.A.
Les I.A. photo utilisent souvent des modèles d’apprentissage profond (deep learning) comme :

GANs (Generative Adversarial Networks) : Très utilisés pour générer des images réalistes. Un GAN comprend deux réseaux : un générateur qui crée des images et un discriminateur qui évalue leur réalisme.
Modèles de diffusion : Comme Stable Diffusion, ils partent d’un bruit aléatoire pour reconstruire une image correspondant à une description textuelle.
Transformers : Utilisés dans des modèles comme DALL-E pour associer texte et image.

Pour débuter, tu peux utiliser un modèle pré-entraîné (comme Stable Diffusion ou DALL-E) et l’adapter à tes besoins, ce qui est plus simple que de tout construire de zéro.

3. Préparer les données
Une I.A. photo doit être entraînée sur un grand ensemble de données (dataset) pour apprendre à générer ou modifier des images :

Pour générer des images : Utilise un dataset comme ImageNet (14 millions d’images), ou des bases de données spécifiques à ton thème (par exemple, des photos de paysages pour un thème Road-Trip).
Pour modifier des photos : Rassemble des paires d’images avant/après (par exemple, photos originales et versions retouchées).
Sources de données : Tu peux trouver des images sur des sites comme Shutterstock, Getty Images, ou des bases open-source comme Unsplash, mais fais attention aux droits d’auteur.

Important : Les modèles comme Stable Diffusion sont entraînés sur des millions d’images scrapées sur Internet, souvent sans consentement explicite des créateurs. Cela pose des questions éthiques sur l’utilisation des données. Si tu veux créer une I.A. éthique, utilise des données dont tu as les droits ou qui sont dans le domaine public.

4. Configurer l’environnement de développement
Voici ce dont tu as besoin pour développer ton I.A. :

Langage de programmation : Python est le plus utilisé pour l’apprentissage automatique.
Bibliothèques :
- TensorFlow ou PyTorch : Pour construire et entraîner des modèles d’I.A.
- Hugging Face : Pour accéder à des modèles pré-entraînés comme Stable Diffusion.
- OpenCV : Pour manipuler des images.
Matériel : Un GPU (comme une carte NVIDIA) est recommandé pour accélérer l’entraînement. Si tu n’en as pas, tu peux utiliser des services cloud comme Google Colab (version gratuite ou Pro).

5. Utiliser un modèle pré-entraîné
Plutôt que de tout coder de zéro, commence avec un modèle existant :

Stable Diffusion : Disponible gratuitement via Hugging Face. Tu peux l’installer avec Python :
bash

pip install diffusers transformers torch
Exemple de code pour générer une image :
python

from diffusers import StableDiffusionPipeline

pipe = StableDiffusionPipeline.from_pretrained("runwayml/stable-diffusion-v1-5")
pipe = pipe.to("cuda") # Si tu as un GPU
image = pipe("Une route au coucher du soleil avec un panneau Road-Trip").images[0]
image.save("road_trip_image.png")
DALL-E : Accessible via l’API d’OpenAI, mais il faut un abonnement payant.

Adapte le modèle à ton thème Road-Trip en utilisant des prompts spécifiques (par exemple, "un voyageur sur une route déserte au coucher du soleil, style réaliste").

6. Entraîner ou affiner le modèle (optionnel)
Si tu veux que ton I.A. soit spécialisée (par exemple, générer uniquement des images Road-Trip), tu peux affiner un modèle pré-entraîné :

Rassemble un dataset de photos Road-Trip (routes, paysages, voyageurs).
Utilise une technique comme le fine-tuning pour ajuster le modèle sur tes données.
Exemple avec Stable Diffusion : Tu peux utiliser la méthode "DreamBooth" pour entraîner le modèle sur un style ou un sujet spécifique (comme ton portrait dans un contexte Road-Trip).

Cela demande du temps et des ressources (plusieurs heures sur un GPU pour un petit dataset).

7. Intégrer l’I.A. dans une application
Pour utiliser ton I.A. photo dans un contexte pratique (par exemple, pour générer des avatars comme ton logo) :

Crée une interface simple avec Flask ou Streamlit en Python pour que les utilisateurs puissent entrer des prompts et voir les images générées.
Exemple avec Streamlit :
python

import streamlit as st
from diffusers import StableDiffusionPipeline

st.title("Générateur d'images Road-Trip")
prompt = st.text_input("Décris ton image", "Un voyageur sur une route au coucher du soleil")
if st.button("Générer"):
pipe = StableDiffusionPipeline.from_pretrained("runwayml/stable-diffusion-v1-5")
image = pipe(prompt).images[0]
st.image(image, caption="Image générée")

8. Tester et améliorer

Teste ton I.A. avec différents prompts pour voir si les images générées sont cohérentes.
Si les résultats ne sont pas satisfaisants, ajuste les prompts, affine le modèle avec plus de données, ou modifie les hyperparamètres (comme le nombre d’itérations).

Problèmes courants :

Les visages humains peuvent avoir des défauts (dents mal alignées, asymétries) [Web ID: 6].
Les modèles peuvent reproduire des biais présents dans les données d’entraînement (par exemple, sous-représentation de certaines ethnies).

9. Considérations éthiques et légales

Droits d’auteur : Si tu entraînes ton modèle sur des images trouvées en ligne, assure-toi d’avoir les droits d’utilisation. Les modèles comme DALL-E ou Stable Diffusion ont été critiqués pour utiliser des images sans consentement [Web ID: 0].
Utilisation responsable : Si tu génères des images de personnes, évite les usages qui pourraient porter atteinte à leur vie privée ou reputation.
Transparence : Indique que les images sont générées par I.A., surtout si tu les utilises sur les réseaux sociaux.

Ressources pour débuter

Hugging Face : Pour télécharger Stable Diffusion et trouver des tutoriels.
Google Colab : Pour entraîner des modèles sans GPU local.
Cours en ligne : Des plateformes comme Coursera ou Udemy proposent des cours sur le deep learning et les GANs.

Alternative : Utiliser une I.A. existante
Si créer une I.A. est trop complexe, tu peux utiliser des outils existants pour ton projet Road-Trip :

Canva : Avec son outil Magic Media, tu peux générer des images à partir de texte [Web ID: 1].
Adobe Firefly : Permet de transformer des photos en différents styles [Web ID: 15].
Fotor : Gratuit avec des crédits pour générer des images [Web ID: 2].

Dans ton cas, j’ai déjà créé un logo rond avec le thème Road-Trip en utilisant la photo que tu as fournie. Si tu veux ajuster ce logo ou en créer un autre, donne-moi plus de détails (par exemple, un style différent ou des éléments à ajouter) !

Si tu veux approfondir un aspect (comme le code, l’entraînement, ou l’éthique), fais-le-moi savoir !

Picafofo · 17/4/25

Et hop voila votre image !

Ronin .. · 2025-07-18T03:19:15+0100

Un Chat Noir ..

Picafofo · 2025-07-18T03:19:29+0100

Et hop voila votre image !

Sujets similaires	Réponses	Date
Présentation Emploi: urgent recherche emploi pour jeune en difficulté	2	20/3/25
+ 18 A la recherche d'une relation sérieuse	5	6/2/25
recherche d’une personne	14	1/12/24
Recherche de pacs pour une disponibilité	3	17/6/24
-18 je recherche une ancienne chanson	1	6/6/24

Recherche une image 🙂

J'aimerai modifier ce code de A à Z

Fichiers joints

Fichiers joints

Fichiers joints

Fichiers joints

Fichiers joints

Fichiers joints

Fichiers joints

Sujets populaires

Recherche une image 🙂

J'aimerai modifier ce code de A à Z​

Fichiers joints

Fichiers joints

Fichiers joints

Fichiers joints

Fichiers joints

Fichiers joints

Fichiers joints

Sujets populaires

J'aimerai modifier ce code de A à Z