14 avr. 2014

geek // Comment insérer des icônes personnalisés vers les réseaux sociaux

En refaisant le design du blog, j'en ai profité pour rajouter des boutons vers mes comptes sur les réseaux sociaux. Tant qu'à faire, je me suis dit que j'allais en profiter pour faire un petit tuto sur le sujet. Je ne vais expliquer ici que dans le cas de Canalblog, puisque c'est mon hébergeur, mais la première et dernière étape sont sensiblement toujours les mêmes.

 

Télécharger vos icônes

J'ai trouvé mes icônes (à droite) sur le site Icons DB et plus particulièrement ici pour l'effet bois. Mais, en tapant dans votre moteur de recherche préféré, vous pourrez en trouver d'autres à foison. Une fois que vous avez décidé d'un modèle qui vous plaît, vous n'avez plus qu'à le télécharger sur votre ordinateur.

NOTE : choisissez plutôt une image au format PNG à un JPEG, il supportera les zones transparentes alors que dans l'autre cas, il y aura du blanc à la place. Ça peut être particulièrement intéressant lorsqu'une icône a des angles arrondis et que le fond est en couleur.

 

Récupérer leurs URL

Créez un nouveau message. Afin de télécharger votre icône sur votre blog, cliquez sur le bouton :
cbfile

Si tout se passe bien, vous verrez apparaître un lien portant le nom de votre image, quelque chose comme :

mon-icône-trop-bien

Pour afficher le code HTML de votre page, cliquez sur le bouton :

iconHTML

Vous aurez quelque chose du style :

<p><a href="URL_de_mon_icône">mon-icône-trop-bien-youpi</a></p>

Notez quelque part cette URL, vous en aurez besoin pour l'étape suivante.

 

Modifier le code HTML

Placez-vous à l'endroit du code où vous souhaitez mettre votre icône et ajouter la ligne suivante :

<a href="URL_de_ma_page_sur_le_réseaux_social">
    <img src="URL_de_mon_icône"
              style="border: 0px;"
              title="Suivez-moi sur nom_du_réseaux_social">
</a>

NOTE : La zone entre crochet qui suit title correspond à ce qui s'affichera lorsque le curseur sera placé sur l'icône, vous pouvez donc mettre ce qui vous fait plaisir.

Par contre, il y a une subtilité pour le flux RSS. À la place de l'URL de votre page, vous devez mettre :

<$BlogSiteFeedURL$>

 
SOURCES -
Quicksand (police)

19 mars 2014

site / Organiser ses todo lists avec Todoist

Il y a eu un moment dans ma vie où j'ai ressenti le besoin de faire des todo lists. Je ne suis pas bien sûre de savoir pourquoi, peut-être une histoire d'horloge biologique, les vingt-cinq ans, le passage à l'âge adulte tout ça... Mais assez rapidement aussi, j'ai eu envie d'avoir un outil pour organiser mes lites, quelque chose d'un peu plus pratique que de vieilles notes griffonnées sur les coins de la montagne de feuilles désorganisées accumulées sur mon bureau.

Alors, j'ai écumé le web à la recherche d'une solution. Ou plutôt de LA solution. Oui parce que je ne pouvais pas juste pas juste me contenter d'en choisir un comme ça, ah non non, ça aurait été bien trop facile! Il fallait d'abord que je fasses le tour de tout ce qui pouvait bien exister sur cette Terre. Limite état de l'art. C'est mon petit coté monomaniaque esprit scientifique.

Aujourd'hui, je suis donc particulièrement contente de pouvoir vous parler de celui que j'ai choisi. Mon préféré de tous. L'élu. Et, comme le titre de ce post vous l'a déjà spoilé, il s'agit du génial Todoist. C'est un outil tout simple mais qui fait bien son job. Alors, peut-être que certain-e-s d'entre vous préférerons une autre solution - ça dépendra de l'utilisation que vous voulez en faire - mais pour un usage basique, Todoist est nickel.

Points forts      

x
C'est simple d'utilisation, pas besoin de notice, on comprend très vite comment le prendre en main. Après, je vous recommande quand même d'aller jeter un coup d'oeuil dans l'aide, vous y trouverez des astuces et raccourcis bien pratiques.

x Le design n'est pas clinquant mais il reste très sympa. C'est clair et épuré, et ça suffit largement.

x On peut créer des sous-listes et des sous-sous-listes et des sous-sous-sous-listes et des... enfin vous voyez l'idée. Et c'est tellement pratique. Ça n'a peut-être pas l'air comme ça, mais on se retrouve vite limité quand on ne peut pas aller plus loin qu'une simple liste ou sous-liste.

x On peut partager des listes à plusieurs, c'est quand même bien pratique pour le travail en équipe.

Points faibles      

x
Les fonctionnalités ne sont pas toutes disponibles gratuitement. En payant, vous aurez accès aux tags, rappels et notes mais, pour ma part, je vis très bien sans.

26 juil. 2012

website / What The Fuck Should I make For Dinner?

Parfois on peut faire un grand site avec trois fois rien, juste quelques bonnes idées. Tiens un peu comme What The Fuck Should I make For Dinner (d'ailleurs ça tombe bien c'est justement le titre de l'article). Le concept est tout bête : le site nous propose une recette de plat à préparer pour le diner et si ça ne nous plait pas et bien il nous en suggère une autre. Mais sa véritable efficacité vient de sa présentation : design ultra minimaliste (tremblez Google!) et surtout SURTOUT utilisation immodérée du mot "fuck" à la moindre phrase.

s

Il est aussi possible de préciser si l'on est végétarien (I don't fucking eat meat) ou si en fait on cherche quelque chose à boire (I'm fucking thirsty), c'est sympa aussi.

+ de 0
Tags : , , ,
17 juin 2012

Comment améliorer la qualité des photos sur Canalblog

Est-ce que vous vous êtes déjà sentis contrariés par la qualité de vos photos sous Canalblog ?

Moi qui suis un peu perfectionniste sur les bords (certains aime utiliser le terme de « maniaque »)(de façon totalement injustifiée bien sûr) j'étais fort bien déçue par le résultat. J'ai donc cherché à comprendre d'où venait le problème et j'ai finalement trouvé une solution toute simple pour arranger ça.

En fait, tout vient du fait que Canalblog réduit automatiquement la qualité des images, ce qui a pour effet de les rendre alors toutes moches. Mais comment palier à cet épineux problème, vous demandez vous ? Et bien en gros, il suffit pour cela d'ajouter une photo en tant que « document » et non en tant qu' « image ». Easy.

Ajouter le document
Cliquez sur l'icone cbfile pour ajouter votre photo. Vous obtenez alors un lien du nom de votre image.

Modifier le code HTML
Dans la barre bleu juste au dessus de l'article, cliquez sur le bouton HTML. Cherchez alors la ligne correspondant à :

<a href="URL_du_l'image">texte_à_cliquer</a>

Remplacez simplement cette ligne par celle-ci :

<img src="URL_de_l'image">

Appuyez sur le bouton Valider et vous avez maintenant une bien belle photo ajoutée dans votre article.

Petit exemple pour illustrer l'histoire.

Avant / Après

Passion_Pit-260Passion_Pit-260

 

 

 

 

 

 

 



 

 



05 juin 2012

Says it on cassette

C'est tout bête mais en même temps c'est tellement cool. En cliquant ici vous pouvez créer une super image de cassette avec vos propres trucs débiles écrits dessus! Mais jugez plutôt :

mixtape

cassette

Hein hein? C'est pas trop bien franchement?

Le site s'appelle Says It et il propose pas mal d'autres choses dans le même concept, à savoir écrire ses propres messages sur des objets, comme des vinyls, des affiches de l'oncle Sam et autres pancartes d'églises.

+ de 0
Tags : , ,
15 mai 2012

Comment ajouter des polices sur Canalblog avec Google Web Font

309656_10150310316682072_6191917071_7824838_73190_n

Dans ce tuto nous allons voir comment ajouter des polices un peu sympas sur son blog avec Google Web Font, parce qu'Arial et Times New Roman c'est pas tout le temps terriblement folichon.

1. Passer en mode Avancé

Il est absolument nécéssaire d'être en mode Avancé pour ajouter des polices donc si ce n'est pas déjà le cas, consultez ce tutoriel qui vous expliquera tout ça très bien avec des petites illustrations et tout. Attention par contre, une fois que vous avez changé de mode, impossible de retourner en arrière. C'est le prix à payer mais ne soyez pas effrayé, tout se passera bien... normalement.

2. Ajouter l'URL

Maintenant nous allons sur Google Web Font en cliquant ici pour trouver une police qui nous plait. Pour cet exemple je vais prendre Amatic SC qui est la police que j'utilise pour les titres d'articles.

On retourne ensuite sur Canalblog pour ajouter notre police. Cliquez sur l'onglet Apparence puis Editer les fichiers de ce modèle et enfin, dans le menu déroulant, sélectionnez Page d'accueil. Apparait alors du superbe code HTML à la mise en page bien moche mais bref, passons... Sous la bannière on va alors ajouter une ligne du type :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=nom_de_la_police">

Il y a une petite subtilité à connaître cependant sur le nom des police à mettre ici : les majuscules sont à respecter et les espaces sont à remplacer par un "+". Donc, pour ma police Amatic SC dont je vous parlez tout à l'heure, j'aurai :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Amatic+SC">

Pour rajouter de nouvelles polices, il suffit de les séparer par un "|". Par exemple, pour la police Cedarville Cursive que j'utilise dans cet article, j'obtiendrai :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Amatic+SC|Cedarville+Cursive">


3. Appliquer la police à une classe

Dans le menu déroulant, sélectionnez Feuille de générale. Modifiez alors la valeur du font-size associé à la classe que vous souhaitez modifier (en gros à une zone de texte choisie), mais gardez au moins une police alternative standard au cas où la police n'ait pas été chargée correctement.

font-family: 'Amatic SC', Courier;

Et voilà c'est gagné!

Si vous voulez en savoir un peu plus, je vous recommande cet article sur lequel je me suis basée pour écrire ce tuto.