Re-post: Steemit Layout Tutorial: Medium Difficulty

in #steemit6 years ago

Layout-Tutorial-by-@aka-alias.gif
20180325_BlocksClockwiseAnimated_by_@aka-alias.gif

Hello fellow Steemians!

T



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.


Using some basic HTML coding it is easy to make your posts look good!

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

"Using some basic HTML coding it is easy to make your posts look good!"

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 "Hello fellow Steemians" too!






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!

"..use these codes symmetrically to prevent errors."

You can add little the little pieces of code presented on the left to give heading tags to text or make text bold 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 bold & italic at the same time. Please keep in mind it is best to use these codes symmetrically to prevent errors.



Now for something a little bit more complicated I'll show you how you can make a "drop cap" like the "T" of the word "Today" in the first paragraph of this post. You can find the code on the right.

"Now for something a little bit more complicated..."

As you can see we use a so called "div" with "class="pull-left"" after this follows the "T" followed by the "h1 opening and closing header tags". Now comes the "div closing tag" followed by two "br" or"break tags." 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. Please note that this does not work when you center the paragraph!




It is also possible to embed certain "div tags" within each other. This will make your work jump out even more!
The embedding of tags is what makes it possible to create the quotations you see peppered throughout this tutorial post.
Please note that you can change "pull-left" into "pull-right" to force text and images to the right instead of to the left.

This concludes the tutorial.

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.

I also regularly post Free Steemit Graphics 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.

If you do choose to use these files I would greatly appreciate a re-steem!
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:
Free Steemit Graphics by: @aka-alias



With kind regards,

Layout-Tutorial-by-@aka-alias.gif

Sort:  

Thank you for the repost, is really good for the newbiens as me.

You're welcome.
You might be interested in some of my previous posts where you can find some free to use animated dividers.
Happy Steeming!

nice one, i'll be arranging my images/text better next post. you saved me the time looking it up.

Thanks. I hope it proves useful.

:)

This post was upvoted by @interfecto12 @interfecto13 thanks to @aka-alias

@interfecto: Selling the cheapest upvotes on Steemit for just 0.001 SBD each! Send any amount 0.001-0.1 SBD with your postlink as memo to @interfecto to buy instant upvotes!

Coin Marketplace

STEEM 0.30
TRX 0.12
JST 0.033
BTC 64093.86
ETH 3123.80
USDT 1.00
SBD 3.94