TutorielsWebmaster

Tuto | Un bouton lecture sur vos news contenant une vidéo

Comme sur la NeozOne, ce petit tutoriel va vous permettre d’installer un bouton Lecture automatiquement sur toutes vos images de news contenant une vidéo. Il faudra surement l’adapter par rapport à votre Template mais voici comment faire.

Nous allons afficher automatiquement un bouton lecture sur l’image d’introduction de vos news appartenant à la catégorie “Video”. Cette icone s’affichera uniquement sur la page d’accueil, les archives et les pages de la catégorie Vidéo. Jamais sur la page de l’article. (Pensez à créer cette catégorie si vous ne l’avez pas sur votre blog)

1: La premiere étape va être de créer l’image “Lecture” vous pouvez pour commencer prendre la mienne calqué sur le style de Youtube et la copier dans le répertoire “images” de votre template wordpress.

 

playingvideo.png
playingvideo.png

 

2: Dans un deuxième temps nous allons créer le style dans la feuille css. Le but est d’afficher le bouton lecture sur votre image de news contenant un film vidéo. Ce bouton disparaitra sur la page de l’article seul exactement comme sur mon blog. Il vous suffit de rajouter ces lignes dans votre feuille de style.

.category-videos .playingvideo
{
display: block;
position: absolute;
top: 225px;
left: 300px;
background: url(images/playingvideo.png) 0 -0 no-repeat;
z-index: 100;
height: 91px;
width: 91px;
}
.category-videos .playingvideo:hover 
{
display: block;top: 225px;
left: 300px;
background: url(images/playingvideo.png) 0 -91px no-repeat;
z-index: 100;
height: 91px;
width: 91px;
}
.single .playingvideo 
{
display: none;
}

3: La troisième étape est d’insérer le code html sur votre blog. Ayant un thème crée avec Artisteer je l’ai intégré sur le fichier “post_title.php

N’étant pas un spécialiste des feuilles de style je pense qu’il y a moyen de faire un code plus propre, mais le miens a déjà le mérite de fonctionner sur Chrome, Firefox et IE8, je suis prêt à le modifier si vous pensez pouvoir l’optimiser.

Comme je le disais au début du tuto, il va surement falloir que vous l’adaptiez à votre Template, au niveau des coordonnées d’affichage, et de l’insertion du code html sur votre blog.

 

Plus de 900 000 abonné(e)s nous suivent sur les réseaux ! Pourquoi pas vous ? Abonnez-vous à notre Newsletter ou suivez-nous sur Google News et sur WhatsApp pour ne manquer aucune invention et innovation !

Alexandre Bonazzi

J'ai presque un demi-siècle et papa de deux grandes filles. J'ai fait des études en droit et travaillé pendant 30 ans dans une société d'études et de conseil en marketing. Aujourd'hui, je suis créateur de site internet pour les petites entreprises. Je suis passionné par les nouvelles technologies, la High-tech et la pop culture en général. J'ai fondé le site NeozOne en 1999 et depuis je partage avec vous (bénévolement) mes astuces, mes tests et quelques fois mes humeurs, je modère également les commentaires de NeozOne. Je suis par ailleurs amateur de cinéma, série TV, les jeux de plateaux et les jeux de rôles. N'hésitez pas à me contacter directement par courrier électronique pour toute question

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *


Bouton retour en haut de la page