DESIGN BLOG (le lys orangé)

22 mai 2013

Ajouter un séparateur d'article (2)

Il y a quelque temps je vous ai déjà expliqué une nouvelle astuce montrant comment séparer les articles les uns des autres (voir Ajouter un séparateur d'articles). Aujourd'hui je vous propose de vous en montrer une autre permettant de séparer un article des différents éléments qui se trouvent à sa suite (pied d'article, barre de partage, barre de vote, etc.).

Voici un exemple de ce que cela donne. L'image d'une gomme marque la fin de l'article avant le pied d'article :

divider3-ecrancopie écran

Pour réaliser cet effet sans modifier le HTML, il suffit d'apporter quelques petites modifications à la feuille de style (CSS).

1- Il faut tout d'abord ajouter le sélecteur .blogbody .itemfooter:before (juste avant le sélecteur .blogbody .itemfooter, ce sera plus pratique pour la suite) :

.blogbody .itemfooter:before {
    ...
}

2- Ensuite y insérer la propriété position avec la valeur absolute, puis insérez la propriété position avec la valeur relative dans le sélecteur .blogbody .itemfooter :

.blogbody .itemfooter:before {
    position: absolute;
}
.blogbody .itemfooter {
    ...
    position: relative;
}

 3- Dans le sélecteur .blogbody .itemfooter:before, ajoutez la propriété content suivie de l'URL de l'image :

.blogbody .itemfooter:before {
    position: absolute;
    content: url("http://p8.storage.canalblog.com/84/60/898602/85455338.png");
}

 4- Toujours dans le même sélecteur, ajoutez la propriété top suivie de la valeur numérique égale à la hauteur de l'image et précédée du signe négatif :

.blogbody .itemfooter:before {
    position: absolute;

    content: url("http://p8.storage.canalblog.com/84/60/898602/85455338.png");
    top: -76px;
}

5- Dans le sélecteur .blogbody .itemfooter, ajoutez la propriété margin-top suivie du même nombre (la valeur numérique de la hauteur de l'image) :

.blogbody .itemfooter:before {
    position: absolute;
    content: url("http://p8.storage.canalblog.com/84/60/898602/85455338.png");
    top: -76px;
}
.blogbody .itemfooter {
    ...
    position: relative;
    margin-top: 76px;
}

6- Enfin, ajoutez la propriété left suivie de sa valeur numérique (qui demande un petit calcul pour que l'image soit bien centrée - voir infra) :

.blogbody .itemfooter:before {
    position: absolute;
    content: url("http://p8.storage.canalblog.com/84/60/898602/85455338.png");
    top: -76px;
    left: 280px;
}
.blogbody .itemfooter {
    ...
    position: relative;
    margin-top: 76px;
}

 7- Ajoutez si nécessaire une marge extérieure supérieure à l'image (margin-top) :

.blogbody .itemfooter:before {
    position: absolute;
    content: url("http://p8.storage.canalblog.com/84/60/898602/85455338.png");
    top: -76px;
    left: 280px;
    margin-top: 10px;
}
.blogbody .itemfooter {
    ...
    position: relative;
    margin-top: 76px;
}

 

Explication du code CSS :

divider3 copie

 

Calcul de la valeur de left :

divider3-left

 

Cette méthode est bien plus complexe que celle que je vous ai expliquée dans un article précédent. On peut se demander pourquoi faire compliqué quand on a une méthode simple à notre disposition ? En fait, c'est le principe qu'il faut retenir car il peut être très utile dans certains cas avec d'autres éléments de la page, notamment ceux qui comportent déjà une image : ajouter une image au-dessus (ou en-dessous) d'une autre comme je l'ai fait dans certains designs personnalisés.

A noter que l'image ainsi définie ne peut être copiée ni par un clic droit ni par d'autres méthodes classiques.

Cet article vous a intéressé ? Cliquez sur l'une des étoiles ci-dessous.

N'oubliez pas de vous inscrire à la NEWSLETTER.

Soutenez-moi en m'ajoutant à vos liens !

 

Posté par Michal53 à 09:22 - - Permalien [#]
Tags : , , , , , , , , , , ,

29 avril 2013

Ajouter la barre de vote "Vous aimez ?"

Cet article s'adresse à celles et ceux qui ne sont pas passé(e)s aux nouveaux thèmes de Canalblog et qui ne souhaitent pas s'atteler à la longue tâche de créer un nouveau modèle (menu "Apparence") mais voudraient quand même afficher une barre de vote à la fin de chacun de leurs articles.

La manipulation est très simple bien qu'elle nécessite de la rigueur.

Dans la page d'accueil et la page des archives :

Il suffit d'ajouter :

<BlogItemRating><br /><$BlogItemRatingWidget$></BlogItemRating>

juste avant la séquence suivante (ne vous préoccupez pas de ce qu'il y a avant cette séquence) :

</div>
</Blogger>

Pour plus de clarté voici en exemple des copies écran de la manipulation :

barre_de_vote04 copieavant l'insertion du code (cliquez sur l'image pour agrandir)

barre_de_vote03 copieinsertion du code (cliquez sur l'image pour agrandir)

Dans la page d'un message :

C'est après la séquence suivante (qui correspond au code de la barre de partage) qu'il faudra placer le code :

<CBIfPage><BlogItemShare><br /><$BlogItemShareWidget$></BlogItemShare>

Pour plus de clarté voici une copie écran de la manipulation :

barre_de_vote05 copieinsertion du code dans la page d'un message

Vous pourrez ensuite configurer votre barre de vote dans le menu "Paramètres", "Options d'affichage" comme indiqué dans l'article précédent.

Encore un article sur un sujet qui n'entre pas dans le cadre de mon blog ! Je n'ai trouvé sur le sujet (une fois l'article rédigé) que le post du 02/10/2012 de kyungjin sur le forum de Canalblog : http://forum.canalblog.com/jforum/posts/list/15889.page.

Nota : Pour les blogs dont j'ai créé le design, contactez-moi si nécessaire.

Posté par Michal53 à 09:00 - - Permalien [#]
Tags : , , , ,
26 avril 2013

La barre de vote, vous aimez ?

Je reviens sur un point que j'ai traité en commentaire de mon dernier article : "la barre de vote".

CONFIGURATION :

Pour la configuration il faut aller dans le menu "Paramètres", "Options d'affichage". Dans la page vous trouverez ceci :

vous-aimez01

1- Tout d'abord vous pouvez décider de l'afficher ou non en répondant à la première rubrique "Afficher une barre de vote à la fin de chaque message".

2- Ensuite vous pourrez personnaliser cette barre en remplaçant les étoiles (choix par défaut) par des médailles ou des smileys :

vous-aimez02

3- Enfin, si le texte "Vous aimez ?" (écrit par défaut) ne vous convient pas vous pouvez le remplacer par une phrase d'incitation à voter sortie tout droit de votre imagination.

FONCTIONNEMENT :

Cette question appelle une réponse de la part du visiteur qui n'aura qu'à cliquer sur l'une des cinq étoiles :

Première étoile : mauvais ;
Deuxième étoile : bof ;
Troisième étoile : pas mal ;
Quatrième étoile : bien ;
Cinquième étoile : excellent !

Les étoiles restent blanches si personne n'a voté, un certain nombre d'entre elles devient jaune (en fonction du vote) si au moins une personne a voté.

A la suite de ces étoiles (ou médailles ou smileys) est indiqué le nombre de votes effectués. En cliquant à cet endroit, on découvre qui sont les votants :

vous-aimez03

un exemple de barre de vote

En cliquant sur les étiquettes où s'affichent l'avatar et le pseudo du blogueur (ou de la blogueuse), on est dirigé vers sa page de profil.

INCIDENCES :

1- Si dans le choix des blocs (menu "Apparence", "Blocs"), vous avez opté pour l'affichage de "Mes messages préférés",

vous-aimez05

les titres de tous les messages pour lesquels vous aurez voté (et cela dans n'importe quel blog !) s'afficheront (à concurrence de 10).

2- Si dans le choix des blocs (menu "Apparence", "Blocs"), vous avez opté pour l'affichage de "Messages les plus populaires",

vous-aimez06

les titres des articles de votre blog pour lesquels les visiteurs (ne serait-ce qu'un seul) ont voté apparaîtront dans l'ordre décroissant de succès. Cet ordre décroissant ne tient compte que de la moyenne obtenue et donc logiquement pas du nombre de votants.

LIMITES :

Seuls les blogueurs de Canalblog peuvent participer au vote.

Si vous n'avez pas installé un modèle de la dernière génération de Canalblog, vous ne disposerez pas automatiquement de ces possibilités.

INTERETS :

Certains ne verront aucun intérêt à cette nouveauté. D'autres, comme moi, y verront le moyen de laisser aux visiteurs une occasion facile de laisser une trace (sympathique, il faut l'espérer) de leur passage car on n'a pas toujours l'envie ou l'inspiration pour écrire un commentaire...

REMARQUES :

C'est la première fois que j'écris un article de cette nature. J'ai bien cherché s'il n'y en avait pas déjà, à part l'article succinct du BLOG DU STAFF.

Si vous avez des questions sur les nouveautés de Canalblog et que vous ne trouvez de réponses nulle part, laissez-moi un commentaire ou un message...

Et n'oubliez pas de voter pour cet article ! ! ! Et pour les articles plus anciens aussi !

24 avril 2013

NEW SLETTER

Déjà plusieurs semaines que je m'active à nouveau sur ce blog en vous proposant de nouveaux articles techniques et de nouveaux designs. Et toujours aussi peu de visites. En fait pratiquement autant que pendant mon absence.

Pourquoi ?

D'abord parce que très très peu d'entre vous (y compris celles et ceux pour qui j'ai travaillé ! ou celles et ceux à qui j'ai fourni une aide quelconque !) se sont inscrits à ma NEWSLETTER.

Ensuite, parce que dans ce nombre, certains n'ont pas coché la case "Etre prévenu à chaque nouveau message publié sur ce blog". Comme je ne publie (comme vous) que rarement de newsletter (case "Recevoir les newsletters envoyées par ce blog"), ils ne sont donc pas du tout au courant de l'actualité du blog.

newsletter3

Alors, qu'attendez-vous pour vous inscrire ici et maintenant ?



Une dernière catégorie d'abonnés : les inconnus !

J'aimerais leur rendre la pareille et m'abonner à leur Newsletter aussi, mais je ne connais pas l'URL de leur blog. Si c'est votre cas (et vous devez bien le savoir car dans ce cas je ne suis pas abonné à votre Newsletter), faites-vous connaître en m'envoyant un message (via "Contacter l'auteur").

Dernière chose :

newsletter2

N'oubliez pas vous-même de cocher la case "Notifier les abonnés au blog" à chaque fois que vous publiez un article...

Faites passer le message...

P.S. Vous n'êtes pas obligés de laisser un commentaire à chacune de vos visites, mais un petit clic sur une des étoiles de "Vous aimez ? 12333 " en bas d'article serait le bien venu.

Posté par Michal53 à 09:10 - - Permalien [#]
Tags : , , , , , , , , , ,
17 avril 2013

Problème d'affichage

 Si, à partir de votre tableau de bord dans le menu "Paramètres", "Options d'affichage", vous avez décidé d'afficher une barre de partage comprenant toutes les options (Imprimer, Email, Facebook, Pinterest, Google+, Twitter, Linkedin et HelloCoton) : 

 

problème_affichage_3

 

 Vous rencontrez un problème d'affichage dans la page de photo d'album. En effet, cette barre de partage déborde de la colonne de droite :

 

problème_affichage_1

 

Mais il y a un remède à cela (en attendant que Canalblog repère et corrige le problème). Il suffit d'ajouter à la feuille de style le sélecteur .share_widget div div avec les propriétés comme indiqué ci-dessous :

 

.share_widget div div {
    position: relative !important;
    text-align: left;
}

 

La barre de partage s'affichera correctement dans la colonne :

 

problème_affichage_2

 

INSCRIVEZ-VOUS A LA NEWSLETTER !



Fin »