Exemple de grilles : mes derniers articles sur la page d'accueil, ou le portfolio Thèmes.

Ici, je vous partage la version la plus simple possible. Je ne vais pas faire compliqué afin que tous, même les débutants, puissent le faire. (moi-même étant débutante ^^)

Lire la suite...

Poèmes, récits, fanfictions, romans et bien d'autres, bon nombre de blogueurs partagent leurs écrits sur le net. Le réseau le plus connu reste Wattpad. Pour ceux qui publient autant sur leur blog que sur Wattpad, saviez-vous que le site proposait un widget ? Perso' je ne l'ai appris que le mois dernier ^^ Il vaut mieux tard que jamais.

Comme le montre l'exemple ci-dessous, le widget présente le titre, le nom de l'auteur, les statistiques, les genres, la couverture ainsi qu'une description et le premier chapitre.

Voici ce que ça donne :

Aperçu d'une histoire de S_Whitebird prise au hasard sur wattpad.

Pour ce faire, rien de plus simple. 

1. Allez sur l'histoire à partager et "commencer à lire".
2. Tout à droite, des boutons de partage pour réseaux sociaux. Cliquez sur le dernier : 
3. Une nouvelle fenêtre s'ouvre. Copiez le code iframe disponible sous l'aperçu du widget.
4. De retour sur votre blog, collez le code dans le code source de votre article. 
5. Ok, puis publier l'article.

L'inconvénient, c'est qu'on ne peut pas changer la taille du widget.

Bonjour,

Petit article pour vous montrer comment déplacer un module de façon à ce qu'il soit positionné au bon endroit quelles que soient les résolutions d'écran. Oui, parce qu'une chose très chiante quand on crée un thème, c’est lorsqu'il s'affiche différemment sur l'ordi des autres... bien souvent sur notre Pc c'est tout beau et sur les autres ça se chevauche, ou certains éléments ne sont pas visibles. Vous voyez de quoi je parle ? ^^ Bref. Passons au tuto.

 Retrouvez la liste des selcteurs → ICI

1- Le code ;

Dans la logique, si je veux déplacer un module, je dois utiliser ce code :

#sélecteur {position: absolute;   /*obligatoire, ça va le détacher de sa place d'origine*/
    bottom: xpx; /*positon depuis le bas de page, remplacer par top si votre module est en haut de page*/
    left: 150px;  /*position depuis la gauche, centré*/
   }

Le code n'est pas faux, si vous souhaitez déplacer un module en dehors du blog, c’est suffisant (à droite ou à gauche, comme mes flèches tout à droite par exemple), cependant, pour les modules en bas ou haut de page par exemple, le module ne s'affichera pas au même endroit selon la taille de l'écran utilisé.

Explication : Si je positionne un module à 150px du bord gauche (left: 150px;) de mon blog, pour moi qui ai un grand écran, je n'aurais pas de soucis d'affichage, le module sera bien sur le côté sans que cela gêne mes articles, cependant, les personnes ayant un petit écran verront ce module chevaucher les articles, ce qui rendra la lecture difficile, voire illisible. Donc, que faire ?

1. Positionnez votre module depuis un côté (left ou right) au milieu du blog, afin qu'il soit bien centré pour toutes les résolutions d'écran, mettre en pourcentage, donc left: 50%; (ou right: 50%;).
2. Ajoutez une marge afin de le positionner où vous voulez.

Ce qui donne :

#sélecteur {
   position: absolute; 
   bottom: xpx;
   left: 50%;  /*position depuis la gauche en %, centré*/
  margin-left: xpx;  /*marge depuis le centre donné par la ligne du dessus, mettre une valeur négative pour déplacer le module vers la gauche*/ }

J'avoue ça ne doit pas être très clair et comme je suis extrêmement nulle en explication, je vais essayer de faire simple.

Le but est de placer en premier lieu votre module au milieu de votre blog en % (50%) afin que quelle que soit la résolution d'écran du visiteur, le module soit bien au centre pour tout le monde. 

Ensuite, grâce à la propriété "margin-left" (ou margin-right) on va ajouter une marge afin de déplacer le module du centre.

Exemple : 

Mon module "Derniers visiteurs" sur mon blog Aoi Sora:

#module_menuxxxxx  {
    position: absolute;
    bottom: 0px; /*tout en bas de page*/
    left: 50%; /*centré*/
    margin-left: -510px; /*à -510 du centre*/
}

left: 50%; place le module au centre, puis la marge (margin-left: -510px;) déplace le module vers la gauche.

Vous savez tous sans doute que pour changer une image au survol en CSS il faut utilisé :hover, exemple: #header :hover Mais là, rien à voir, je vais vous montrer comment faire en HTML pour vos articles ou modules. Je vous préviens ça va être très très simple ^^'

I- Le code.

<img src="image1.png" onmouseover="this.src='image2.png'"onmouseout="this.src='image1.png'" />  

Il faut évidemment 2 images (2 liens, il faut donc héberger les images).

Image 1 (en rose), celle que l'on voit en premier et l'image 2 (en orange), celle qui apparaît lorsque qu'on survole la première. Pour ce code, il est recommandé d’utiliser des images au format .png

II- Mon exemple.

Image 1 > 

Image 2 > 

Pour mon exemple, j'ai gardé la même image en ajoutant simplement du texte, mais vous pouvez mettre ce que vous voulez.