Modifier l'apparence des liens dans blogger

Un petit tuto pour modifier l'apparence des liens grâce au css. Voyons d'abord comment ils s'écrivent dans notre feuille de style (css).

a:link {
color: #6699cc;
}

a:visited {
color: #ff7722;
}

a:hover {
color: #5B739C;
}

a:active {
color: #5B739C;
text-decoration: none;
}

a.aide-blogger {
margin-top: -5px;
Background-color: #880022;
color: #ffffff;}


Détaillons un peu, je vous ai déjà parlé (ICI) de classe de style séparées de la balise à laquelle elle s'applique par un point (c'est le cas à la fin de mon exemple de .aide-blogger). Nous allons parler dans le cas de la manipulation des liens de pseudo classe. Pour manipuler les liens (dont la balise html est: a) on utilise 4 pseudo classes:

- :link , c'est l'état du lien "au repos" tel qu'il apparaît dans le texte (par défaut texte bleu, souligné)

- :visited , c'est l'apparence du lien déjà visité (par défaut sur les navigateurs, texte violet, souligné)

- :hover , c'est l'aspect du lien au "survol" de la souris. C'est celui qui intéresse le plus les bidouilleurs de code cela donne un aspect dynamique à la page et agrémente la navigation.

- : active , moins manipulé c'est l'aspect du lien quand celui ci est prêt à être activé (pour mieux comprendre naviguez sur cette page avec la touche tab, tabulation).

Les principaux attributs (c'est à dire ce qui est entre les accolades) de a, sont:

• font-family: sans-serif, arial; (par exemple).


• text-decoration: underline; (texte souligné, mettez none si vous ne souhaitez pas le souligner)


• text-color: #ff0000; (pour afficher en rouge par exemple)


• border: solid 1px red; (pour encadré le lien d'une bordure rouge d'1 pixel)


• padding: 5px; (le padding c'est le décalage entre le contenu (ici le texte) et la bordure)


• background-color: #ff0000; (couleur de fond du texte du lien)

Voilà pour les principaux attributs qui me vennent à l'esprit, en cherchant un peu vous trouverez surement d'autres "effets" et attributs utiles pour obtenir un rendu "clean". Pensez à une chose, les débutants web pourraient être dérouté par des effets trop travaillés. prenez exemple sur les liens dans votre panneau de configuration, blogger n'a pas fait d'effet de style superflus.

allez voici un petit exemple commenté de ce que pourrait être un codage du style de vos liens:

a:link {
text-color: #6699cc; /*couleur ton de bleu*/
text-decoration: none; /*le lien ne sera pas souligné*/
}

a:visited {
color: #ff7722; /*une couleur orange pour le lien visité*/
}

a:hover {
color: #5B739C; /*un ton de bleu au survol*/
text-decoration: underline; /*et le lien souligné*/
}

a:active {
color: #5B739C;
background-color: #fcfcfc; /*pour lien actif prêt à être cliqué, un background gris clair*/
padding: 2px; /*le background sera décalé de 2 pixel autour du texte*/
}


Je fais confiance à votre créativité pour trouver d'autres combinaison.

Une très bonne ressource pour approfondir vos connaissances css: openweb

   

Enlever le nombre de posts attache a un label

Suite à une demande de Ben , jevous explique ici comment ôter le nombre de posts liés par un label (voir l'image ci dessous).


Pour enlever le chiffre entre parenthèse (ici (1)), rendez-vous modèles > modifier le code html, puis activer "développer modèle de gadget".
Trouvez la section:

<div id='sidebar...-wrap'>

Vous pouvez en profiter pour commenter cette section (sidebar), voir sur ce post, commentaires pour code html blogger.

Puis trouver la ligne surlignée en rouge sur l'image et supprimez là, utilisez le bouton aperçu (pour être sûr de pas avoir fait de bêtise, enregistrez le modèle.

C'est fait

   

css-html blogger, commentez votre code

Lancé que je suis dans une "série" d'articles sur le css, je vais un peu ouvrir le sujet dans ce post, en vous proposant de commenter votre code "html". Mais avant je vais repréciser certains termes, cela vous aidera dans vos recherche sur le net et sur la compréhension globale du fonctionnement de votre blog.

html: (syntaxe sur wikipédia)
html est toujours le code qui permet à votre navigateur (Internet Explorer, Firefox, etc...) d'afficher une page web. Le code originel de la page n'est pas forcément en html, mais le code envoyé au navigateur est toujours dans ce langage de programation.
Pour visualiser le code html d'une page (celle ci par exemple) dans votre navigateur aller à:
Page (Internet Explorer) ou affichage (Firefox), puis
Afficher source (IE) ou code source de la page (Ff).
Par "extension" et pour vous simplifier la vie, blogger regroupe tout son code sous cette appellation (ndlr. code html).

css: (détails wikipédia)
le css n'est pas vraiment du html, ni un véritable code de programation d'ailleurs, le css c'est ce qui donne à votre navigateur les indications sur l'apparence de votre page. Si vous souhaitez qu'un texte apparaisse en rouge, il vous faudra le stipuler dans le code css. Auparavant ces indications étaient intégrées aux balises html, grâce à un attribut appelé "style". On en retrouve encore dans les codes html, mais on essaie au maximum d'éviter. L'idée est de séparer grâce au css, les indications de style du code html proprement dit. Voici comment se présente un style intégré à une balise html:
<div style="color: red;">
Pour repèrer la partie css de votre blog, consultez la page css blogger sur gpooo.


XML: (explications wikipédia)
le xml est le code originel de nos blogs blogger (et d'autres bien sûr), un peu moins facile à lire, il n'en est pas moins très explicite. C'est d'ailleurs son fondement, pouvoir décrire chaque section dans le balisage même, puis l'interpétrer et le convertir en html avant l'envoi au navigateur. En voici un exemple:

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>


Dans l'exemple ci dessus vous retrouvez des balises html (h3, a) et à l'intérieur des parties style b:if ou b:else qui sont du codage xml. Vous aurez surement remarqué que la section le titre du post (post.title).

Donc résumons, nos blogs sont codés en xml, leur apparence est définie par les styles css, puis le code est traduit en html et envoyé au navigateur.

Pour les profanes les plongées dans le code "html" des blogs a souvent un parfum d'aventure, on se sent comme le petit poucet. et bien comme le petit poucet nous allons apprendre à baliser le code avec des "petits cailloux blancs" pour nous y retrouver facilement et identifier les différentes parties.

Commentez votre code "html" blogger.

Je vais commencer par la partie css (c'est un peu la partie haute de la page du code). Dans cette section les commentaires s'écrivent:

/* Ici_Votre_Commentaire*/

Pour un exemple précis ce pourrait donner:

/*liens barre latérale*/
a .sidebar{
text-decoration: underline;
text-color: blue;
}

En commentant une partie bien particulière vous retrouverez plus facilement vos modifications, pour corriger ou remodifier l'apparence de votre blog et vous comprendrez plus facilement votre code. N'abusez pas des commentaires quand même, ils valent surtout si ils sont rares et explicites.

Passons maintenant aux commentaires html et xml. Dans cette partie (entre les balises body et /body) les commentaires s'écrivent sous cette forme:

<!--Ici_Votre_Commentaire-->

Dans l'exemple de code xml au dessus ce pourrait être:

<!--Titre du post-->
<h3 class='post-title'>
etc...

Voilà, n'abusez pas des commentaires mais utilisez cette possibilité, qui vous fera gagner beaucoup de temps, de manière précise et concise.

   

petition Amazon condamné à payer 1000euros par jour

Condamné à payer 1000 euros par jour, les livraisons gratuites proposés par Amazon.fr risquent de n'être qu'un vieux souvenir (c'est aussi le cas pour Alapage). Amazon lance une pétition (info reçue par mail aujourd'hui; 12/01/08)
Cette condamnation fait suite à une plainte du syndicat de libraires qui s'appuie sur la loi Lang ("La loi Lang dispose que le prix de vente des livres doit être indiqué par l'éditeur sur la couverture du livre, et que tout détaillant est tenu à vendre l'ouvrage à un prix compris entre 95% et 100% du prix indiqué." source wikipédia).
En fait Amazon applique déjà la remise maximum autorisé (5%) et pour baisser artificiellement le coût propose la livraison gratuite. On peut comprendre pourquoi pas que le Syndicat de libraires porte plainte, il est dans son rôle. Mais pour un provincial éloigné des grandes librairies ou pour une personne a mobilité réduite, la gratuité des frais de port n'est rien d'autre qu'une "réduction" des inégalités. En effet si on habite à 30km du premier centre urbain, se déplacer chez le libraire a un coût, pour peu que ce soit une petite ville il n'est pas sûr du tout que l'on trouve l'ouvrage désiré, dans ce cas le libraire va commander le livre et il faudra revenir le récupèrer. Pour une personne seule ou a mobilité réduite c'est pas pratique, pour les autres cela augmente sensiblement le coût du livre.
Admettons que Amazon arrête la livraison gratuite, que va t il se passer ? Les clients vont ils se ruer chez le libraire ? A mon avis non, les plus économes vont estimer le coût du déplacement chez le libraire: si ils sont à proximité ils renonceront à Amazon, sinon ils paieront le port .

Ce combat du syndicat de libraires me fait un peu penser au combat de l'industrie du disque, au lieu d'accompagner internet et d'en tirer profit, ils essaient de freiner le développement de ce marché alternatif. Les libraires ont bien d'autres atouts à mettre en avant et d'autres moyens de résister à une évolution inéluctable.

Amazon a mis une pétition en ligne.

   

Plugoo Tchatez sur votre blog blogger

J'ai trouvé ça sur le blog http://blogabulle.blogspot.com/ et j'ai bien aimé ce petit widget. Google propose aussi dans ses gadgets quelques outils identiques, mais plugoo m'a séduit.

Après vous être inscrit, vous pourrez configurer le service de messagerie qui sera appelé, si un visiteur vous interpelle via plugoo.


Votre statut est indiqué dans le widget plugoo et quand on vous contacte une fenêtre de messagerie s'ouvre sur votre poste.

Quand votre service de messagerie est configuré, allez à l'onglet "Mes widgets". Vous pouvez alors personnaliser votre plugoo avec l'option: "éditez le avec plugoo studio".


Comme vous le voyez dans l'image ci-dessus, 3 onglets s'offrent à vous, style, texte et options (ici nous sommes sur "style").

Ca y est, votre widget est configuré ? Pensez à sauvegarder (en haut à droite de l'onglet style), maintenant nous allons récupèrer le code et l'intégrer dans notre blog.

cliquez sur l'image pour agrandir

Nous voici revenu sur la page "mes widgets", tout en bas vous avez les codes disponibles. Pour nous il va falloir récupèrer le code html. 1clic sur la case, puis au clavier ctrl+c (ou clic droit, copier). Maintenant rendez vous sur blogger, tableau de bord, onglet Modèle, Modifier le code html.

cliquez sur l'image pour agrandir

Si vous souhaitez intégrer le widget Plugoo dans la barre latérale, trouvé la section:

<div id="sidebar-wrapper">

et collez le code Plugoo à la suite, à l'endroit désiré. Vous pourrez le positionner plus précisément en activant la case: Développer des modèles de gadgets , si vous cochez cette option, utilisez le bouton aperçu pour vérifier le bon fonctionnement du blog . Enregistrez le modèle, Plugoo est actif sur votre blog