Outils Blogger: Outils, Astuces, Widgets, Modèles, Monétisation, Seo-Référencement: Widgets Blogger

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

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

Premièrement connectez-vous à votre blog et allez au
1. Présentation > Éléments de la page > " Ajouter un gadget "
2. Sélectionnez HTML / JavaScript
3. Choisissez l'horloge que vous aimez, et collez le code dedans :

<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/226655.swf">
<embed src="http://www.csalim.com/clocks/226655.swf" width="200" height="200">
</embed>
</object>

<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/985396.swf">
<embed src="http://www.csalim.com/clocks/985396.swf" width="200" height="200">
</embed>
</object>

<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/189466.swf">
<embed src="http://www.csalim.com/clocks/189466.swf" width="200" height="200">
</embed>
</object>

<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/633993.swf">
<embed src="http://www.csalim.com/clocks/633993.swf" width="200" height="200">
</embed>
</object>

<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/118647.swf">
<embed src="http://www.csalim.com/clocks/118647.swf" width="200" height="200">
</embed>
</object>

<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/301788.swf">
<embed src="http://www.csalim.com/clocks/301788.swf" width="200" height="200">
</embed>
</object>

<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/945910.swf">
<embed src="http://www.csalim.com/clocks/945910.swf" width="200" height="200">
</embed>
</object>

<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/267241.swf">
<embed src="http://www.csalim.com/clocks/267241.swf" width="200" height="200">
</embed>
</object>

<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/119643.swf">
<embed src="http://www.csalim.com/clocks/119643.swf" width="200" height="200">
</embed>
</object>

<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/548744.swf">
<embed src="http://www.csalim.com/clocks/548744.swf" width="200" height="200">
</embed>
</object>

<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/205420.swf">
<embed src="http://www.csalim.com/clocks/205420.swf" width="200" height="200">
</embed>
</object>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-183.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-179.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-175.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-72.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-177.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-168.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-165.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-102.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-101.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

Des Horloges Flash pour Blogger

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

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

Premièrement connectez-vous à votre blog et allez au
1. Présentation > Éléments de la page > " Ajouter un gadget "
2. Sélectionnez HTML / JavaScript
3. Collez le code ci-dessous

<div id="google_translate_element">
</div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'fr'
}, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
<p> <small>
    <a target="_blank" href="http://outils-blogger.blogspot.com/2011/06/ajouter-traduction-google.html">
    +</a>
    <a href="http://outils-blogger.blogspot.com/2011/06/ajouter-traduction-google-sans-drapeaux.html">
    Obtenir ce Widget</a></small></p>

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

Ajouter traduction google sans drapeaux à blogger

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

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

Voici pour vous le code à insérer dans un widget Html/Javascript (pour ceux qui utilisent Blogger). Pour les autres plateformes des blogs, le code marchera aussi (il suffit de savoir comment y installer un code html).

<div style="border:1px solid #ccc;padding:10px 4px 3px 4px;text-align:center;background-color:#FFFFFF;"> <!-GOOGLE TRADUCTION AVEC DRAPEAU-> <div align="center"> <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cen&hl=fr&ie=UTF8'); return false;" title="English translation "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to French " src="http://cdn1.iconfinder.com/data/icons/finalflags/32/United-Kingdom-flag.png" height="24" title="English translation "/></a> <!- fin de la traduction en anglais -> <!- début de la traduction en espagnol -> <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=fr%7Ces&hl=fr&ie=UTF8'); return false;" title="Traducir en español "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Traducir en español " src="http://cdn1.iconfinder.com/data/icons/finalflags/32/Spain-Flag.png" height="24" title="Traducir en español "/></a> <!- fin de la traduction en espagnol -> <!- début de la traduction en allemand -> <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); return false;" title="ins Deutsche übersetzen"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt=" ins Deutsche übersetzen" src="http://cdn1.iconfinder.com/data/icons/finalflags/32/Germany-Flag.png" height="24" title="ins Deutsche übersetzen"/></a> <!- fin de la traduction en allemand -> <!- début de la traduction en italien -> <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cit&hl=fr&ie=UTF8'); return false;" title="Tradurre in italiano"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt=" Tradurre in italiano" src="http://cdn1.iconfinder.com/data/icons/finalflags/32/Italy-Flag.png" height="24" title="Tradurre in italiano"/></a> <!- fin de la traduction en italien -> <!- début de la traduction en russe beta -> <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cru&hl=fr&ie=UTF8'); return false;" title="перевод в Россию"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt=" ins Deutsche übersetzen BETA " src="http://cdn1.iconfinder.com/data/icons/finalflags/32/Russia-Flag.png" height="24" title="перевод в Россию "/></a> <!- fin de la traduction en russe beta -> <!- début de la traduction en chinois (simplifié) beta -> <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=fr%7Czh-CN&hl=fr&ie=UTF8'); return false;" title="翻译成中文（简体）"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-Chinese (Simplifié) BETA" src="http://cdn1.iconfinder.com/data/icons/finalflags/32/China-Flag.png" height="24" title="翻译成中文（简体）"/></a> <!- fin de la traduction en chinois (simplifié) beta-> <!- début de la traduction en japonais beta -> <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cja&hl=fr&ie=UTF8'); return false;" title="日本で翻訳"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Traduction-Français-en-japonais" src="http://cdn1.iconfinder.com/data/icons/finalflags/32/Japan-Flag.png" height="24" title="日本で翻訳"/></a> <!- fin de la traduction en japonais beta -> <!- début de la traduction en coréen beta -> <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cko&hl=fr&ie=UTF8'); return false;" title="한국어로 번역"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt=" 한국어로 번역" src="http://cdn1.iconfinder.com/data/icons/finalflags/32/Korea-Flag.png" height="24" title="한국어로 번역"/></a></div>
    <p> <sup>Traduit par</sup>
    <img align="absmiddle" src="http://www.google.com/ig/modules/translatemypage_content/logo.gif"><br/> <small>
    <a target="_blank" href="http://outils-blogger.blogspot.com/2011/06/ajouter-traduction-google-avec-drapeaux.html">
    +</a>
    <a href="http://outils-blogger.blogspot.com/2011/06/ajouter-traduction-google-avec-drapeaux.html">
    Obtenir ce Widget</a></small><br/> </div>

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

Ajouter traduction google avec drapeaux à blogger

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

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

Nous avons tous besoin de savoir ce que nos visiteurs pensent sur nos postes de Blogspot?

Voilà un est excellent moyen facile et agréable qui nous permet d'ajouter des étoiles de notation pour vos messages de blog et d'obtenir une rétroaction instantanée de nos visiteurs.

Vous aurez besoin de cliquer sur le lien que nous vous fournirons dans ce post.

Vous trouverez ce widget de notation sur outbrain.com disponible en 5 systèmes de blog populaire. cliquez sur l'icône blogger. Alors vous pouvez voir les deux étapes.

Etape 1 : Inscription (facultatif)
Etape 2 : Installer widget

Comme vous le voyez vous n'êtes pas obligés de s'inscrire pour pouvoir utiliser ce widget.

Après avoir cliqué sur le bouton Install . Vous serez redirigé vers blogger.com, vous connecter, et ajouter ce widget.

Vous pouvez trouver ce widgetici . Outbrain rating star widge, visitez ce blog pour voir en direct widget de notation démo. : http://outils-blogger-test.blogspot.com/

Merci pour outbrain.com qui nous a offert un tel widget.

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

Ajouter gadget de notation à blogger

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

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

Pour ajouter un compteur de visites à blogger :
1 - Créer un compte Histats à partir d'ici : Register
2 - Après connectez-vous à votre compte et allez à cette page : http://www.histats.com/viewstats/?cnt=p_reg pour créer un compteur à votre site en cliquant sur l'icone Stats
3 - Cliquez sur Code du compteur -->

add new counter --> Choisissez le convenable à votre site --> Cochez les informations que vous voulez afficher sur le compteur ( Visiteurs aujourd'hui,

Total de visiteurs,

Pages vues aujourd'hui,

Nombre total de pages vues,

Visiteurs en ligne)
Cliquez sur Save --> Couter id : ******* --> Copiez le code au dessous de la page et collez le dans un nouvelle gadget --> HTML / JavaScript

Ajouter un compteur de visites à blogger

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

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

1 - Créer un compte Cbox :

Connectez-vous à : http://cbox.ws
Cliquez sur Sign Up.
Remplissez vos informations.
Confirmez votre adresse e-mail en cliquant sur le lien dans le message que vous recevrez par e-mail.

2 - Accedez à votre compte Cbox :

Look & Feel : ici vous pouvez gérer votre style de fenêtre de chat. comme les options de mise en page, style de galerie, modifier le style ou modifier css.

Options : ici, vous pouvez régler vos options d'affichage, les options de date, des sourires et des options de filtrage.

Users & Access : gérer l'accès et vos utilisateurs.

Messages : vous pouvez vérifier vos messages ici.

3 - Personnalisez votre zone de chat à partir de Look & Feel.

4 - Finalement publier votre zone de chat sur votre site en cliquant sur Publish, Choisissez Blogger / Blogspot, copiez le code et connectez-vous à Blogger --> Présentation --> Eléments de la page --> Ajouter un gadget --> HTML / JavaScript. Collez le code et enregistrez.

Ajouter une zone de chat Cbox à Blogger

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 des boutons Tweet à blogger.

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

Chercher le code : <data:post.body/> et juste avant coller le code suivant :

<b:if cond='data:blog.pageType == "item"'>
<div class="tweetbutton" style="float:left; padding:6px;">
<a href="http://twitter.com/share" class="twitter-share-button" expr:data-url='data:post.url' expr:data-text='data:post.title' data-count="horizontal" data-via="OutilsBlogger">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

</b:if>

Vous pouvez la position du bouton en remplaçant left par right ou center.
En remplaçant horizontal par vertical ou none vous aurez d'autres modèles de Tweet :

Horizantal :

Vertical :

None : sans compteur

data-via="OutilsBlogger pour afficher votre nom après le Tweet : @OutilsBlogger. Vous pouvez supprimer le code si vous voulez.

Le code en bleu pour afficher les boutons seulment dans les posts. Supprimez le code pour affichez les boutons aussi dans la page d'accueil.

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

Ajouter des boutons Tweet à blogger

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

Chercher le code : <p><data:blogCommentMessage/></p> et juste avant coller le code suivant :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3yVGq-reaAu2hK4qbob8eu7zOKnE4w3efhacWgUAy0ssuOZJEGLrvWJSUW21vjf94aDyAKOY0T09hDb00HCC4G4e-ACi-zQ18Dm0H1uOvyr6q-lxQoK1FuXJv9CnISNrkZKsGLosZw89n/s104/commenter.png" border="0" />

Remplacez le lien en rouge par le lien de l'image que vous voulez mettre.
Pour voir le résultat :

Avant

Après

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

Ajouter une image avant les commentaires

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 des présentations PowerPoint à blogger.

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

Suivez cette explication :

How To Add Power Point Presentations To Blogger

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

Ajouter des présentations PowerPoint à blogger

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

Chercher le code : </head> et juste avant coller le code suivant :

<style type="text/css">/* menu styles */#jsddm{ margin: 0;padding: 0}#jsddm li{ float: left;list-style: none;font: 12px Tahoma, Arial}#jsddm li a{ display: block;background: #324143; /*DARK-GREEN*/padding: 5px 12px;text-decoration: none;border-right: 1px solid white;width: 70px;color: #EAFFED;white-space: nowrap}#jsddm li a:hover{ background: #24313C}#jsddm li ul{ margin: 0;padding: 0;position: absolute;visibility: hidden;border-top: 1px solid white}#jsddm li ul li{ float: none;display: inline}#jsddm li ul li a{ width: auto;background: #A9C251; /*LIGHT-GREEN*/color: #24313C}#jsddm li ul li a:hover{ background: #8EA344}</style><script src="https://sites.google.com/site/outilsblogger/liste-deroulante/jquery-min.js" type="text/javascript"></script><script type="text/javascript">var timeout = 500;var closetimer = 0;var ddmenuitem = 0;function jsddm_open(){ jsddm_canceltimer();jsddm_close();ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}function jsddm_close(){ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}function jsddm_timer(){ closetimer = window.setTimeout(jsddm_close, timeout);}function jsddm_canceltimer(){ if(closetimer){ window.clearTimeout(closetimer);closetimer = null;}}$(document).ready(function(){ $('#jsddm > li').bind('mouseover', jsddm_open);$('#jsddm > li').bind('mouseout', jsddm_timer);});document.onclick = jsddm_close;</script>

Pour changer la couleur du gadget : voilà le code de chaque couleur, cherchez les dans le code ci-dessus et remplacez avec ce qui vous convient.

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

Enregistrer le modèle.

Maintenant orientez vers :

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

et collez le code suivant :

<ul id="jsddm"><li><a href="http://outils-blogger.blogspot.com/">JavaScript</a><ul><li><a href="http://outils-blogger.blogspot.com/">Drop Down Menu</a></li><li><a href="http://outils-blogger.blogspot.com/">jQuery Plugin</a></li><li><a href="http://outils-blogger.blogspot.com/">Ajax Navigation</a></li></ul></li><li><a href="http://outils-blogger.blogspot.com/">Effect</a><ul><li><a href="http://outils-blogger.blogspot.com/">Slide Effect</a></li><li><a href="http://outils-blogger.blogspot.com/">Fade Effect</a></li><li><a href="#">Opacity Mode</a></li><li><a href="http://outils-blogger.blogspot.com/">Drop Shadow</a></li><li><a href="http://outils-blogger.blogspot.com/">Semitransparent</a></li></ul></li><li><a href="http://outils-blogger.blogspot.com/">Navigation</a></li><li><a href="http://outils-blogger.blogspot.com/">HTML/CSS</a></li><li><a href="http://outils-blogger.blogspot.com/">Blogger Help</a></li></ul>

Remplacer les liens en rouge par les liens des pages.

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

Ajouter Menu déroulante à blogger

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 ---> Éléments de la page ---> Ajouter un gadget ---> HTML / JavaScript

et collez le code suivant :

<a href="#">
<img src="http://cdn1.iconfinder.com/data/icons/snowish/64x64/actions/go-top.png"
alt="Back to Top"
title="Back to Top"
style=" display: scroll;
position: fixed;
bottom: 5px;
right: 5px;" />
</a>

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

Ajouter bouton 'Retournez en haut de page' à blogger

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

Chercher le code : ]]></b:skin> et juste avant coller le code suivant :

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #919106;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk6nxrFr_qdKdvLbqO2uCWC3ueYZ4hIvKiuASuFLxTdBqWyuKhy2dQ9hb1qR6HtBLAXM_KymafZS2pMGL1z26KGTljjASUj1Yt1XI4K8D2Rv6QMr-MzbfN6ZAWcnHYjAzvddeu5oIvS5s/s400/wp2.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
border:1px solid #aeae0a;
background: #ccc url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk6nxrFr_qdKdvLbqO2uCWC3ueYZ4hIvKiuASuFLxTdBqWyuKhy2dQ9hb1qR6HtBLAXM_KymafZS2pMGL1z26KGTljjASUj1Yt1XI4K8D2Rv6QMr-MzbfN6ZAWcnHYjAzvddeu5oIvS5s/s400/wp2.jpg) 0 -25px repeat-x;
}

.showpageOf{
margin:0 8px 0 0;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #919106;
background: #666 url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk6nxrFr_qdKdvLbqO2uCWC3ueYZ4hIvKiuASuFLxTdBqWyuKhy2dQ9hb1qR6HtBLAXM_KymafZS2pMGL1z26KGTljjASUj1Yt1XI4K8D2Rv6QMr-MzbfN6ZAWcnHYjAzvddeu5oIvS5s/s400/wp2.jpg) 0 0 repeat-x;
text-decoration: none;
}

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

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='https://sites.google.com/site/outilsblogger/page-navigation/pagenavigation.js' type='text/javascript'></script>

var postperpage=7; Nombre de posts sur chaque page
var numshowpage=4; Nombre de numéros qui seront aficher dans le widget

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

Ajouter pages navigation à blogger

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

Chercher le code : </head> et juste avant coller le code suivant :

<script src='https://sites.google.com/site/outilsblogger/jquery-slideshow/JquerySlideshow.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
   function () {
           clearInterval(timer);
   },
   function () {
           timer = setInterval('gallery()',speed);
   }
);

}

function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
           //Display the content
           $('#slideshow-caption h3').html(title);
           $('#slideshow-caption p').html(desc);
           $('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

Enregistrer le modèle.

Maintenant orientez vers :

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

et collez le code suivant :

<ul class="slideshow">

<li><a href="Lien du post"><img src="Lien de l'image" title="Titre du post" alt="Description du post." /></a></li>

<li><a href="Lien du post"><img src="Lien de l'image" title="Titre du post" alt="Description du post." /></a></li>

<li><a href="Lien du post"><img src="Lien de l'image" title="Titre du post" alt="Description du post." /></a></li>

</ul>

Et pour afficher seulement sur la page d'accueil, au lieu du code ci-dessus coller le code suivant :

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>

<div class='slideshow'>
<ul class="slideshow">

<li><a href="Lien du post"><img src="Lien de l'image" title="Titre du post" alt="Description du post." /></a></li>

<li><a href="Lien du post"><img src="Lien de l'image" title="Titre du post" alt="Description du post." /></a></li>

<li><a href="Lien du post"><img src="Lien de l'image" title="Titre du post" alt="Description du post." /></a></li>

</ul>

</div>

</b:if></b:if>

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

Ajouter Jquery Slideshow à blogger

Visiteurs

Outils Blogger

Modèles Blogger Par Colonnes

Modèles Blogger Par Couleur

Modèles Blogger Par Thème

Membres

Statistiques