Embed Size (px)
DESCRIPTION
If you usually write your post first on word and then copy paste it into wordpress, Joomla or any other CMS, it may be interesting to review our tuto in order to be sure your code is clean !
Citation preview
How to Write
A clean Blog Post for Joomla or Wordpress
To Make It Short !
1. Clean your text on notepad++
2. Edit on a simple WYSIWYG text editor
3. Insert on your CRM
4. Backup into a .html file
1- Blog Writing
Not always easy !
Blog Post Writing Process
Most of the time you or your
blog writers will produce their
content on Microsoft Word or
Google Drive documents and
then will upload it into your blog.
The problem is that you need to
make sure that the code is clean
on your blog to don’t mess it up
Blog Post Writing Process
Blog Post Writing Process
Blog Post Writing Solution
So rather than a .doc file ask
your writer to provide you a .html
file
2- Why to clean
Your HTML before posting
Your CMS HTML
Whatever CMS you use it’s usually the
same idea.
Styling (fonts, size, colours) are
specified into your .css files. So if you
add another style into your page, it will
be read as the main style and will not
respect your template design.
Make it clean because
1. Looks fine on your blog
2. Google prefers clean codes
3. Faster loading time
4. You validate it and you’re
sure of it
3- Tuto
Easily clean your code
Basic HTML to know
Headings:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Text:
<p>This is a paragraph.</p>
Styling:
<p><strong>strong</strong>.</p>
<p><i>This text is italic</i>.</p>
<p><em>emphasized</em>.</p>
Image:
<img src="w3schools.jpg" alt="W3Schools.c
om" width="104" height="142">
Link:
<a href="http://www.w3schools.com">This
is a link</a>
w3schools.com/html/html_basic.asp
Test your text
1. Copy your text from its source to
your CMS
2. Click on Toogle / Source to
review the HTML
3. If it does not look like the previous
slide code, you need to edit it
Step 1 - Word to Note Pad
++
Copy paste from word to notepad ++/
So at this stage you’ll just get some
pure text with no html
notepad-plus-plus.org/
Step 2- To your editor
You can either use your blog editor
or html.am
1. Click on source / toggle editor
2. Clean all <html> you see
3. Paste your text
Now you have pure html
Editor we like: html.am/html-editors/online-html-editor.cfm
Step 3 - Edit your text
1. Click again on source / toggle
editor (you’ll see the edit text option)
2. Edit your text with bold, heading, and
basic elements
3. Click again on Toggle / Source and
select all the code between <body>
an </body> (you may not see them
based on your editor)
Tips: Avoid to use useless colours or
new fonts, etc.
Step 4 - Save as HTML
1- Copy past your text from your
WYSIWYG editor to notepad++
2- Clic on save as and and save it as
,html
Now you can review it on your
browser as any html element !
notepad-plus-plus.org/
Tadam ! Now it’s clean !
Questions ? Ask more questions into our blogpost :
http://www.joomgeek.com/blog/weekly-review-how-to-write-clean-html-posts-into-your-cms.html
