Afficher les articles important en slideshow

Après avoir vu comment faire défiler de droite à gauche les images cliquables pointant vers des articles importants, laissez moi vous présenter une autre technique pour afficher les articles important en slideshow avec résumé de ceux-ci.

Vous pouvez voir une démonstration de ce dont je parle ici : http://user-online.blogspot.com

Si vous êtes intéressé par ce slideshow, voici comment procéder pour l’avoir sur votre blog :

Collectionner les images à utiliser et hébergez-les dans un serveur quelconque (Google Pagecreator, Photobucket, etc.). Ensuite, prenez les urls (liens) vers ces images et sauvegardez-les dans un fichier quelconque.

Il est préférable de ne pas avoir plus de 5 images, histoire de ne pas ralentir le chargement du slideshow. Ces images ne doivent pas dépasser 500x200 pixels.

2. Collectionner les urls (liens) vers les articles où les images vont renvoyer.

3. Remplacez les données du code ci-après selon ces instructions :

a. Mettez à la place de Titre 1 et similaires les différents titres de vos articles
b. Mettez à la place de Description 1 et similaires les petites descriptions pour chacun de vos articles
c. Mettez à la place de htt://urldelarticle1.com et similaires les liens vers vos articles
d. Mettez à la place de http://urldelimage.com1 et similaires les liens vers les images illustratives des articles. Vous remarquerez qu’il faut répéter à deux fois l’url de la même image. La première c’est pour que l’image s’affiche en entier et la deuxième s’est pour un petit aperçu.

<div id="myGallery">

<div class="imageElement">
<h3>Titre 1</h3>
<p>Description 1!</p>
<a href="http://www.urldelarticle1.com" class="open" title="Lire la suite"></a>
<img src=" http://urldelimage.com1?imgmax=800" class="full"/>
<img src="http://urldelimage.com1?imgmax=800" class="thumbnail"/>
</div>

<div class="imageElement">
<h3>Titre 2</h3>
<p>Description 2!</p>
<a href=" http://www.urldelarticle2.com" class="open" title="Lire la suite"></a>
<img src=" http://urldelimage.com2?imgmax=800" class="full"/>
<img src=" http://urldelimage.com2?imgmax=800" class="thumbnail"/>
</div>

<div class="imageElement">
<h3>Titre 3</h3>
<p>Description 3</p>
<a href=" http://www.urldelarticle3.com" class="open" title="Lire la suite"></a>
<img src=" http://urldelimage.com3?imgmax=800" class="full"/>
<img src=" http://urldelimage.com?3imgmax=800" class="thumbnail"/>
</div>

<div class="imageElement">
<h3>Titre 4</h3>
<p>Description 4</p>
<a href=" http://www.urldelarticle4.com" class="open" title="Lire la suite"></a>
<img src=" http://urldelimage.com4?imgmax=800" class="full"/>
<img src=" http://urldelimage.com4?imgmax=800" class="thumbnail"/>
</div>

<div class="imageElement">
<h3>Titre 5</h3>
<p>Description 5</p>
<a href=" http://www.urldelarticle5.com " class="open" title="Lire la suite"></a>
<img src=" http://urldelimage.com5?imgmax=800" class="full"/>
<img src=" http://urldelimage.com5?imgmax=800" class="thumbnail"/>
</div>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready', startGallery);
</script>
</div>

4. Mettez le code ci-dessus dans un widget Html/Javascript (en vous connectant à votre compte Blogger et allant sur “ Mise en Page ”. Là, sélectionner “ ajouter un nouvel élément ” et optez dans la pop-up pour Html/Javascript.)

5. Aller sur “ Modifier le code html ” et mettez les codes suivants, juste avant la balise </head>

<script src='http://javascripthost.com/s3/bin/jdgallery.js' type='text/javascript'></script>

<script src='http://javascripthost.com/s3/bin/mootoolsv111.js' type='text/javascript'></script>

6. Collez le code suivant juste avant la balise ]]></b:skin> :

Avant, changer dans la première ligne de code les éléments en rapport avec la taille du widget afin qu’il puisse bien s’insérer dans votre sidebar (où à l’endroit où vous allez le mettre). La largeur ici (width) est à 500px et la longueur (height : 200px).

Après avoir collé le code, enregistrez votre modèle.

#myGallery, #myGallerySet, #flickrGallery
{width: 550px;height: 200px;z-index: 5;}


#flickrGallery
{width: 500px;height: 334px;}


#myGallery img.thumbnail, #myGallerySet img.thumbnail
{display: none;}


.jdGallery
{overflow: hidden;position: relative;}


.jdGallery img
{border: 0;margin: 0;}


.jdGallery .slideElement
{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWicwAyqsItNX94xtwcbFYJxS2eK3XB8P1E0ZRZyaj2SVCKIK7ewVbOgJ6FcMu6IRAHSlwCY5F9lT4dOqzcGJ0GyPME_9XuVXDNtmllcwihlxjUlBwkU9LepiESGhNStGvZ1rGGBMLnjk/?imgmax=800'); }


.jdGallery .loadingElement
{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWicwAyqsItNX94xtwcbFYJxS2eK3XB8P1E0ZRZyaj2SVCKIK7ewVbOgJ6FcMu6IRAHSlwCY5F9lT4dOqzcGJ0GyPME_9XuVXDNtmllcwihlxjUlBwkU9LepiESGhNStGvZ1rGGBMLnjk/?imgmax=800');}

.jdGallery .slideInfoZone
{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 50px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}


* html .jdGallery .slideInfoZone
{bottom: -1px;}

.jdGallery .slideInfoZone h2
{padding: 7px 10px 2px 10px;font-size: 12px;margin: 0;font-weight: bold;color: #ffffff;text-transform: uppercase;background: #111111;letter-spacing:0em;}

.jdGallery .slideInfoZone p
{font-size: 12px;margin: 2px 5px;color: #fff;padding: 0px 0px 0px 5px;font-family:arial;}

.jdGallery div.carouselContainer
{position: absolute;height: 135px;width: 100%;z-index: 10;margin: 0px;left: 0;top: 0;}

.jdGallery a.carouselBtn
{position: absolute;bottom: 0;right: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #000;color: #fff;cursor: pointer;}

.jdGallery .carousel
{position: absolute;width: 100%;margin: 0px;left: 0;top: 0;height: 115px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}

.jdExtCarousel
{overflow: hidden;position: relative;}

.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{position: absolute;width: 100%;height: 78px;top: 10px;left: 0;overflow: hidden;}

.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{position: relative;}

.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{cursor: pointer;background: #000;background-position: center center;float: left;border: solid 1px #fff;}

.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{margin-bottom: 10px;}

.jdGallery .carousel .label, .jdExtCarousel .label
{font-size: 13px;position: absolute;bottom: 5px;left: 10px;padding: 0;margin: 0;}

.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{font-size: 10px;position: absolute;bottom: 5px;right: 10px;padding: 1px 2px;margin: 0;background: #222;border: 1px solid #888;cursor: pointer;}

.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{color: #b5b5b5;}

.jdGallery a
{font-size: 100%;text-decoration: none;color: inherit;}

.jdGallery a.right, .jdGallery a.left
{position: absolute;height: 99%;width: 25%;cursor: pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity: 0.2;opacity: 0.2;}


* html .jdGallery a.right, * html .jdGallery a.left
{filter:alpha(opacity=50);}


.jdGallery a.right:hover, .jdGallery a.left:hover
{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}


.jdGallery a.left
{left: 0;top: 0;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr0PWd0ANbVaNJTuoIn8HrrThI5b-O4pPswWUHVGHbX_evrbTR90AhnoLkfQK_ZtoI5beYTGQ0EWJZNeACIRafu664hP7jpLRezNiOdWyVh6UauM26m8l-nB-nOnMZqIkWWQE51xW2OGA/?imgmax=800') no-repeat center left;}


* html .jdGallery a.left { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr0PWd0ANbVaNJTuoIn8HrrThI5b-O4pPswWUHVGHbX_evrbTR90AhnoLkfQK_ZtoI5beYTGQ0EWJZNeACIRafu664hP7jpLRezNiOdWyVh6UauM26m8l-nB-nOnMZqIkWWQE51xW2OGA/?imgmax=800') no-repeat center left; }


.jdGallery a.right
{right: 0;top: 0;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkwnm9YcvUHXLNighYRbeUrgZGfDg9y-ZrjEe4bxcQDhej9id8Jd6OTd8bWAoNMbSbk4bEKsWxJ18l8ZKtVFz9eR_OZaNP2Jw8Vdq93NUg-oW9rImbz0x8gO1Kf0U6LhyNS6kdZYtjp8E/?imgmax=800') no-repeat center right;}


* html .jdGallery a.right { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkwnm9YcvUHXLNighYRbeUrgZGfDg9y-ZrjEe4bxcQDhej9id8Jd6OTd8bWAoNMbSbk4bEKsWxJ18l8ZKtVFz9eR_OZaNP2Jw8Vdq93NUg-oW9rImbz0x8gO1Kf0U6LhyNS6kdZYtjp8E/?imgmax=800') no-repeat center right; }

.jdGallery a.open
{left: 0;top: 0;width: 100%;height: 100%;}

.withArrows a.open
{position: absolute;top: 0;left: 25%;height: 99%;width: 50%;cursor: pointer;z-index: 10;background: none;-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}

.withArrows a.open:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaonK5ISn60yqyHWl1MEo4tCTEKwOns6dQxpxZdmzIDNvz11zJowIJeKhFsIKxd_k7fd1oXFI7Vee4-O_6Q1-2spw5tUcPK9HuNl_v6oSDeeWBlMlZRCQkKvVv3uvCn5kHWLwTByP9Hlo/?imgmax=800') no-repeat center center; }


* html .withArrows a.open:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaonK5ISn60yqyHWl1MEo4tCTEKwOns6dQxpxZdmzIDNvz11zJowIJeKhFsIKxd_k7fd1oXFI7Vee4-O_6Q1-2spw5tUcPK9HuNl_v6oSDeeWBlMlZRCQkKvVv3uvCn5kHWLwTByP9Hlo/?imgmax=800') no-repeat center center;filter:alpha(opacity=80); }
/* Gallery Sets */


.jdGallery a.gallerySelectorBtn
{z-index: 15;position: absolute;top: 0;left: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #333;color: #fff;cursor: pointer;opacity: .4;-moz-opacity: .4;-khtml-opacity: 0.4;filter:alpha(opacity=40);}


.jdGallery .gallerySelector
{z-index: 20;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #000;}


.jdGallery .gallerySelector h2
{margin: 0;padding: 10px 20px 10px 20px;font-size: 20px;line-height: 30px;color: #fff;}


.jdGallery .gallerySelector .gallerySelectorWrapper
{overflow: hidden;}


.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{margin-left: 10px;margin-top: 10px;border: 1px solid #888;padding: 5px;height: 40px;color: #fff;cursor: pointer;float: left;}

.jdGallery .gallerySelector .gallerySelectorInner div.hover
{background: #333;}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{background: #000;background-position: center center;float: left;border: none;width: 40px;height: 40px;margin-right: 5px;}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{ margin: 0;padding: 0;font-size: 12px;font-weight: normal;}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{ margin: 0;padding: 0;font-size: 12px;font-weight: normal;color: #aaa;}


Une astuce de Blogspot Tutorials

@ +