Ajouter une animation à Blogger [Slider]

Publié par Othmane BENTALEB à 17:46

Bismillah. Bienvenue sur Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.

Cette fois, je vais vous expliquer comment ajouter une animation en haut de votre page blogger, où ces images représentent les sujets de votre blog, ce qui donne une esthétique au blog et il a un rôle important dans la présentation du contenu du blog.

Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.

Pour voir un example : http://outils-blogger-test.blogspot.com/

Allez au Panneau de configuration votre blog :

Présentation ---> Modifier le code HTML ---> Développer des modèles de gadgets

Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.

Recherchez le code suivant :

]]></b:skin>

Ensuite, placez le code suivant ci-dessus :

#myslides{

background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifiI070W_FxWnbslJkb9ot310agbDRtxonkBm_dfZ4DXDUfAYS2PW9E8NArxbuOA9uW7v6TSUEub1TTMhQ-y31ZpW-lO1zknU2W4x2yIvctAl__AY1hzq5Mj3fVtP3ghTTE5K38-o73A/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;

}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

Pour changer le fond, modifiez le lien rouge.

Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.

Maintenant, recherchez le code suivant :

</head>

Ensuite, placez le code suivant ci-dessus :

<script src='https://sites.google.com/site/outilsblogger/outils-blogger-animation/outils-blogger.js' type='text/javascript'/>
<script src='https://sites.google.com/site/outilsblogger/outils-blogger-animation/outils-blogger-1.js' type='text/javascript'/>


<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:1500, wraparound:true, persist:true},
autostep: {enable:true, moveby:1, pause:1000},
defaultbuttons: {enable: true, moveby: 4, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnZwKfEqwOfrRa6jwjoGycT_EbcuMgTHsdBLAjLfdDAYvWjYifvIDE6hq7RpFmE2VcmyeeVxwNnOt4Iu7sm1Edbo1yfG5AXTh7EMWvMiP-6w5M8oHPUj7WcP2hYGiLh500zVCBPXamzQE/s400/left.jpg', -48, 0], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMmD-vLWGL5erconPegMBGMHgOboJK30slC39hbr-kdpazYV2kMgr2YaMbZNI0VrdmDyjxwYAQ06-Q65Ou0dO3j22NgWyQuMLI6fG21qvKB0J2I9V_RJQaYNMmzu5Rxa1ieWjLY8eiENk/s400/right.jpg', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']

})

</script>

Speed:1500 : Vitesse de mouvement des images

moveby:1 : Nombre d'images qui sera surmonter lors le mouvement d'images

Enregistrez le modèle

Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.

Allez au Panneau de configuration votre blog :

Présentation ---> Éléments de la page ---> Ajouter un gadget ---> HTML/Javascript

Et coller le code suivant :

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">


<div class="panel">
<a href="http://outils-blogger.blogspot.com" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVwuNxqRJZK80Hk7wwPqxJsSOqNtnZQp7crb0hOfegfcUgx1PMBrBSew_m79xlrlkw401Yx7xvK1xn5INOAhn6lyuQfN4XandPf7NjoUzuRFkqRcPwwFGFaRbMgU-NZWX-WjTuo4nJ1Ag/s0/outils+blogger.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://outils-blogger.blogspot.com" target="blank" title="Simple Blog Writing Template"> <img width="160" alt="Simple Blog Writing Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVwuNxqRJZK80Hk7wwPqxJsSOqNtnZQp7crb0hOfegfcUgx1PMBrBSew_m79xlrlkw401Yx7xvK1xn5INOAhn6lyuQfN4XandPf7NjoUzuRFkqRcPwwFGFaRbMgU-NZWX-WjTuo4nJ1Ag/s0/outils+blogger.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://outils-blogger.blogspot.com" target="blank" title="Lenomag Blogger Template"> <img width="160" alt="Lenomag Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVwuNxqRJZK80Hk7wwPqxJsSOqNtnZQp7crb0hOfegfcUgx1PMBrBSew_m79xlrlkw401Yx7xvK1xn5INOAhn6lyuQfN4XandPf7NjoUzuRFkqRcPwwFGFaRbMgU-NZWX-WjTuo4nJ1Ag/s0/outils+blogger.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://outils-blogger.blogspot.com" target="blank" title="Money Blogger Template"> <img width="160" alt="Money Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVwuNxqRJZK80Hk7wwPqxJsSOqNtnZQp7crb0hOfegfcUgx1PMBrBSew_m79xlrlkw401Yx7xvK1xn5INOAhn6lyuQfN4XandPf7NjoUzuRFkqRcPwwFGFaRbMgU-NZWX-WjTuo4nJ1Ag/s0/outils+blogger.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://outils-blogger.blogspot.com" target="blank" title="Digital Statement Blogger Template"> <img width="160" alt="Digital Statement Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVwuNxqRJZK80Hk7wwPqxJsSOqNtnZQp7crb0hOfegfcUgx1PMBrBSew_m79xlrlkw401Yx7xvK1xn5INOAhn6lyuQfN4XandPf7NjoUzuRFkqRcPwwFGFaRbMgU-NZWX-WjTuo4nJ1Ag/s0/outils+blogger.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://outils-blogger.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVwuNxqRJZK80Hk7wwPqxJsSOqNtnZQp7crb0hOfegfcUgx1PMBrBSew_m79xlrlkw401Yx7xvK1xn5INOAhn6lyuQfN4XandPf7NjoUzuRFkqRcPwwFGFaRbMgU-NZWX-WjTuo4nJ1Ag/s0/outils+blogger.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://outils-blogger.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVwuNxqRJZK80Hk7wwPqxJsSOqNtnZQp7crb0hOfegfcUgx1PMBrBSew_m79xlrlkw401Yx7xvK1xn5INOAhn6lyuQfN4XandPf7NjoUzuRFkqRcPwwFGFaRbMgU-NZWX-WjTuo4nJ1Ag/s0/outils+blogger.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://outils-blogger.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVwuNxqRJZK80Hk7wwPqxJsSOqNtnZQp7crb0hOfegfcUgx1PMBrBSew_m79xlrlkw401Yx7xvK1xn5INOAhn6lyuQfN4XandPf7NjoUzuRFkqRcPwwFGFaRbMgU-NZWX-WjTuo4nJ1Ag/s0/outils+blogger.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://outils-blogger.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVwuNxqRJZK80Hk7wwPqxJsSOqNtnZQp7crb0hOfegfcUgx1PMBrBSew_m79xlrlkw401Yx7xvK1xn5INOAhn6lyuQfN4XandPf7NjoUzuRFkqRcPwwFGFaRbMgU-NZWX-WjTuo4nJ1Ag/s0/outils+blogger.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://outils-blogger.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVwuNxqRJZK80Hk7wwPqxJsSOqNtnZQp7crb0hOfegfcUgx1PMBrBSew_m79xlrlkw401Yx7xvK1xn5INOAhn6lyuQfN4XandPf7NjoUzuRFkqRcPwwFGFaRbMgU-NZWX-WjTuo4nJ1Ag/s0/outils+blogger.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://outils-blogger.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVwuNxqRJZK80Hk7wwPqxJsSOqNtnZQp7crb0hOfegfcUgx1PMBrBSew_m79xlrlkw401Yx7xvK1xn5INOAhn6lyuQfN4XandPf7NjoUzuRFkqRcPwwFGFaRbMgU-NZWX-WjTuo4nJ1Ag/s0/outils+blogger.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://outils-blogger.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVwuNxqRJZK80Hk7wwPqxJsSOqNtnZQp7crb0hOfegfcUgx1PMBrBSew_m79xlrlkw401Yx7xvK1xn5INOAhn6lyuQfN4XandPf7NjoUzuRFkqRcPwwFGFaRbMgU-NZWX-WjTuo4nJ1Ag/s0/outils+blogger.png" height="110" /> </a>
</div>


</div></div></div>