More Little Whiz Bang Gadgets and Other Stuff to Jazz up Your Post!

beekerst (58)in #steemit • 7 years ago (edited)

More little whiz bang gadgets and stuff to jazz up your post!

Greetings my friends, if you have been following me you will remember a couple of tricks to manipulate the way your pictures behave in your post. I'll recap a couple here. You can cut and paste the type in the grey slider lines right into your text editor to work with it.

This string will center your text or picture:

<center>Your Text or Image File Goes Here</center>

This string will wrap your blog text to the right side of your pictures and pull the image left:

<p><div class="pull-left"> Image File Goes Here</div>

This string will wrap your blog text to the left side of your pictures and pull the image to the right:

<p><div class="pull-right">Your Image File Goes Here</div>

Suppose you want to pull your

text lines over to the right of the screen and
make them raggedy on the left
like this.

This string will move your text to the right side of the screen:

<div class="text-right">Your Text Goes Here</div>

Suppose you want to pull your

text lines over to the left of the screen and
make them raggedy on the right
like this.

This string will move your text to the left side of the screen:

<div class="text-justify">Your Text Goes Here</div>

Suppose you want to pull your

text lines to the center of the screen
and
have them
align
like this.

This string will move your text to the center of the screen:

<div class="text-center">Your Text Goes Here</div>

Remember to hit the return key to position your new line of text in the examples above.

Pretty neat, Huh?

Have you noticed that when you paste a picture into your blog there are no breaks above and below it?
None here!

And none here either!!!!

To make a space above and below a picture use this line:

<br><center>Paste Your Picture Here</center><br>

Like below.

Notice how the random text is spaced above and below the picture?
Be sure to look close.

Random text random text random text Random text random text randomRandom text random text random textRandom text random text random textRandom text random text random text Random text random text random text Random text random text random text random text Random texy ourdam winn ernfi rstt commen teth atnfin dsxt hisdge tse. dfiv e dsbd ext Random text random text random text Random text random text randomRandom text random text random text random text

Random text random text random textRandom text random text random textRandom text random text random text Random text random text random text Random text random text random text Random text random text randomRandom text random text random text random text random text random text

This is really useful when adding a caption!

To make a caption under your image use the following code:

<br><center>Your Image Goes Here</center>
<center>Your Caption Goes Here</center><br>

And it will look like this!

My Caption

Neat Stuff, Huh?

If you need to display html code in your blog, like I'm doing here, type four spaces ,then the code, and it will create a grey slider bar that won't execute the code you are trying to explain in your blog.

For example, in order to show you how to type the next line in the text box I made this slider bar.

<center>Your Image Here</center>

Have you ever wondered how to make those faint gray separators between text like the one above? That's just 3 underscores and a return!

But I've found something way better, some people call them bars, some call them separators or rulers. I've been collecting them. Hit me up if you know some good ones or put them in the comments for all to share!

Here's my favorite:

Here are some more:

I found these in old Steemit post by:

@byn

And
@cryptosharon

These girls are awesome Steemians and I would urge you to look them up, find their latest post, and give them some love!

SMASH DAT UPVOTE BUTTON ON THEM!!!

How about those neat gifs at the end of some of these more sophisticated blogs urging you to upvote, resteem and follow?

I'm not certain, but I think as long as the Steem or Steemit logo is included it should be okay to use. I know the one I use at the end of my post is a freebie. To get these, all you have to do is save the gif to your computer by right clicking on them and selecting the save or save as feature. I'm starting a collection of these too, for future use. Hit me up in the comments if you come across a stash of them!

How about banners to spiffy up the ole blog page?
DQmYjezFS9f1czr5cznih9oP56qRJdRMsBoWsrwDbbjZbP1_1680x8400.jpg