Great Graphics = Great Blog! Beginner's Guide ... and not only!

bluemoon(77)

Published in

#steemit

Words

710

Reading

4 min

Listen

Play

Why We Need a Good Looking Blog?

I think we all agree. An elaborate graphic of a blog can often increase its value. As a consequence, this brings votes and follow-up for the author. Ensure trust and reputation. There can be a lot of benefits ...

I have to admit that for a long time I did not know how to write a post, how to use the photos. I have seen many remarkable posts and I wanted to be able to do the same. Fortunately, a friend, @old-guy-photos recommended me a post that helped me, which opened my eyes to Markdown.

What is Markdown?

"Markdown syntax allows you to format your text and create headlines, lists, tables, links, images, and block quotes".Source

Well, if you want to build a great blog, @gmuxx has made a post where he explains all this. Posting is over three months old and so many or new members don't know it. That is why I present here his post: A Beginner's Guide to Markdown.

I suggest you read and learn from this post. You will greatly improve your posting!

Why Did I Post This?

You probably wonder why I made this post. Although in the post of @gmuxx you find everything you need, more friends asked me how I do when I set my photos in different positions in the blog. I promised to make a demonstration. This is!

So, Just About Photos

To be able to juggle with the images first we need the image link. There are several ways to find out the link to the pictures. I use a method that I think is simple. If someone uses other methods, I would be glad if she(he) would show us in a comment.

First I Insert images by dragging & dropping. You will see the long link in the editor, like this:

![IMG_20170914_140420.jpg](https://steemitimages.com/DQmUuitDbaMhfJmMFSme7Ea16QRt5DsZwgpUjYMjoVNi4bt/IMG_20170914_140420.jpg)

This link in the editor will result in a blog image as follows:

Now, to be able to place the images in different parts of the blog, we need the image link. We get it from the link in the editor from which we delete a part, as you can see below.

~~![IMG_20170914_140420.jpg](~~https://steemitimages.com/DQmUuitDbaMhfJmMFSme7Ea16QRt5DsZwgpUjYMjoVNi4bt/IMG_20170914_140420.jpg~~)~~

And the link we'll use from now on is this:

https://steemitimages.com/DQmUuitDbaMhfJmMFSme7Ea16QRt5DsZwgpUjYMjoVNi4bt/IMG_20170914_140420.jpg

We Have the Link!

Now we can position the image in different parts of the blog (left, right, center). For this, we have to use a format:<div class=pull-right>, <div class="pull-left">, <center> and </div>, the last always at the end of the image link.

Right

<div class=pull-right>https://steemitimages.com/DQmUuitDbaMhfJmMFSme7Ea16QRt5DsZwgpUjYMjoVNi4bt/IMG_20170914_140420.jpg</div>

This link in the editor will result in a blog image as follows:

Left

<div class="pull-left">https://steemitimages.com/DQmUuitDbaMhfJmMFSme7Ea16QRt5DsZwgpUjYMjoVNi4bt/IMG_20170914_140420.jpg</div>