Vous êtes nouveau? Commencez ici pour découvrir l'aventure!
Des questions? cliquez-ici

Newsletter Pop-up sur Blogger


Aujourd'hui, je vous parle de geekerie, de personnalisation de blog et tout le toutim. Je ne sais pas vous, mais moi, j'adore chipoter à mon blog, chercher de nouvelles idées de personnalisation et tout ça en m'inspirant de tout ce que je vois chaque jour. Je m'intéresse à tout ce qui touche au web et tout particulièrement ce qui pourrait améliorer mon blog. 

Comme vous le savez certainement, la plupart des blogueurs utilisent la plateforme de Wordpress qui est pour eux bien plus "professionnel" mais évidemment, il s'agit d'une question de choix et de ce que l'on souhaite réaliser. Je ne vais pas m'étaler sur le sujet pour savoir si wordpress est meilleur ou non que Blogger, mais étant donné que je suis sur Blogger, je voudrais mettre en avant celle-ci pour montrer que beaucoup de choses sont également possible sur cette plateforme. 

Cet article parlera de Newsletter et plus précisément de la création d'une newsletter en pop-up via la newsletter native sur votre blog Blogger. Deux petits codes (un HTML et un CSS) à intégrer dans votre code. Un simple copier/coller et c'est dans la boite. Mais avant les étapes d'intégration, une petite explication sur le pop-up.

Le Pop-Up, C'est Quoi?


Le pop-up, est une fenêtre qui s'ouvre automatiquement lors de l'ouverture d'une page web. Vous avez très certainement déjà aperçu ce type de page lorsque vous naviguez sur des sites web et qu'une pub s'affiche tout d'un coup sur votre écran. Le principe ici est le même, mais dans notre cas, il va vous permettre de proposer à vos visiteurs de s'inscrire à la newsletter de votre blog. Il pourra ainsi être tenu au courant de toutes les actualités.

Parfois, le pop-up peut être redondant et embêter les internautes qui viennent jeter un oeil à votre site. Pour éviter tout excès, éviter dans un premier temps l'utilisation excessif des popups. N'ajoutez pas une fenêtre pop up pour chaque réseaux sociaux. Vos lecteurs vont prendre la poudre d'escampette. Deuxième chose importante, la fréquence de la fenêtre ne doit pas s'effectuer à chaque actualisation ou ouverture de la page de votre site, ça en agacerait plus d'un!

Comment Installer Une Popup Newsletter Sur Mon Blog?

ETAPE 1

Avant toute modification de votre template, il est important de faire une sauvegarde.

PARAMETRES/AUTRE/SAUVEGARDER LE CONTENU

Pour éviter de vous tromper et faire des erreurs, suivez correctement les étapes une par une.

ETAPE 2



➜ allez sur la page de votre administration Blogger,

➜ allez dans l'onglet "MODELE",

➜ cliquez sur le bouton "modifier le code HTML",

➜ cliquez dans le cadre du code et effectuez une recherche via le raccourci clavier (CTRL+F),

➜ recherchez le code suivant:

 ]]></b:skin>

ETAPE 3


➜ collez juste au-dessus le code CSS suivant:

#mtc-sub-popup{
text-shadow: none;position: absolute;
}
#mtc-popup{
display: block; top: 0px; left: 0px;
width: 100%;
height: 100%;
position: fixed;
background-image: none;
margin: 0;
-ms-overflow-y: auto;
overflow-y: auto;
}
#mtc-style-popup{
overflow: none;
background-color: #fafafa; /*couleur du fond*/
border: 2px solid #555; /*couleur de la bordure*/
}
.mtc-style-popup{
width: 497px;
height: 243px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
}
.footer-inner{
display: none;
height: 0px;
}
.header{
margin-top: 50px;
margin-left: 20px;
text-align:center;
}
.header .newsletter{
color: #333333; /*couleur du titre newsletter*/
font-size: 17px;
font-family: 'Open Sans', sans-serif;
line-height: 1;
}
.header .signup{
color: #e69a9a; /*couleur du titre NOMDUBLOG*/
font-size: 17px;
font-family: 'Open Sans', sans-serif;
line-height: 1;
}
.info{
font-size: 13.5px;
text-align:center;
font-family: 'Open Sans', sans-serif;
color: #555;
margin-top: 20px;
margin-left: 20px;
}
.sub_button{
padding: 0 15px;
margin-right: 35px;
border: 0;
float: right;
min-width: 97px;
font-size: 13.5px;
font-family: 'Open Sans', sans-serif;
margin-top: -42px;
background: #e69a9a;
height: 40px;
line-height: 33px;
text-align: center;
color: #fff;
width: auto;
font-weight: bold;
}
.sub_email{
clear: both;
font-family: 'Open Sans', sans-serif;
width: 100%;
margin-left: 15px;
margin-top: 15px;
margin-bottom:15px;
}
.sub_form{
position: relative;
margin-left: 10px;
margin-top: 20px;
}
.sub_form{
display: block;
width: 100%;
background: transparent;
height: 33px;
margin-right:-10px,
border: 1px solid #eee;
border-right: 0;
font-family: 'Open Sans', sans-serif;
font-size: 11px;
padding: 8px 10px;
}
.sub_form,.email_input{
width: 320px !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
height: auto; background: #fff;
}
.privacy{
position: relative;
font-size: 10px;
text-align: center;
font-family: 'Open Sans', sans-serif;
color: #8b8b8b;
margin-bottom: 0px !important;
}

➜ faites une nouvelle recherche (CTRL+F) pour trouver ce code

</body>
➜ copiez le code suivant juste au-dessus de </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'><!--Newsletterpopup début--><div id='mtc-popup'><div class='mtc-style-popup' id='mtc-style-popup'><center onmouseup='document.getElementById(&apos;mtc-popup&apos;).style.display=&apos;none&apos;' style='color:#000;cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;'><img src='http://zupimages.net/up/17/16/67rw.png' style='width: 30px;height: 30px;'/></center><div class='header'><span class='newsletter'>NEWSLETTER</span><span class='signup'> NOM DU BLOG</span></div><p class='info'>Recevez les nouveaux articles directement par email</p><div class='sub_email'><form action='http://feedburner.google.com/fb/a/mailverify?uri=nomdublog' class='sub_social_form' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=NOMDEVOTREBLOG;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=210,height=520&apos;);return true' target='popupwindow'><input name='uri' type='hidden' value='NOMDEVOTREBLOG'/><input name='loc' type='hidden' value='en_US'/><input class='sub_form' name='email' onblur='if (this.value == &quot;&quot;) { this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Votre email ici&quot;) {this.value = &quot;&quot;}' type='text' value='Entrez votre email...'/><input class='sub_button' title='' type='submit' value='Inscrivez-vous'/></form></div><p class='privacy'>Vos informations ne seront jamais partagées</p></div></div><div style='clear: both;'></div><!-- Newsletterpopup fin--></b:if>

➜ remplacez NOMDEVOTREBLOG par votre Feedburner ID et NOM DU BLOG par votre nom,

✔︎ enregistrez le modèle.

En ce qui concerne la personnalisation de votre popup, vous trouverez dans le code css des remarques (/* REMARQUES */) qui vous permettront de savoir où modifier certains aspects comme la couleur de fond, ou encore la couleur du texte. Si vous souhaitez modifier d'autres aspects non présents dans le code, n'hésitez pas à me laisser un commentaire.

pop up newsletter blogger

10 polices d'écriture Script 100% gratuites

10 polices script gratuites à télécharger


La tendance du moment est sans nul doute les écritures manuscrites que l'on appelle communément script. Elles sont très populaires sur Pinterest ou encore Instagram. On les reconnaît grâce aux arrondis et à leur élégance. Dans cet article, je vous propose donc de découvrir dix typographies gratuites de type cursive. Enjoy.

Modesty

Shellahera Script


Setta Script


Nickainley




Debby



Noelan


Salted Mocha



Bromello



Quickline



Frutilla




Vous ne connaissez pas les droits sur l'utilisation d'une police d'écriture? Lire cet article dédié pour tout savoir.

Les polices d'écriture et les droits d'utilisation

Les polices d'écriture et leur droit d'utilisation

Les polices d'écritures de base comme Arial ou Helvetica sont devenues des polices d'écriture un peu basiques et très similaires. Quoi de plus sympa donc de télécharger une police d'écriture? Sur internet, il existe une multitude de sites proposant des typographies originales et simples à télécharger.

Oui, mais attention. Les polices d'écriture sont le fruit d'un travail d'un ou plusieurs créateurs et sont donc soumises à la propriété intellectuelle de son créateur. Elles ne peuvent donc pas être utilisées pour tout et n'importe quoi. En effet, il existe des restrictions sur l'utilisation d'une police d'écriture. Heureusement, il est possible d'acheter ces droits. Cet article aura donc pour but de mieux vous éclairer sur le sujet qui n'est pas toujours facile à comprendre.

Comment fonctionne l'utilisation d'une police?

Pour commencer, lorsque l'on veut "acheter" une typographie, c'est en réalité l'acquisition d'une licence d'utilisation que l'on achète. Si vous utilisez une police d'écriture, assurez-vous de lire correctement les droits d'utilisations et si nécessaire, achetez la licence.

Dans le cas d'un travail rémunéré, vous devrez en général acheter la licence de la typographie que vous utiliserez pour vos créations (logo, affiche, pub, etc.). Il est normalement interdit de transmettre la police d'écriture à un client si ce dernier ne possède pas la licence. Il sera donc recommandé de vectoriser le texte afin qu'il devienne une image, le client ne pourra donc pas utiliser l'écriture comme telle, mais bien comme image non-modifiable. Si par contre, ce dernier souhaite créer lui-même son projet avec cette même écriture, il devra alors s'acquitter lui-même de l'achat de la licence pour pouvoir l'utiliser sur son ordinateur.

Les types de licences

Les polices sont les propriétés de leurs auteurs. Elles peuvent être des versions freeware, shareware, de démo ou du domaine public. Les explications sont à titre indicatif, il est préférable de se référer aux conditions présentes dans le dossier lors du téléchargement. 

Gratuit pour un usage personnel

Une font pour usage personnel se réfère à toute utilisation qui ne génère aucun revenu. Vous pouvez utiliser ce type d'écriture dans vos travaux de cours, si vous envoyez une lettre à votre ami. Mais en aucun cas, vous ne pouvez l'utiliser sur votre site internet pour vendre quelque chose.

Gratuit pour un usage commercial

Cela signifie généralement qu'elle peut être utilisée pour vos projets de ventes comme un logo, une affiche de pub, etc. Attention toutefois de bien lire les conditions.

Domaine public

Les polices peuvent être distribuées et utilisées sans payer de droits à son créateur. Les fonts peuvent donc être modifiées, et même redistribuées sans faire mention de son auteur.

Freeware

Le principe est pratiquement similaire au domaine public, à savoir que la typo peut être utilisée et distribuée sans payer de droits d’auteur. Toutefois, dans ce cas-ci, la police reste la propriété de son auteur. Elle doit impérativement être distribuée avec tous les fichiers liés au créateur.

Donationware

Dans ce cas, la police de caractères peut être distribuée librement mais en cas d’utilisation, il faut payer une contribution, souvent symbolique, à son auteur. 

Démo

Il s’agit d'une version non-complète dans laquelle certaines lettres ou caractères particuliers ne sont pas présents. 

Quel que soit le type de licence, assurez-vous toujours de bien vous informer sur l'utilisation. En effet, vérifier bien que la personne ayant mis en ligne la typo est le véritable auteur, vérifier également la licence présente généralement dans le fichier de téléchargement. Si vous rencontrez un doute, n'hésitez pas à contacter le créateur pour éviter les mauvaises surprises.

Ajouter une barre de cookies personnalisée sur Blogger

barre de cookies personnalisée sur blogger

On ne va pas parler de cookies aux chocolats sur le blog, et je vois votre déception, on va plutôt aborder le sujet de la barre de cookies sur internet. Il s'agit d'un avertissement généralement représenté en haut de l'écran lorsque l'on navigue sur un site internet. Son rôle est important étant donné qu'elle interagit avec chaque utilisateur. Pourtant peu de gens savent réellement quel est son rôle et pourquoi on la retrouve partout. Dans cet article, je vous explique pourquoi il est important d'installer une barre de cookies et comment la personnaliser sur son blog Blogger.

Qu'est ce que les cookies?


Un cookie est un fichier texte qui est déposé durant votre navigation sur internet sur votre ordinateur. Les cookies permettent au propriétaire du site de conserver les données des différents visiteurs afin de faciliter la navigation, mais également pour stocker les informations sur l'utilisateur. Ne vous inquiétez pas, il s'agit simplement d'informations relatives à vos préférences de recherches ou des informations comme votre prénom ou votre pays de localisation.

Il faut savoir qu'un cookie ne représente aucun danger pour votre ordinateur. En effet, il ne s'agit pas d'un virus et en aucun cas, les sites ne peuvent récolter des informations personnelles que vous n'avez pas divulguées.

Est-ce obligatoire?


Conformément à la législation de l'Union européenne, vous devez obligatoirement informer vos visiteurs de l'utilisation des cookies, et ce, depuis 2011. Heureusement pour les sites réalisés sous la plateforme Blogger, une barre de cookies a été automatiquement générée. En ce qui concerne les autres plateformes de blogs et CMS, il existe des extensions afin d'intégrer facilement une barre de cookies. 

Comment personnaliser la barre des cookies?


Comme dit précédemment, la barre des cookies est automatiquement intégrée sur les blogs créés sous Blogger. Mais il est possible de personnaliser la barre de manière à ce qu'elle s'adapte à votre design (couleur, police, etc.).

La barre de cookies est représentée par défaut au-dessus du blog sous un fond gris foncé et assez basique.



Nous allons ajouter différents codes afin de rendre la barre des cookies plus attrayante, mais également en accord avec son design. On modifie le fond coloré, on diminue la taille de la police et on ajoute des boutons distincts avec un survol animé.



ETAPE 1


Avant toute modification de votre template, il est important de faire une sauvegarde. Pour éviter de vous tromper et faire des erreurs, suivez correctement les étapes une par une.

PARAMETRES/AUTRE/SAUVEGARDER LE CONTENU

ETAPE 2


Dans votre code HTML, recherchez le code suivant (Cliquez n'importe où dans votre code html et faites une recherche via le raccourci clavier CTRL+C pour windows et CMD+C pour Mac):

</head>

Ensuite, collez le code suivant juste au-dessus.

<script type="text/javascript"> cookieOptions = { msg: "Ce site utilise des cookies provenant de Google afin de fournir ses services, personnaliser les annonces et analyser le trafic. Les informations relatives à votre utilisation du site sont partagées avec Google. En acceptant ce site, vous acceptez l'utilisation des cookies.", link: "https://www.blogger.com/go/blogspot-cookies", close: "Ok", learn: "En savoir plus" };</script>

Si vous le souhaitez, vous pouvez modifier le lien "en savoir plus" afin d'offrir davantage d'informations. Celle-ci peut faire partie de vos mentions ou être reliée aux explications de Google.

ETAPE 3

Deux solutions s'offrent à vous pour ajouter le code de personnalisation.

 SOLUTION 1 

En dessous de votre code dont je vous ai parlé à l'étape 2 vous ajoutez des balises <style>

<script type="text/javascript"> cookieOptions = { msg: "Ce site utilise des cookies provenant de Google afin de fournir ses services, personnaliser les annonces et analyser le trafic. Les informations relatives à votre utilisation du site sont partagées avec Google. En acceptant ce site, vous acceptez l'utilisation des cookies.", link: "https://www.blogger.com/go/blogspot-cookies", close: "Ok", learn: "En savoir plus" };</script><style>
</style> 
Entre ces balises, ajoutez les codes suivants:

/* VOTRE BARRE DES COOKIES */
.cookie-choices-info {
background-color: #CED8F6!important; /* la couleur du fond */
top: auto !important; /* la barre des cookies est fixée en bas */
bottom:0 !important; /* la barre des cookies est fixée en bas */
font-family: sans-serif!important; /* la police d'écriture */
}
/* LE TEXTE DE LA BARRE DES COOKIES */
.cookie-choices-info .cookie-choices-text {
font-size: 13px!important; /* la taille du texte */
color: #fff!important; /* la couleur du texte */
text-align:justify!important; /* l'alignement du texte */
}
/* LES BOUTONS OK ET EN SAVOIR PLUS */
.cookie-choices-info .cookie-choices-button {
font-weight: bold!important; /* l'épaisseur du texte des boutons */
color: #fff!important; /* la couleur du texte des boutons */
padding: 5%!important; /* l'espacement entre le texte et le bouton */
background: #A9A9F5!important; /* la couleur du fond du bouton */
}
/* LES BOUTONS AU SURVOL DE OK ET EN SAVOIR PLUS */
.cookie-choices-info .cookie-choices-button:hover {
color: #555!important; /* la couleur du texte au survol du bouton */
 background: #fff!important; /* la couleur du fond au survol du bouton */
}

 SOLUTION 2 

Copiez le code suivant juste au-dessus de ]]></b:skin> (Cliquez n'importe où dans votre code html et faites une recherche via le raccourci clavier CTRL+C pour windows et CMD+C pour Mac)

/* VOTRE BARRE DES COOKIES */
.cookie-choices-info {
background-color: #CED8F6!important; /* la couleur du fond */
top: auto !important; /* la barre des cookies est fixée en bas */
bottom:0 !important; /* la barre des cookies est fixée en bas */
font-family: sans-serif!important; /* la police d'écriture */
}
/* LE TEXTE DE LA BARRE DES COOKIES */
.cookie-choices-info .cookie-choices-text {
font-size: 13px!important; /* la taille du texte */
color: #fff!important; /* la couleur du texte */
text-align:justify!important; /* l'alignement du texte */
}
/* LES BOUTONS OK ET EN SAVOIR PLUS */
.cookie-choices-info .cookie-choices-button {
font-weight: bold!important; /* l'épaisseur du texte des boutons */
color: #fff!important; /* la couleur du texte des boutons */
padding: 5%!important; /* l'espacement entre le texte et le bouton */
background: #A9A9F5!important; /* la couleur du fond du bouton */
}
/* LES BOUTONS AU SURVOL DE OK ET EN SAVOIR PLUS */
.cookie-choices-info .cookie-choices-button:hover {
color: #555!important; /* la couleur du texte au survol du bouton */
background: #fff!important; /* la couleur du fond au survol du bouton */
}


Toutes les remarques notées dans le code (/* EXPLICATIONS*/), vous permettent de savoir à quoi chaque ligne correspond, et où vous devez modifier votre code.

Par exemple


background: #A9A9F5!important; /* la couleur du fond du bouton */

#A9A9F5 correspond à une couleur pourpre. Vous pouvez modifier la couleur du bouton par un fond rose par exemple #F6CEE3. Pour trouver le code correspond à votre choix de couleur, allez sur ce site


Aperçu du résultat




5 extensions gratuites et indispensables pour une bonne gestion de son site Wordpress

5 EXTENSIONS WORDPRESS
Wordpress est une des plateformes les plus utilisées par de nombreux utilisateurs, aussi bien pour un site personnel, que pour un site commercial. Bien évidemment, il est important de pouvoir dissocier la version .com et .org. Si vous ne connaissez pas la différence, je vous explique tout dans cet article "ICI". Le petit plus de cette plateforme, c'est sans nul doute le grand nombre de possibilités et ce grâce aux différentes extensions qu'on y déniche. Elles sont parfois payantes ou gratuites, mais les bonnes choses ont parfois un coût qui en vaut la peine!

Dans cet article, je vais vous présenter 5 extensions (gratuites pour le coup) qui me paraissent indispensables lorsque l'on décide de travailler sur Wordpress. Peut-être que parmi ces extensions, vous en connaissez déjà ou dont l'installation serait peut-être à envisager. Sachez qu'il en existe un tas d'autres tout aussi intéressantes et qui peuvent remplacer celles présentées ici.  Attention de ne pas abuser des extensions Wordpress. Cela pourrait nuire au bon fonctionnement de votre site. Eviter les extensions avec la même fonction, supprimer tout ce qui est superflu.

Antispam Bee


Les spams, c'est la fameuse bête noire de toute personne possédant un site avec commentaires intégrés. C'est énervant et fait perdre un temps précieux. J'aurai pu vous présenter ici le plugin Akismet qui est très certainement le plus connu, mais j'ai remarqué que beaucoup de personnes qui l'utilisaient ont quelques soucis et un nombre incalculable de spams avaient passé les mailles du filet. C'est donc un autre plugin qui fera partie du top 5, Antispam Bee. Il joue un rôle similaire et est tout aussi efficace. 

Antispam Bee



Yoast SEO


Tout le monde a entendu parler de référencement et SEO. Sur Wordpress, ce ne sera pas un calvaire puisque ce plugin vous facilitera la tâche pour optimiser automatiquement votre site dans les moteurs de recherche. 


Yoast SEO



Mettre un texte en valeur, ça peut parfois être énervant surtout avec la nouvelle version Wordpress qui ne propose plus la justification du texte. Heureusement le plugin suivant, vous permettra de créer votre espace "outil" pour la rédaction de vos articles. Un éditeur de texte efficace et rapide à mettre en place. 


TinyMCE Advanced


Google Analytics


L'installation du plugin est simple. Une fois activé, il faudra le configurer en vous connectant à votre compte Google Analytics. En cas de soucis, une vidéo tutoriel vous explique comment récupérer le code d'activation. Ce plugin Google Analytics vous affichera toutes les statistiques relatives à votre site et cela dans une interface directement visible sur votre backoffice Wordpress.


Google Analytics

Wordfence Security 


Qui n'a jamais eu peur de voir son travail volé, ou tout simplement être piraté par une personne avec de mauvaises intentions? Personne n'est à l'abri d'un hacker, il est donc primordial de sécuriser son site Wordpress. Certes le plugin ne suffira pas à lui-même, il faudra également tout mettre en oeuvre pour que les mots de passe et autre nom d'utilisateur ne soit pas aussi simple à trouver.


Wordfence Security

Si vous connaissez d'autres alternatives ou des extensions qui pourraient être utiles, n'hésitez pas à les partager en commentaire. Cela pourra en aider plus d'un dans sa recherche et optimiser son site internet avec les meilleurs extensions.

Comment lier son nom de domaine sur son blog Blogger?

Relier son nom de domaine sur Blogger
Le tutoriel suivant a pour but de vous aider à relier votre blog sous Blogger à un nom de domaine fraichement acheté. Comme pour chaque tutoriel, je vous présenterai ici toutes les étapes à réaliser. Pour ce tutoriel, j'ai choisi l'hébergeur OVH. C'est un peu celui vers lequel une grande partie des blogueurs se dirigent pour l'achat d'un nom de domaine ou d'un hébergement.

Comment se procurer un nom de domaine?


Quoi de plus professionnel qu'un site avec son propre nom de domaine? Pour trouver votre nom de domaine, vous trouverez une multitude de sites vous proposant des solutions web et donc par la même occasion l'enregistrement de votre nom de domaine. Le plus connu d'entre eux est sans nul doute OVH pour qui pas mal de blogueurs ont effectué une demande d'enregistrement. Il existe beaucoup d'autres sites tels que hebergeur-discount (qui propose une adresse mail avec le nom domaine gratuitement) ou 1&1.

Trouvez ce qui vous convient le mieux sachant que les prix augmentent parfois la deuxième année. En règle général, le prix doit tourner dans les alentours de 10,00 € par an. Dans ces trois cas proposés ci-dessus, je n'ai testé qu'OVH et hebergeur-discount. Dans les deux cas, je les recommanderais tous les deux. 

Je vous conseille vivement l'extension .com qui donne un accès beaucoup plus large à votre blog contrairement au .be ou .fr.

Comment relier son blog à son nom de domaine?


Une fois votre nom de domaine acheté, nous allons pouvoir débuter les choses sérieuses. Ce tutoriel est composé de quelques étapes. Prenez votre temps et suivez bien chacune d'entre elles. Attention aux fautes de frappe ou aux mauvaises manipulations. Chaque explication est suivie d'un printscreen d'exemple. 


ETAPE 1


Allez dans votre compte blogger, dans la barre latérale gauche et cliquez sur


PARAMETRES/BASIQUES


ETAPE 2


- Dans la partie EDITION ajoutez votre nom de domaine sans oublier "www. " devant (ex: www.mondomaine.com).

- Cliquez sur le bouton ENREGISTRER.
Une notification en rouge vous indique une erreur. Pas d'inquiétude c'est tout à fait normal. Vous remarquerez aussi l'apparition de différents codes. Ces codes sont très importants, car ils vont vous permettre de relier votre blog Blogger à OVH. Je vous conseille vivement d'effectuer un printscreen ou de les noter quelque part (CTRL+C pour windows et CMD+C pour Mac), en effet, nous allons en avoir besoin pour la prochaine étape. Dans notre cas d'exemple j'ai donc:

www                    ghs.google.com
psdfghj7jg6p       tr-r6vipt4y6exxbe.dev.googlehosted.com 

REMARQUE - Ces deux codes (psdfghj7jg6p/tr-r6vipt4y6exxbe.dev.googlehosted.com) doivent être différents de votre côté et sont propre à chacun. Ne les copier pas.)

Si vous avez par mégarde perdu ces codes, ne vous inquiétez pas, vous pourrez récupérer de nouveaux codes en insérant à la place de votre nom de domaine une fausse adresse comme www.exemple.com. Grâce à cette petite ruse, les codes vont réapparaitre, il faudra alors re-modifier le nom de domaine en remplaçant www.exemple.com par votre nom de domaine.

ETAPE 3


- Connectez-vous à votre compte OVH. Cliquez ensuite sur votre nom de domaine présent dans la barre latérale gauche. Vous serez redirigé vers la page "INFORMATIONS GENERALES".

- Choisissez l'onglet ZONE DNS.
administration dns OVH

Vous voilà dans la ZONE DNS, celle qui vous permettra d'encoder les codes dont je vous ai parlé à l'étape 2. Je vous invite tout d'abord à réinitialiser votre zone DNS.

- Appuyez sur le bouton "REINITIALISER LA CONFIGURATION". Choisissez l'option "NON, mais je veux réinitialiser ma zone DNS" pour bien débuter.

ETAPE 4


- Appuyez maintenant sur AJOUTER UNE ENTREE et choisissez le type "CNAME".
Ajout d'une entrée CNAME
- Vous allez devoir effectuer deux entrées CNAME différentes avec les codes dont nous avons parlé en étape 2.  La première entrée CNAME va reprendre le premier code:

dans la section sous-domaine on ajoute www
dans la section cible, on ajoute ghs.google.com.
REMARQUE - Ajoutez un point final au .com.

Ajout d'une entrée CNAME

Une erreur en rouge vous signalera qu'il ne peut pas y avoir deux CNAME sous www. Vérifiez donc à supprimer la CNAME déjà présente.

www.votrenomdedomaine.com - votrenomdedomaine.com 

- Ajoutez une nouvelle entrée CNAME qui va reprendre votre deuxième code propre à votre blog.

REMARQUE - Attention les deux codes ci-dessous ne sont pas les mêmes que les vôtres ne les copier pas. Utilisez les deux codes mentionnés dans votre blogger.

dans la section sous-domaine on ajoute psdfghj7jg6p

dans la section cible on ajoute tr-r6vipt4y6exxbe.dev.googlehosted.com.

REMARQUE - Ajoutez un point final au .com.


Ajout d'une entrée CNAME
Afin d'être sûr que tout fonctionne parfaitement, voici une étape facultative mais que je vous invite malgré tout à effectuer.

ETAPE 5


- Ajoutez quatre entrées/enregistrements de type "A"  dans la section cible avec pour chacun les IP suivantes:

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

REMARQUE - Ne rien indiquer dans la section "sous-domaine" 


Ajout d'une entrée A


À supprimer

Veillez à supprimer les éléments suivants:

L'entrée A
 votrenomdedomaine.com. A xxx.xxx.xx.x (x remplaçant des chiffres)


L'entrée CNAME
www.votrenomdedomaine.com. CNAME nomdedomaine.com.


Les trois fichiers TXT

votrenomdedomaine.com. TXT "1|www.votrenomdedomaine.com"
www.votrenomdedomaine.com. TXT "3|welcome"
www.votrenomdedomaine.com. TXT "l|fr"

Voici ce qu'il doit y avoir dans votre partie DNS

Vous êtes arrivé jusqu'ici sans problème? Alors c'est que vous avez réussi! Votre nom de domaine ne devrait pas tarder à être relié à votre blog dans les heures qui suivent. N'ayez crainte si vous rencontrez une page d'erreur en allant sur votre blog, cela peut prendre plusieurs heures avant que tout soit réglé. Soyez patient.

Si après 48h les problèmes persistent, n'hésitez pas à relire les étapes une à une ou me dire par commentaire votre souci afin que d'autres personnes puissent y trouver également une réponse.


Quelle plateforme choisir pour son blog?

Choisir une plateforme pour son blog

J'avais déjà abordé cet article dans mon précédent blog, mais c'était un peu une évidence de l'insérer comme première publication dans ce nouveau blog. Ce n'est pas toujours facile de savoir quelle plateforme choisir pour la création de son blog. Est-ce que Wordpress est mieux que Blogger? Mais quelle est la différence entre wordpress.com et wordpress.org? Cet article aura pour but de mieux vous éclairez dans votre choix selon vos besoins, votre budget, mais aussi vos possibilités. 

BLOGGER 

L'installation Blogger ne nécessite qu'un enregistrement d'email sous Gmail. Une fois créé vous pourrez concevoir votre blog sous http://www.blogger.com

Les fonctionnalités 


Malgré ce que l'on peut croire, Blogger n'est pas une plateforme aussi restreinte dans ses fonctionnalités. En effet, beaucoup de widgets comme les formulaires de contact, newsletter, archives sont intégrés dans la plateforme. Il est possible de modifier l' apparence de votre template tout en ajoutant vous-même des widgets personnalisés en HTML ou Javascript. Certes, il vous faudra un peu de connaissance niveau codage, mais une multitude de tutoriels sont disponibles sur le web pour vous expliquer étape par étape comment ajouter une fenêtre pop-up, comment ajouter une police d'écriture, et tout un tas de gadgets utiles. Si vous débutez dans le blogging ou que vous cherchez une plateforme gratuite, Blogger est celle que je vous conseille. Si dans le futur, vous envisagez de passer à Wordpress, vous pourrez si vous le souhaitez transférer tous vos commentaires et articles sans aucun souci. Donc même si vous ne restez pas longtemps sur Blogger, le changement vers un blog plus pro comme wordpress.org, sans perdre vos données, sera toujours possible. 

Associer un nom de domaine 


Pour associer un nom de domaine, c'est très simple. Il existe ce que l'on appelle des registrars comme OVH, 1&1 ou HEBERGEUR-DISCOUNT. Ces derniers vous permettent d'acheter un simple nom de domaine pour approximativement une dizaine d'euros par an, ici nul besoin d'un hébergement, ce qui permet d'économiser un tas d'argent. Un simple nom de domaine suffit pour passer d'un www.monblog.blospot.com à www.monblog.com

Le design 


Blogger offre à ses utilisateurs des templates de base que vous pourrez utiliser gratuitement. Il est également possible sur base de ces templates, de changer leur aspect en modifiant les codes présents dans l'éditeur HTML. Il existe également des sites vous proposant des templates personnalisés payants mais aussi gratuits. Différentes solutions de présentation sont disponibles, des templates pour aspect blog, pour aspect e-commerce, en format magazine etc.  Blogger répondra toujours en grande partie à vos besoins.

Le prix 


Il faut savoir que la plateforme est totalement gratuite. La seule chose payante est externe à la plateforme, à savoir si vous voulez y ajouter un nom de domaine, mais c'est bien évidemment facultatif. De plus, l'achat d'un template n'est pas obligatoire si vous avez des connaissance en codage html et css. 

Aperçu du backoffice


Blogger plateforme design


WORDPRESS.COM 

L'installation 


Pour créer son blog Wordpress.com, il suffit simplement de s'enregistrer sur https://fr.wordpress.com/

Les fonctionnalités  


Wordpress.com agit comme Blogger puisqu'il ne nécessite pas d'hébergement et aucune configuration requise particulière. Vous ne vous occupez que de la rédaction de vos articles. Malgré tout, elle propose plusieurs extensions intéressantes et une plateforme simple d'utilisation. Par contre, vous ne pourrez pas modifier en profondeur votre template. Cette plateforme est la plus simple pour transférer ses articles et commentaires vers wordpress.org

Associer un nom de domaine 


Lorsque vous utilisez la plateforme wordpress.com, votre extension de blog aura alors www.votreblog.wordpress.com. Afin d'y ajouter votre nom de domaine, vous avez deux solutions. Vous achetez directement votre nom de domaine via la plateforme wordpress, ce qui vous coûtera approximativement 18,00 €/an ou si vous possédez déjà votre nom de domaine chez un autre registrar comme OVH, vous devrez vous acquitter d'un supplément de 13,00 €/an pour pouvoir l'utiliser en plus de votre abonnement annuel au nom de domaine, ce qui fait un petit budget à lui accorder. 

Le design 


Lorsque vous décidez d'acheter un template, vous aurez accès à pas mal de gadgets préinstallés. Certains widgets sont plus professionnels et sont assez variés mais vous ne pourrez pas intégrer toutes les extensions disponibles. De très beaux templates responsives (qui s'adaptent à vos écrans) sont vendus pour vous offrir un blog à l'allure plus pro. Mais sachez que tous les templates ne seront pas facilement personnalisables. Vous serez toujours limité dans vos modifications. Dans tous les cas, si vous décidez de garder un template de base, sachez que vous n'aurez pas l'accès au fichier de personnalisation CSS. Vous ne pourrez donc pas le modifier à votre guise comme l'on pourrait le faire chez Blogger ou Wordpress.org. En effet, il n'est pas possible de modifier le fichier CSS. Vous aurez accès à des templates qui sont pour la plupart payants ou très limités dans leur personnalisation. 

Le prix 


L'utilisation de Wordpress.com est gratuite puisqu'elle est similaire à Blogger. Les seuls frais sont relatifs au nom de domaine si vous souhaitez en ajouter un ou encore à l'achat d'un template.

Aperçu du backoffice


Wordpress.com plateforme design

WORDPRESS.ORG 

L'installation 


Pour installer Wordpress.org, il ne suffit pas de s'inscrire étant donné que le blog sera hébergé par vos soins chez un serveur externe. Dans un premier temps, il faudra télécharger le fichier (version française) et l'envoyer via FTP (en utilisant Filezilla par exemple) en vous connectant à votre hébergement (préalablement acheté sur OVH ou Hebergeur-discount par exemple). Il faudra alors suivre la procédure: 

1 - Téléchargez et décompressez WordPress
2 - Créez une base de données pour WordPress sur votre serveur (dans la partie MySql). 
3 - Déposez les fichiers compris dans le dossier WordPress que vous avez téléchargés et les envoyer dans la racine de votre hébergement (généralement dans le dossier www) .
4 - Lancer l'installation en ouvrant l’adresse de votre site (ex. http://www.adressedusite.com/wp-admin/install.php) dans votre navigateur. Suivez les instructions jusqu'à avoir accès à votre tableau de bord. 

Les fonctionnalités 


Wordpress.org est sans nul doute l'outil le plus intéressant pour établir un vrai blog pro. Le CMS nécessitera l'achat d'un hébergement avec nom de domaine. Les possibilités sont nombreuses, à savoir que vous pourrez modifier comme bon vous semble votre site. Un grand nombre de plugins peuvent être téléchargés pour être utilisés sur votre site. On parle ici d'un blog professionnel et un contrôle total de votre blog. Mais cela signifie également que toutes les mises à jour, protection, etc, sont sous votre responsabilité. 

Associer un nom de domaine


Comme dit précédemment, il vous faudra plus qu'un nom de domaine, il vous faut également un hébergement adapté pour Wordpress. Vous avez généralement des solutions d'hébergement comprenant un nom de domaine offert la première année. De plus certain hébergeur comme Hébergeur-discount ou OVH fournissent directement des packs prévus comprenant l'hébergement, nom de domaine, et le logiciel d'installation Wordpress. Vous pouvez compter 5 à 7 € par mois HTVA, ce qui est un petit budget sur l'année. 

Le design 


Tout est possible sur Wordpress.org mais il faudra plus que de simples connaissances en html et css. La patience et un minimum de connaissances sont requises. Malgré tout, il n'y a aucune limite de personnalisation. Encore une fois, des tutoriels sont disponibles sur internet, vous aurez également la possibilité d'ajouter des extensions nombreuses et souvent gratuites. Vous pourrez ajouter de manière simple et rapide un compteur d'abonnés aux réseaux sociaux, un bandeau de cookies, un slider, etc. 

Le prix 


Le budget à accorder pour un blog sous Wordpress.org peut varier selon l'hébergeur choisi. Comptez entre 60,00 € à 70,00 € par an pour l'ensemble (⚠ Sachez que le nom de domaine est gratuit seulement pour la première année. Vous devrez vous acquitter d'un supplément +- 10 € en plus par an).

Aperçu du backoffice


Wordpress.org plateforme design

LE RESUME 


Blogger 


Gratuit
Idéal pour débuter
Personnalisable en codage html/css/java
Nécessite aucun hébergement
Templates gratuits internes
Simple d'utilisation
Peu de gadgets internes
Possibilité d'exporter vers wordpress.com ou .org
Ajout nom de domaine externe (+- 10 €/an) 

Wordpress.com 


Gratuit
Idéal pour débuter
Peu personnalisable
Nécessite aucun hébergement
Templates gratuits et payants internes
Simple d'utilisation
Plus professionnel
Extensions internes plus importantes
Possibilité d'exporter vers wordpress.org
Ajout nom de domaine interne (+- 18 €/an) et externe (+ 13 €/an) 

Wordpress.org 


CMS gratuit
Personnalisation complète
Utilisation plus complexe
Idéal pour les professionnels
Extensions nombreuses
Hébergement et nom de domaine obligatoires (+- 60 €/an) 

J'espère que cet article vous permettra de mieux comprendre les trois plateformes et de trouver celle qui vous sera la plus adaptée. Il en existe bien évidemment des autres, mais que je ne considère pas aussi importantes que celles présentées ici. 

Tout savoir sur la brand board + freebie

Le brand board c'est quoi?

Lorsque que l'on décide de créer un blog ou un site, il est important de se poser les bonnes questions, à savoir quel est son objectif? Quel finalité à le blog? Pour qui est-il destiné, la manière d'écrire son contenu, le visuel, la fréquence de publication, la manière d'aborder les articles, etc. Aujourd'hui, nous allons donc aborder le visuel du blog/du site. Et pour cela nous allons utilisé le terme de brand board.

Qu'est-ce que la brand board?


La brand board est un visuel graphique qui reprend tous les éléments de votre identité. On y retrouve votre logo, les couleurs principales, les éléments graphiques comme les icônes, les motifs et tout autre élément se rapportant à votre marque, votre thématique. En résumé, il s'agit d'un condensé visuel de votre identité graphique. Il peut parfois être plus complexe mais le but est d'avoir un aperçu global et direct de ce que représente votre blog, votre marque.

A quoi sert la brand board?

Une brand board a plusieurs fonctions. Tout d'abord, elle vous assure une parfaite harmonie avec l'ensemble de vos futurs projets et travaux. Tous vos articles, images, illustrations, documents seront donc toujours effectués sur base de cette brand board. Si vous modifier un aspect visuel de votre site, il suffira simplement de modifier la partie concernée dans votre brand board et vous pourrez visualiser si l'ensemble est toujours harmonieux. 

De plus, il peut être très utile de transmettre cette brand board a de nouveaux collaborateurs afin qu'ils puissent comprendre de façon rapide votre univers sans pour autant rentrer dans les détails.

Comment réaliser une brand board?


Lorsque l'on souhaite réaliser une planche brand board, la meilleure solution est d'utiliser un logiciel tel que Photoshop qui sera très pratique pour effectuer les modifications mais aussi pour réaliser les projets tiers. En effet, avoir un template d'une brand board sous la main vous facilitera la vie mais vous aidera probablement pour vos futurs projets.

Les idées et modèles sont nombreux et peuvent être déclinés en différentes compositions. Pour vous donner un petit coup de pouce, un template de base et totalement gratuit est à télécharger en fin d'article.  Il nécessite un logiciel comme Photoshop qui lit le format PSD. Ce template pourra vous aider  à construire votre propre brand board de manière simple et pratique. Si vous ne possédez pas Photoshop, vous pourrez toujours trouver des tas d'exemple sur le net et utiliser un autre programme que vous trouverez gratuitement sur le net (Canvas, Photoscape, Photofiltre, etc.).

Dans l'exemple ci-dessous, je vous montre à quoi pourrait ressembler mon propre brand board. Bien que j'ai modifié le design du blog récemment, l'idée est de reprendre les éléments du design de votre blog (fonts, panel de couleurs, les illustrations principales, etc.).