20090715101242!Jquery-logo[1]
Dev

Fixer sa barre de navigation au scroll de la souris

5 commentaires

Pourquoi fixer la barre de navigation au scroll de la souris ?

Effet de mode ou pas effet de mode, vous avez peu être envie que votre barre de navigation soit toujours visible. Ce qui n’est pas le cas quand l’utilisateur utilise la roulette de sa souris pour aller plus bas dans votre site.

Pour éviter de cacher sa barre de navigation, il a une solution !

Comment fixer la barre de navigation?

On commence par localiser sa barre de navigation dans le code source

<div id='navigation'>
 Lien1 - Lien2 - Lien3
 </div>

Puis le style css correspondant

#navigation{
 background: #777777;
 height: 50px;
 }

On y ajoute

.fixNavigation{
 z-index: 9999;
 position: fixed;
 top: 0;
 /* Mise en forme */
 width: 900px; /* <-- Largeur de votre site */
 }

Ensuite on ajoute le lien vers le fichier JQuery (Bibliothèque JavaScript libre)

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>

Puis la fonction suivante

<script type='text/javascript'>
 $(function(){
   $(window).scroll(function () {//Au scroll dans la fenetre on déclenche la fonction
      if ($(this).scrollTop() > 150) { //si on a défilé de plus de 150px du haut vers le bas
          $('#navigation').addClass("fixNavigation"); //on ajoute la classe "fixNavigation" à <div id="navigation">
      } else {
      $('#navigation').removeClass("fixNavigation");//sinon on retire la classe "fixNavigation" à <div id="navigation">
      }
   });
 });
 </script>

Vérifiez bien le nom des ID /Class dans votre css et dans le script JQuery Exemple: id=’navigation’ => #navigation

Un exemple !

Exemple pour fixer un menu
wordpress-logo-notext-rgb[1]
Wordpress

Footer personnalisable sur wordpress

8 commentaires

Pourquoi personnaliser le footer de son site ?

Votre footer ne vous plait pas! Si la ou les licences de votre thème wordpress vous permettent de retravailler les codes sources afin de les adapter à vos besoins. Les étapes ci-dessous vous permettrons d’ajouter certaines informations.
C’est à dire :

  • Ajouter des liens vers certaines pages (contact, mentions légales, plan du site, …)
  • Ajouter les boutons des médias sociaux (facebook/twitter/google)
  • Ajouter un texte pour présenter rapidement le site
  • Ajouter des widgets configurables dans la partie administration
  • …

Etape 1 : Repérer les fichiers à modifier

Suivant le thème qui vous utilisez, vous aurez plus ou moins la même configuration, à savoir, les fichiers suivants:

  • footer.php > Fichier contenant tout se qui sera afficher dans le pied de page
  • function.php > Fichier répertoriant certaines configurations du thème
  • styles.css > Fichier contenant le css de votre thème

Etape 2 : Ajouter 3 widgets personnalisables

Dans « footer.php », là où commence votre pied de page, ajoutez:

<!-- footer.php > debut widget footer -->
<div class="footer-scoco">
<div class="footer-widget-scoco">
<ul class="widget-scoco">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-f1') )?>
</ul>
</div>
<div class="footer-widget-scoco">
<ul class="widget-scoco">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-f2') )?>
</ul>
</div>
<div class="footer-widget-scoco">
<ul class="widget-scoco">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-f3') )?>
</ul>
</div>
<div style="clear:both;float:none;"></div>
</div>
<!-- /fin widget footer -->

Dans « style.css », à la fin, ajouter :

Adaptez le css à votre thème

/* styles.css > apparence du footer */
.footer-widget-scoco{width: 33%;float:left;} 
.footer-widget-scoco h2{margin: 0;}
.footer-widget-scoco ul{list-style: none;margin: 0;padding: 0;}
.footer-widget-scoco li{list-style: none;margin: 0;padding: 0;}

Dans « function.php », ajouter :

/* Function.php > Debut Widget Footer */
register_sidebar(array(
'name'=>'widget-f1',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(array(
'name'=>'widget-f2',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(array(
'name'=>'widget-f3',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
/* Function.php > Début Widget Footer */

Etape 3 : Remplissez vos widgets !

Si il vous manque des informations, n’hésitez pas à me contacter. J’améliorerai cet article par la suite.

wordpress-logo-notext-rgb[1]
Outils, Wordpress

WordPress: Liste de plugins intéressants à utiliser

Laisser un commentaire

Sur wordpress, pourquoi utiliser des extensions ?

L’utilisation d’extensions (plugins) va vous servir à améliorer l’ergonomie de votre blog/site, son référencement, son utilisation.
Des extensions sont des petits programmes, des morceaux de code qui vont venir s’ajouter à ceux de wordpress pour dans certain cas, optimiser certaines parties. L’utilisation de plugin, n’est pas obligatoire car nous pouvons nous même, dans certain cas, ajouter/modifier ce que nous voulons.

Exemple: Ajouter le bouton « J’aime » de facebook, « +1″ de Google, Tweet de « Tweeter »

Quels plugins ai-je choisi et pourquoi ?

Akismet

Akismet, c’est une des deux extensions proposées à la première utilisation de wordpress. Il est très utile pour lutter contre le spam. Je vous conseille grandement de l’activer.

Contact Form 7

Contact Form 7, c’est un plugin pour créer et intégrer des formulaires de contact ou des questionnaires. Il très simple d’utilisation et fonctionne parfaitement. Pour un formulaire de contact, il vous suffit de choisir les champs que vous souhaitez et Contact Form 7 vous donne un petit morceau de code à intégrer dans une page (celle où vous souhaitez avoir votre formulaire)

NextGEN Gallery

Besoin d’une galerie photo pour votre blog, NextGEN Gallery est la solution parfaite.
Très complet et très performant, la gestion des images/photos se fait rapidement et simplement. Ce plugin offre la possibilité de faire des diaporamas avec ou sans effets, d’ajouter un filigrane sur les images afin de préserver les droits d’auteur.

Shareaholic ou ShareThis

Shareaholic ou Sharethis sont des plugins spécialisés pour les réseaux sociaux, c’est à dire qu’il vont simplifier le partage des articles sur divers médias du web.
Comme je l’ai dis plus haut, c’est des scripts que nous pouvons installer nous même sans avoir besoin de ces plugins. Si vous avez les compétences, installez le morceau de code disponible sur facebook, google plus, twitter, … vous même sinon utilisez un de ces deux plugins.

WordPress SEO

Yoast WordPress SEO est un plugin pour améliorer votre référencement et votre visibilité sur le net. C’est un plugin très complet et pratique. WordPress SEO propose aussi quelques conseils pour améliorer votre contenu affin qu’il soit plus pertinent pour les moteurs de recherche.

Exemple:

  • Ce mot-clef / cette phrase apparaît dans le lien URL de cette page.
  • Le mot-clef / phrase clef principal apparaît dans 2 (sur 7) sous titres de votre texte. Bien que n’étant pas un facteur majeur pour le classement, cela est tout de même bénéfique.
  • Le mot-clef apparaît dans le premier paragraphe du texte.
  • Cette page a 1 lien(s) externe(s).
  • La densité du mot-clef est de 1.51%, ce qui est bon, le mot-clef a été trouvé 5 fois.
  • Ce titre de page contient un mot-clef / phrase au début ce qui devrait permettre d’améliorer votre classement.
  • Pour cette balise méta description, n’oubliez pas de considérer :Comment se compare-t-elle à la concurrence ? Pourrait-elle être plus attrayante ?
  • La méta description contient le mot-clef / phrase principal
  • Il y a 332 mots dans le corps du texte, ce qui est supérieur au minimum recommandé de 300 mots.
  • Le titre de cette page compte plus de 40 caractères et moins que la limite recommandée de 70 caractères.
IMG_0202
Roller quad, Sports

Montage quad – Chaussure de foot Umbro Turbine FG et Diker Escuela

Laisser un commentaire

Pourquoi des quads custom ?

img_02021Depuis que j’ai commencé le roller quad, c’est-à-dire en janvier 2012, je roule avec des Riedell R3 (patins très bien pour commencer le Roller Derby mais pas très pérenne dans le temps). Mais depuis mes débuts, j’ai beaucoup roulé donc un changement s’impose. Avec l’aide de Wawa, j’ai donc choisi de me monter une paire de quad custom.
Pourquoi du custom alors que pleins de shop proposent des quads de bonne qualité déjà montés ?
Tout simplement parce que je voulais quelque chose que personne n’a, de plus Wawa m’a bien vendu son concept, à savoir, rouler avec une paire de chaussure de foot.

Premières impressions

img_02031Pendant les premières minutes d’essais, la sensation des chevilles à l’air libre (non maintenues) n’est pas rassurante, mais on s’y fait très vite. Pour s’arrêter, ayant l’habitude des R3, je plante les tampons, mais manque de chance, je n’ai pas de tampon sur ces platines … Je vous laisse imaginer la chute ^^. En patinant avec, on sent très bien que nous sommes avec des grosses roues car une inertie nous emporte et plus possible de s’arrêter.
La chaussure est très confortable, au début le pied glissait un peu, mais le problème a été résolu avec une bonne semelle. Les patins pèsent 1,7kg chacun, les roues de 76mm sont en parti responsable de ce poids.

Caractéristiques du matériel

  • Chaussures : Umbro Turbine FG (Decathlon)
  • Platine : Diker Escuela (Hawaii Surf)
  • Roues : Roues Landyachtz Hawgs 76mm

Platine roller quad Diker Escuela

logo-fond-transparent-200-200
Evenement, Roller Derby, Sports

Kamiquadz – Leur 1er match face aux Batards

Laisser un commentaire

Kamiquadz vs Unnamed Basterds

C’est ce dimanche 7 octobre au Gymnase Albert Batteux que les Kamiquadz, équipe de Roller Derby Homme de Montpellier, jouera son premier match face aux Unnamed Basterds.

Qui sont ces Unnamed Basterds?

Unnamed Basterds est une sélection de joueurs venant des quatre coins de l’hexagone pour former une équipe. C’est la seconde fois que les Bâtards (petit surnom des Unnamed Basterds) se forment, la premiere étant pour la French Connection 2 à Toulouse contre les Quad Guards le 1 juillet.

Les filles aussi sont de la partie

Un événement de Roller Derby sans filles, c’est pas un événement de Roller Derby !
Affiche du match Kamiquadz vs UB
Les Death Pouffes de Montpellier seront opposées aux Vierges qui sont aussi une équipe mixée avec des joueuses provenant de Marseille, Aix-en-Provence et Avignon et coachée par Ro Land (Joueur Kamiquadz)

Programme de la journée

  • 12h00 : ouverture des portes
  • 13h00 : match Kamiquadz vs Unnamed Basterd (match homme)
  • 15h00 : concert rock avec le groupe REWIND
  • 16h00 : match Death Pouffes vs Les Vierges (match femme)