<div class="MarkdownViewer Markdown"><div><p></p><center><img src="https://steemitimages.com/DQmNpR45DQkrn27Yyr9PUDmsjch9rgBqEWuUUgak9d8WpJT/Layout-Tutorial-by-%40aka-alias.gif" alt="Layout-Tutorial-by-@aka-alias.gif"></center><center><img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmSaTaVyHuLSkB7sMvTxoT6JH6XZqQBQGXEcappKqfxrTx/20180325_BlocksClockwiseAnimated_by_%40aka-alias.gif" alt="20180325_BlocksClockwiseAnimated_by_@aka-alias.gif"></center><center><h2>Hello fellow Steemians!</h2></center><div class="pull-left"><h1>T</h1></div><br><br>oday I am re-posting a tutorial I made about half a year ago.  Why, you might ask? Because I see most folks are not taking the time to work on the layout of their posts. With a little additional effort you can visually enhance the way your contributions to the Steemit platform look and feel. Therefore, we are once again going to take a look at some basic coding you can use to improve the layout of your Steemit blog posts. My aim with this tutorial is to give you an idea of some of the options you have  when you are typing up your blog posts.<p></p>
<div class="pull-left"><center><img src="https://steemitimages.com/DQmVDQ9GBpMmtFfe5uf6vGV8QGk7bseXBVVTrS4D3uVYMnd/20180330_BlocksCounterClockwiseAnimated2_by_%40aka-alias.gif"></center>
<br>Using some basic HTML coding it is easy to make your posts look good!
<br><br>
This post begins with two animated GIFs. Most of you know that you can add images to your post by simply dragging and dropping them or by pasting the image URL into your <div class="pull-left"><center><h3><i>"Using some basic HTML coding it is easy to make your posts look good!"</i></h3></center></div> post. To make sure that the image is displayed nicely you can choose to center it using the following code as seen in the image on the right. Of course you can use this handy piece of code on more than one occasion. I've used it to center the welcome text <b>"Hello fellow Steemians"</b> too!</div>
<div class="pull-right">
<center><img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmeE2eb89eEQuQyc6YGigsvdNHXALJpP9GodTPsZsg7U6v/20180330_BlocksClockwiseAnimated2_by_%40aka-alias.gif"><br><br><br><br><br><br>
<img src="https://steemitimages.com/DQmNScSS6Ycz4z16xqhAaEp324mEErLcPG8XdR4jfC7VYxy/CenterTag_by_%40aka-alias.png"></center></div>
<center><img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmQtNdvZfVVuSmkDBQB8m6gYTXucQ4opeRTXhTBCu1VTFR/20180325_BlocksCounterClockwiseAnimated_by_%40aka-alias.gif"></center>
<div class="pull-right">
Steemit makes it easy to experiment with most of the little snippets of code displayed in this post. Thanks to the easy preview it provides, you'll instantly know if the code you used works or not! 
<br><br><div class="pull-right"><center><h3><i>"..use these codes symmetrically to prevent errors."</i></h3></center></div>
You can add little the little pieces of code presented on the left to give <b>heading tags</b> to text or make text <b>bold</b> and/or italic (also named "cursive"). To once again use the example of the welkom text, "Hello fellow Stemians" has been given "h2 heading tags." It is also possible to combine these tags to make text <b><i>bold &amp; italic</i></b> at the same time. <i><b>Please keep in mind it is best to use these codes symmetrically to prevent errors.</b></i>
</div>
<div class="pull-left">
<br><br><br>
<img src="https://steemitimages.com/DQmQXGLGhTv1ajZs1Hi22aGTLwis4xi94WDbjEg2tE23ENG/CodeSnippets_HeadersBoldCursive_by_%40aka-alias.png"></div><center>
<img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmSaTaVyHuLSkB7sMvTxoT6JH6XZqQBQGXEcappKqfxrTx/20180325_BlocksClockwiseAnimated_by_%40aka-alias.gif"></center>
<div class="pull-left">
Now for something a little bit more complicated I'll show you how you can make a <b>"drop cap"</b> like the <b>"T"</b> of the word <b>"Today"</b> in the first paragraph of this post. You can find the code on the right. <div class="pull-left"><center><h3><i>"Now for something a little bit more complicated..."</i></h3></center></div>As you can see we use a so called <b>"div"</b> with <b>"class="pull-left""</b> after this follows the <b>"T"</b> followed by the <b>"h1 opening and closing header tags"</b>. Now comes the <b>"div closing tag"</b> followed by two <b>"br"</b> or<b>"break tags."</b> These latter two are added to provide the spacing we need to align the T with the first sentence of the paragraph. Finally we follow these with the rest of the paragraph. <i><b>Please note that this does not work when you center the paragraph!</b></i></div>
<p><br><br></p><div class="pull-right"><br>
<img src="https://steemitimages.com/DQmXbP21KVkvkGHPPVjbi4w5RNjnnQrpkkXrsVMLoFhxTYz/DropCap_by_%40aka-alias.png">
</div>
<center><img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmQtNdvZfVVuSmkDBQB8m6gYTXucQ4opeRTXhTBCu1VTFR/20180325_BlocksCounterClockwiseAnimated_by_%40aka-alias.gif"></center>
<div class="pull-left"><img src="https://steemitimages.com/DQmVDQ9GBpMmtFfe5uf6vGV8QGk7bseXBVVTrS4D3uVYMnd/20180330_BlocksCounterClockwiseAnimated2_by_%40aka-alias.gif">
It is also possible to embed certain "div tags" within each other. This will make your work jump out even more! </div>
<div class="pull-right"><img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmeE2eb89eEQuQyc6YGigsvdNHXALJpP9GodTPsZsg7U6v/20180330_BlocksClockwiseAnimated2_by_%40aka-alias.gif">
The embedding of tags is what makes it possible to create the quotations you see peppered throughout this tutorial post.</div>
<center><img src="https://steemitimages.com/DQmaDtN7Y7ge1S4gQ1yTF19Cq141oUUetnZfhiNWGhTKNWr/EmbeddedDivs_by_%40aka-alias.png"></center>
<center><i>Please note that you can change "pull-left" into "pull-right" to force text and images to the right instead of to the left.</i></center><img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmSaTaVyHuLSkB7sMvTxoT6JH6XZqQBQGXEcappKqfxrTx/BlocksClockwiseAnimated.gif">
<center><h2>This concludes the tutorial. </h2></center>
I might do more of these in the future. If you would like to keep up to date, please don't hesitate to follow me.
<br>
<center><img src="https://steemitimages.com/DQmVDQ9GBpMmtFfe5uf6vGV8QGk7bseXBVVTrS4D3uVYMnd/20180330_BlocksCounterClockwiseAnimated2_by_%40aka-alias.gif">
<img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmNbVjipZE1gMvjAjAG89hwrgZhuMJjz7pDunXZaDDmvbw/20180328_BouncingBallDivider-reversed_by_%40aka-alias.gif">
<img src="https://steemitimages.com/DQmeE2eb89eEQuQyc6YGigsvdNHXALJpP9GodTPsZsg7U6v/20180330_BlocksClockwiseAnimated2_by_%40aka-alias.gif"></center>
<br>
I also regularly post <b>Free Steemit Graphics</b> like the animated dividers you can find scattered throughout this post. If you would like to check them out or use them feel free to do so.
<br><br><center><b>If you do choose to use these files I would greatly appreciate a re-steem!<br>And if you post a link to my blog below the posts in which you use these Free Steemit Graphics, I would be forever grateful. The link would preferably look like this:<br> <a href="https://steemit.com/@aka-alias">Free Steemit Graphics by: @aka-alias</a></b> </center>
<br>
<img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmSaTaVyHuLSkB7sMvTxoT6JH6XZqQBQGXEcappKqfxrTx/BlocksClockwiseAnimated.gif">
<br><br><b>With kind regards,</b>
<center>
<p><a href="https://www.stefanfincken.com" rel="noopener" title="This link will take you away from steemit.com">
<img src="https://steemitimages.com/0x0/https://cdn.steemitimages.com/0x0/https://steemitimages.com/DQmecxh5zuXcMwvs9QP8meBsu4vwdVCNkcoXz6Q5iZLV3U4/20180509_Handtekening-animated_150x150-final.gif"></a></p>
<center>
https://steemitimages.com/DQmQtNdvZfVVuSmkDBQB8m6gYTXucQ4opeRTXhTBCu1VTFR/20180325_BlocksCounterClockwiseAnimated_by_%40aka-alias.gif 
<img src="https://steemitimages.com/DQmNpR45DQkrn27Yyr9PUDmsjch9rgBqEWuUUgak9d8WpJT/Layout-Tutorial-by-%40aka-alias.gif" alt="Layout-Tutorial-by-@aka-alias.gif"></center><center>
</center><p></p></div></div>