[Apprenti] Eklablog - Créer un blog sur eklablog.com

Bonjour!

Comme souvent dans ce cas, une création de tutoriel démarre sur la base d'une question. Celle-ci émanant de moi à l'origine mais ayant pris les choses en main en direct pour aller plus vite, je n'ai plus besoin de ce tuto. Néanmoins, je me dit que d'autres personnes en ont peut-être besoin et/ou ne connaissent pas cette plateforme plutôt bien équipée.

Un sommaire (pour ceux qui n'ont pas besoin du début):
L'Article
Les Rubriques
La Newsletter
Le JavaScript
Configuration du blog/Permissions

Commençons donc par l'adresse de la plateforme: http://www.eklablog.com/

Vous atterissez sur ça:



Bien sûr, vous seriez tenté de directement créer votre blog et en avant la charrue! Oui mais justement, on ne met pas la charrue avant les boeufs.
Il existe sur cette plateforme un truc particulièrement intéressant, le bouton "Essayer le blog de démo".



Quand je l'ai testé, j'ai touché à tous les réglages, ça m'a permis de me poser les bonnes questions, celles par lesquelles on doit commencer avant de se lancer:

- A quoi va servir mon blog?
- Comment il va être ordonné?
- Si je veux changer le thème, est-ce que j'ai les images? (Nous ne traiterons pas de la création de header ou de créations graphique ici, la section graphisme est là pour ça)
et par extension:
- Les dimensions du blog, lesquelles sont les plus adaptées à tous les écrans?

Bien entendu, ce sont des choix personnels mais comme une image parle mieux que des mots, j'utiliserais des images de mon blog ainsi que les images des blogs de Sucréomiel.

Cette fiche n'a pas pour but de vous prendre par la main et vous dire ce qu'il faut faire et quelles dimensions prendre pour vous. Vous devez tester par vous-même pour apprendre comment gérer au mieux votre blog. Si vous ne le faites pas, vous serez toujours tributaire de quelqu'un pour changer ou développer votre blog. Ce n'est pas le but de se forum. On partage, vous apprenez.

Donc la suite de cette fiche se fera sur des questions qui reviennent souvent (et qui pourraient être évitées si seulement la moitié des internautes testaient ce blog de démo).

Nous avons donc les 4 questions principales théoriques avant de commencer.
Sur les trois premières, je ne peux répondre à votre place. Par contre, sur la dernière, j'ai une réponse.
Je m'en vais citer notre Fu' nationale parce que c'est son métier, elle sait de quoi elle parle!

Fuyaya a écrit:

Le format qui va nous intéresser et que j'adopte systématiquement est 1280px X 1024px.
Sachant qu'au final c'est la largeur qui importe, vous qui êtes utilisateurs d'Internet savez parfaitement que ce qui importe c'est la largeur. Pour descendre au sein d'un document il y a l'ascenseur vertical et le scroll de la souris. Par contre un ascenseur horizontal pour voir le contenu c'est rédhibitoire !

La taille des écrans a évolué cependant on reste sur un format de création de 1280px. En fait notre site internet occupera seulement 900px (je parle de site à largeur fixe), les marges latérales vont nous permettre de visualiser le rendu général sur des écrans supérieur à 900px.

Pourquoi seulement 900px de largeur quand on a à présent des écrans de plus de 1680px ? Et bien car tout le monde n'a pas d'immense écran et qu'il faut également penser aux personnes qui utilisent des ordinateurs portables. Le but est de concevoir un site agréable à visiter pour tout le monde.

Donc nous en venons à la maquette, sortez une feuille et un crayon et faites-vous un dessin de ce que vous verriez comme façade de votre blog. Point très important, par rapport à la note de Fuyaya, il vous faudra choisir la taille du contenu de votre blog (je rappelle que le contenu des articles ne prend pas la totalité de la largeur du blog mais uniquement la taille des articles qui, combinée avec les menus donnera la taille totale du blog), c'est lui qui contiendra vos articles et accessoirement vos photos/vidéo...etc...

EXEMPLES

Pour vous donnez une idée, sur mon blog, la largeur totale est de 780 pixels, entre le menu et le contenu, il y a un espace de 10 pixels. Le contenu fait 585 pixels et le menu, 185 pixels. (780 = 185 + 10 + 585)

Spoiler:

Si vous ne voulez pas vous retrouver avec un blog géant qui ne va pas s'afficher entièrement sur l'écran de vos lecteurs, il vous faut penser pratique. Quelle taille vont avoir vos photos max dans vos articles pour avoir une excellente visibilité.
Sachez toutefois que cela peut se changer mais si vous faites les images des titres et des menus comme les miens,



il vous faut y réfléchir à l'avance. Je ne ferais pas de cours sur le design du blog ou les couleur à employer, une fiche pour mieux présenter son blog ici pourra vous servir de base même si vous ne faites pas de challenge. Elle reprendra point par point ce qu'il faut savoir pour avoir un blog attrayant qui donne envie aux visiteurs de rester.

Sur mon exemple, je n'ai qu'un menu à gauche plus le contenu du blog et le tout est encadré. Le fond rose qu'on voit sur les coté c'est l'arrière plan du blog, ce que j'appelle moi "le fond de la toile". Cet arrière plan, comme son nom l'indique vient à l'arrière du blog (facile)!

Sur le blog Thé ou Café, il y a un menu à droite et le contenu à gauche. Son blog ne contient pas de fond de blog, on voit directement l'arrière plan. Il n'y a que le menu à droite qui a un fond. Les dimensions sont: Blog 1000 pixels, contenu 780 pixels, menu 210 pixels et une marge de 10 pixels.

Spoiler:

Les titres de ses articles sont, eux aussi, transparents.



Sur le blog Au Fond Des Yeux, il y a un menu à gauche et le contenu à droite. Le fond du blog est semi-transparent donc on voit bien l'arrière-plan par transparence. Les dimensions: Blog 900 pixels, contenu 620 pixels, menu 200 pixels. Il y a des marges externes de 20 + 30 + 20 pixels.

Spoiler:

Les titres de ses articles et menu sont semi-transparents.



Comme le dit si bien Sucré, on peut faire ce qu'on veux sur Eklablog, tout est personnalisable!

CONCRETEMENT

Vous ouvrez donc un blog de démo qui vous permettra de tester tout et n'importe quoi.
Je vous le conseille vivement, vous pouvez/devez toucher à tous les réglages, toutes les côtes et tous les thèmes pour voir quel effet ça produit sur le blog.
Vous n'avez nullement besoin d'être inscrit pour utiliser ce blog de démo, vous pouvez donc faire ce qu'il vous plait. Sachez juste qu'il se réinitialise une fois par jour et que si vous mettez plus d'un jour à faire votre création, vous devrez recommencer. Il ne sert vraiment qu'à tester les différentes possibilités et non à faire un tremplin vers le vrai blog (ce qu'il ne fait pas et c'est bien dommage).



habituez-vous aussi à cette barre (je l'appelle "barre de création"), c'est par là que tout commence:



Vous avez donc votre maquette sur papier bien ficelé, c'est là que les choses deviennent intéressantes!

Commençons par un peu de vocabulaire technique:

Header: Image entête du blog, celle qui est tout en haut (en tête d'affiche!) et qu'on voit en premier.
Modules: Blocs contenus dans les menus. Sections à déterminer selon vos besoin. Chez moi j'ai le bloc "Navigation", "Legacy"... Chez Sucré, "Avec ou sans sucre", "sondage"...etc...
Rubriques: Contenues dans les modules, elles permettent de ranger votre blog et de mener vos lecteurs vers les sujets qui les intéressent. Chez moi dans le module "Navigation" il y a les rubriques "Accueil", "arbre généalogique"... Chez Sucré, dans le module "Avec ou sans Sucre" vous avez les rubriques "Autoportrait", "Daphné"...etc...
Articles: Ce sont des "modules" dans lesquels vous mettez votre sujet, ce pour quoi vous avez créé un blog. Un module de commentaire est activé automatiquement et peut-être désactivé.
Pages: Conçues comme des pages de site. Pas de module de commentaire, ce sont des pages destinées à ne pas bouger comme le sommaire ou la page contact. Elles sont quand même modifiables. Chez moi "Arbre généalogique" ou "Sommaire des chapitres". Chez Sucré "Me contacter" ou "Quelle est votre nouvelle préférée" (Module de Sondage).
Notifications: Note lors d'un commentaire reçu sur un de vos article. (Attention, si vous avez posté un commentaire sur un autre blog Eklablog, les réponses à ce commentaire seront aussi notifiées sur votre compte).

Il est important de parler avec les mêmes mots pour se comprendre et vous y retrouver.

Nous allons commencer par les menus de la "barre de création".



Contenu, comme son nom l'indique, sert à gérer le contenu de votre blog.



Apparence, sert à gérer le design de votre blog, rajouter des modules et modifier le menu qui se trouve dans le header.



Intéractions, Sert à gérer tout ce qui permet de "communiquer" avec vos lecteurs et de passer par des réseaux sociaux.



Configuration, sert aux permissions, bannissements, réglages pour mettre le blog sous mot de pass ou encore gérer le nom de domaine. C'est par là que ceux qui ont un blog sur Skyblog/canalblog/overblog/blogger pourront importer directement leur contenu sur Eklablog.



Mon Compte, sert à modifier votre compte/profil (facile!), gérer les messages et voir toutes les notifications du blog.



"La bulle", Raccourcis vers les dernières notifications.

Bon, voyez, c'est quand même assez intuitif!

LES POINTS LES PLUS COURANTS

L'ARTICLE

Pour créer un article, rien de plus simple : cliquez sur le bouton « Ecrire un nouvel article » situé en dessous de votre titre de rubrique. Ou dans le panneau de configuration horizontal : Contenu > Nouvel article.


Une fenêtre d’édition s’ouvre. Entrez le titre de votre article avant de s’attaquer à la rédaction.


Onglet « Article »
Eklablog propose tout un panel d’options plus ou moins complet suivant le mode (Simple, normal, expert).



Vous retrouvez les essentiels que vous pouvez avoir avec un logiciel de traitement de texte. Notez la présence d’un vérificateur d’orthographe. Votre texte peut soit être collé de manière brute, soit conservé la mise en page sous Word.

Il existe un mode plein écran. Des smileys et tableaux sont insérables.

L’éditeur comprend un hébergeur d’image qui redimensionne et positionne selon vos souhaits. Un onglet spécifique est dédié à l’intégration de l’url ou code html d’une vidéo. Les musiques que vous souhaitez ajouter à votre article ne doivent pas excéder 10Mo. Hébergez également les documents de votre choix. Un éditeur du code html et des feuilles de style (CSS) est également inclus.

Point important: Il faut savoir aussi que la rédaction d'article compte un saut de ligne comme un paragraphe et que vous risquez de vous retrouver avec un texte hyper aéré. Pour palier à ce souci, à chaque fois que vous voulez passer à la ligne sans sauter de ligne, appuyer sur SHIFT+ENTREE.

Comme vous pouvez le constater, eklablog ne pose aucune limite à la personnalisation de vos articles !


Onglet « Chapô »


Qu’est-ce qu’un Chapô ? C’est une accroche comportant les informations que vous souhaitez et qui invitera le visiteur à lire la suite de votre article. Au lieu d’avoir votre article qui s’affiche dans son intégralité dans la rubrique, vous ne verrez que votre chapô pour un gain de place et d’efficacité. Le chapô fonctionne de la même façon qu’un article pour sa rédaction.


Onglet « Options »


Dans cet onglet, vous pourrez choisir la rubrique dans laquelle votre article apparaitra, la date de publication (maintenant, plus tard en précisant le jour et l’heure, pas pour le moment) et les tags qui faciliteront la recherche. Les tags peuvent être suggérés automatiquement.


Une fois satisfait par votre article, il ne vous reste plus qu'à enregistrer et le tour est joué !

LES RUBRIQUES

Quand vous entrez dans "Contenu" pour gérer vos rubriques, vous tombez sur ceci:



Rubriques d'articles, ce sont les rubriques qui, comme le nom l'indique, contiennent vos articles. Vous ne pouvez pas créer d'article sans être dans une rubrique. Quand vous démarrez le blog, il y a donc une rubrique accueil par défaut. Si vous ne créez pas de rubriques, tout ce que vous posterez se trouvera dans la rubrique accueil. Ce serait dommage de ne pas en créer!
Donc par exemple, dans mon cas, la page d'accueil est celle qui contient mon blabla de présentation, c'est une page et non un article, on ne peut pas poster de commentaire (c'est moi qui l'ai voulu ainsi, j'aurais très bien pu faire un article normal. Dessous il y a la rubrique chapitres. C'est dans cette rubrique que je poste tous mes articles qui contiennent mes chapitres.
Dessous, le bouton ajouter vous permet... d'en ajouter...

Ainsi, vous pouvez rajouter une galerie Flickr pour ceux qui en ont une.
Des pages (qu'on apparente à des pages de site) comme moi j'en ai ("arbre généalogique" et le "sommaire des chapitres") qui sont vouées à rester les mêmes.
Un forum si vous en avez besoin.
un livre d'or pour récolter les avis de vos lecteurs en plus des commentaires. (J'avoue qu'une fois qu'on a des modules de commentaires, le livre d'or devient un peu un oublié des lecteurs!)
Une rubrique "dernier articles" qui indiquera à vos visiteurs quels sont les derniers articles.
Les archives (très utile quand on a un blog assez vieux), ça classe les articles par année.
Les sondages.
La newsletter au cas où vos lecteurs veuillent suivrent tous vos articles (nous expliquerons plus en détail la newsletter un peu plus loin).
Contact. Pour que vos visiteurs puissent vous joindre.
Recherche. Quand on a un blog de plus en plus conséquent et qu'on recherche un truc précis.
Tag Cloud, un nuage de mots clé qui peuvent servir à guider vos lecteurs via les tags de vos articles et qui sert aussi à mieux vous référencer.

Le lien que vous voyez à droite vous permet de lier articles et pages. C'est ce lien que vous donnez quand par exemple, la page d'accueil n'est pas celle par défaut quand vous paramétrez la page d'accueil.

LA NEWSLETTER

La newsletter est un mail créé par vous et envoyé par vous à vos lecteurs, du moins, ceux qui s'y sont inscrits. Pour ce faire, rien de plus simple.
Vous avez vu au-dessus comment placer une rubrique newsletter, vous arrivez donc à ça:



Ensuite, il suffit que vos lecteurs s'inscrivent, reçoivent le mail de confirmation qui leur sera envoyé automatiquement (qu'ils pensent bien à vérifier dans leurs spams surtout!), qu'ils devront valider pour enfin la recevoir.
Bon, c'est bien beau mais comment faire pour voir qui s'est inscrit?
Il suffit d'aller dans "Interactions", "inscrits à la newsletter".

Bon, je ne peux pas vous mettre d'images parce que je n'ai pas d'inscrits (mon blog est trop jeune). Je peux vous montrer celui de Sucré:



Vous pouvez voir qui a validé son mail et vous pouvez renvoyer manuellement au cas où vous auriez un lecteur qui se serait loupé avec le mail de confirmation. C'est dans cette fenêtre aussi que vous pouvez rédiger vos newsletter (à raison d'une max par jour) qui se gèrent comme un article (donc avec l'option de l'envoyer à une date ultérieure).
Vous pouvez aussi créer une newsletter via l'onglet "Contenu".

Point important: Ecrire un article ne génère pas de newsletter. Une newsletter c'est un mail que vous écrivez et envoyez vous-même.

LE JAVASCRIPT

Pour ceux qui voudraient faire des trucs particulier comme par exemple faire des menus déroulants, il vous faut le JavaScript.

Qu'est-ce que le JavaScript? Le JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi côté serveur. C'est un langage orienté objet à prototype, c'est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de créer leurs propriétés, et notamment une propriété de prototypage qui permet d'en créer des objets héritiers personnalisés.

(Source Wikipédia)

Bon, malgré tout ce charabia, si vous en avez besoin, il n'est pas disponible par défaut sur les blogs Eklablog. Il vous faut en faire la demande via le Formulaire de Contact directement. Il n'y a rien de plus à faire qu'attendre la réponse des admins ensuite. Comme c'est une question assez récurrente, je me permet d'en faire un petit point.

CONFIGURATION DU BLOG

Dans l'onglet "Configuration", vous avez "Configuration du blog".



Dans le sous-onglet "Général", vous pouvez voir le nom de votre blog, votre slogan, la langue choisie, l'emplacement du fameux lien à coller si vous avez une page d'accueil particulière pour que vos lecteur tombent dessus en premier et le mot de pass si vous voulez que votre blog ne soit lu que par des proches (en cas de journal familial, intime ou autre), il sera bloqué pour toute personne n'ayant pas ce mot de pass.



Le sous-onglet "Nom de domaine" vous donne la manipulation pour acheter votre propre nom de domaine et ainsi avoir votre propre adresse tout en conservant votre blog.



Celui de "Meta tags" vous permet de coller les balises nommées Meta tags. Ces balises servent à indexer au mieux votre blog sur les moteurs de recherche. Ces balises servent surtout si votre blog vous fait gagner votre vie et qui a donc besoin d'être mieux vu sur internet. Si vous voulez en savoir plus, je vous conseille d'aller directement voir le Manuel d'utilisation d'Eklablog.



"Avancé" vous permettra de choisir le nombre d'articles par page. Je vous conseille un petit chiffre, en effet, il est assez "soulant" d'avoir à scroller pour revenir en haut de page quand on veut voir une autre partie du blog par exemple.
Il vous permet aussi de changer le sens de lecture de vos article (par défaut c'est du plus ancien au plus récent) mais pour une histoire, il vaut mieux le contraire. Quand on arrive sur un blog et qu'on commence par la fin de l'histoire, c'est moins marrant. Si vous avez un blog "journal intime", vaut mieux garder le sens par défaut, on préfère avoir les dernières nouvelles que celles d'il y a trois ans non?

Dans les options, Ouvrir les images dans une boite de surimpression vous permettra d'ouvrir les images sans quitter la page en cours (c'est mon cas).
Vous pouvez activer la navigation Full-Ajax: Ajax est la combinaison de technologies telles que JavaScript, CSS, XML, le DOM et le XMLHttpRequest dans le but de réaliser des applications Web qui offrent une maniabilité et un confort d'utilisation supérieur à ce qui se faisait jusqu'alors (source Wikipédia). Il peut permettre par exemple d'avoir de la musique en continu tout au long de votre visite sur le blog mais de ce fait, empêche l'utilisation des flèches "précédent/suivant" de votre navigateur. Et en tant que lectrice de blog, je peux vous garantir que c'est rageant! Par contre, il est utile dans bien d'autres domaines, il permet de ne charger que les éléments qui changent sur une page et de se fait, de charger plus vite.
Afficher liens précédents/suivants des pages de votre blog permet aux internautes de ne pas revenir sur un sommaire (en cas d'histoire) mais peux le perdre si vous n'avez pas mis vos histoires dans une catégorie précise et que vous écrivez l'une ou l'autre histoire dans le même temps. (Exemple: Chapitre 1/histoire1/page 1 suivi de chapitre 36/histoire 12/page 60... perturbant )

Le code Google Analytics vous permet d'avoir des statistiques plus précises sur votre blog que celles d'Eklablog incluses - Onglet Interactiosn/Statistiques de la barre de créations-). il faut inscrire votre blog sur Google Analytics. Vous obtenez une balise à copier dans cette partie.

Dans l'onglet "Configuration", vous avez aussi "Permissions".



Tout est dans l'image. Ceci vous permet, suivant la permission accordée, de gérer un blog à plusieurs. Je ne saurais vous conseiller de bien choisir vos partenaires, il en va de votre blog et de sa réputation.

Nous avons donc abordé tous les points essentiels (qui ne concernent donc pas le design du blog), à vous de jouer!

______________________________________________________
En collaboration avec Sucréomiel.
Créé spécialement pour le forum Sims Artists. Idjya

Post réservé pour astuces ultérieures.

Merci pour le tuto les filles !

Waouw impressionnant le travail que vous avez effectué, merci les filles !!!

Merci surtout à idjya qui a fait 90% du tuto

Merci à toutes les 2 pour ce super tuto!

Merci les filles !

Merci pour ce tutoriel !!

Super tutoriel, bravo à vous deux !

Merci pour le tuto qui m'a bien aidé surtout que je n'y connais pas grand chose en blog

Haha je comprends mieux maintenant comment pouvait-il y avoir les menus déroulants sur un blog que j'avais vu, ou bien la page d’accueil et les pages des rubriques sur le blog d'idjya

Merci beaucoup pour ce tuto très utile!

Merci beaucoup  un tuto complet et excellent !