Ajouter Jquery Lightbox à Blogger

Publié par Othmane BENTALEB à 22:25

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

Cette fois, on va savoir comment ajouter Jquery Lightbox pour améliorer l'affichage des images
dans son Blogger. Comme vous voyez sur mon blog.

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

Connectez-vous à votre tableau de bord Blogger et accédez à

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

Maintenant chercher le code : <body> et coller le code suivant juste avant ce code :

<script src='https://sites.google.com/site/outilsblogger/jquery-lightbox/jquery.min.js' type='text/javascript'/>
<style type='text/css'>
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>
<script src='https://sites.google.com/site/outilsblogger/jquery-lightbox/jquery.lightbox-0.4.js' type='text/javascript'/>
<link href='https://sites.google.com/site/outilsblogger/jquery-lightbox/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(function() {
$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script>