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)


03 mars 2013

Comment améliorer la luminosité et les contrastes d'une photo en 10sec avec Photoshop

Aaah j'aime tellement les courbes de transfert de dégradé vous n'avez pas idée! Je dirais bien que leur découverte a changé ma vie mais j'aurais peur d'en faire trop, bien que ce ne soit pas si loin de la réalité... Mais pourquoi tant d'enthousiasme vous demandez-vous (peut-être?) ? Et bien parce qu'ils arrivent à combler deux aspects pourtant contradictoires de ma personnalité : la paresse et le perfectionnisme. En effet 1) quand je dis que ça prend dix secondes ce n'est pas une exagération et 2) ça donne de superbes résultats, les couleurs sont éclatantes tout en restant naturelles.

J'ai trouvé cette astuce sur le blog de Pelleront Art (son tutoriel ici) et je ne pourrais jamais assez la remercier pour cette formidable découverte.


Quelques exemples...

Avant Après Après Avant

06 janv. 2013

DIY / Trombone en coeur

Un tuto tout symple aujourd'hui : comment faire une attache en forme de coeur avec un bête trombone. Pour ça, il suffit de plier ledit trombone comme indiqué sur l'image juste en dessous. Super easy.

+ de 2
Tags : , ,
08 juil. 2012

{DIY} Criss-Cross Bikini Top d'American Apparel

A la base je bavais sur ce haut de maillot d'American Apparel, simple et original, je m'y voyais déjà dedans à glandouiller sur la plage.

AA

Jusqu'à ce que je prennes connaissance du prix et j'ai alors bien rigolé (puis pleuré). J'avais presque fait mon deuil lorsqu'un jour que je me baladais sur Pinterest, j'ai compris qu'en fait ce haut, je pouvais me le faire toute seule. Et même que c'était très (très) facile. Hallelujah.

En fait, tout ce qu'il faut c'est un haut de maillot assez classique et par un petit remaniement de celui-ci, paf pouf, on obtient celui d'American Apparel.

Avant How To Après

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

 

 

 

 

 

 

 



 

 



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.