Make Those Posts Classy

in #theterminal2 years ago (edited)

Image by tammcd at Pixabay


Introduction

Bear in mind that some editors will accept some HTML tags, but some of them are definitely difficult and HTML and Markdown cannot be used together. I have put both down here, and it will be up to the individual author as to which is acceptable in which editor they are using lol.
I hate finicky editors like that: hahahahaha!

There are markdown editors such as notable.app and evernote.com, as a couple of examples of downloadable editors; and then there are evernote.com and hackmd.io as a couple of online editors. These are all excellent editors, and surely they are like everything else: this one is good for this, and that one is good for that. Each has it's own pros and cons.

It should also be noted that there is no color in the standard editors for Hive, perhaps down the road somewhere that may possibly be implemented, but for now it's not available. I am not sure if it caused security issues, or else some other kind of issue.

A Few Useful Tags

<u></u> = UNDERLINE with HTML underline
<strike></strike> = strikethrough
<hx> = header
<br> = break (space)
<br /> = line break
<div></div> = division
<div class="text-justify"></div> = evens up the right edge
<div class="pull-left"></div> = pulls all the text or image to the left side
<div class="pull-right"></div> = pulls all text or image to the right

Text Size and Style

HTML tags

Heading text-size: 1

<h1> Heading text-size: 1 </h1>

Heading text-size: 2

<h2> Heading text-size: 2 </h2>

Heading text-size: 3

<<h3> Heading text-size: 3 </h3>

Heading text-size: 4

<h4> Heading text-size: 4 </h4>

Heading text-size: 5

<h5> Heading text-size: 5 </h5>

Heading text-size: 6

<h6> Heading text-size: 6 </h6>

text-style: bold

<h5><b> text-style: bold </b></h5>

text-style: Italic or Emphasis

<h5><i> text-style "italic" or "emphasis" </i></h5>

text-style: both "Bold" and "Italic"

<h5><strong><em> Project Notebook </em></strong><h5>


Lists

    Ordered list
  1. First item of importance
  2. Second order of importance
  3. Third order of importance

<ol> Ordered list
<li> First item of importance </li>
<li> Second order of importance </li>
<li> Third order of importance </li>
</ol>


    Unordered List (order is not important, it's just a list.)
  • Second
  • First
  • Third

<ul> Unordered List
<li> Second </li>
<li> First </li>
<li> Third </li>
</ul>


Images

Use of an "<a></a>" tag -

Source

Image to be entered and centered, and click on "source" or the photo and it will take you to the source of the image.
This is the way that you could code this, you would ultimately want it short and sweet:
Source = <a href="https://pixabay.com/vectors/bee-art-busy-bee-hive-honey-162038/"><img src="https://files.peakd.com/file/peakd-hive/jamerussell/23wgHKbKZxwAAJGdb7JddRNBjnbwj4NCR2v9gTirSMCH1fnSLHuR9JvZsCoLF8mqSr5AH.png"> </a></center>
This simply entails 2 separate tags, one is the <a> tag, and the second is the <img src>, or image source then the end </a> tag

Form:
<center><a href="URL"><img src="IMAGE"> Source </a></center>



Markdown


image.png

Image by Pexels at Pixabay , colored by @ thekittygirl

Text Size and Style

~~ ~~ = strikethrough (double-tilde, one at beginning, one at the end of the word)

header text-size: 1

# header text-size: 1

header text-size: 2

## header text-size: 2

header text-size: 3

### header text-size: 3

header text-size: 4

#### header text-size: 4

header text-size: 5

##### header text-size: 5

header text-size: 6

###### header text-size: 6

text-style: italic

*text-style: italic*

text-style: bold

**text-style: bold**

text-style: italic & bold

***text-style: italic & bold***

Lists

Lists are the exact same as HTML, they work really well in combination with Markdown.


teddy-bear-g8c7fbde6b_640.png

Image by Kay Wille

Image Form:


![image.png](https://files.peakd.com/file/peakd-hive/jamerussell/23wgF8xcudrtGyoRz3zVGh7998AEhRJKuXrFnUGevyVvmqQtmbBZZWKtPBk758mzmRNfv.png)

However, I would still be using an HTML "a" tag to credit the source:
<center><a href="https://pixabay.com/vectors/teddy-bear-bear-knuffig-cuddly-478559/"> Kay Wille </a></center>


Conclusion

So to wrap this up, these posts are best when you find the right combination of HTML and Markdown, but as stated in the introduction, not all editors take too kindly to be mixed with much HTML. So it takes a little bit of practice and experimentation to find what works best for you.

One other thing worth mentioning is some of this, especially with the images, is device specific, as some of these techniques do not seem to work well on mobile, and some do. Not sure how that works as I do not use mobile. Perhaps I will confer with a friend who does know how to post on mobile, and work up another reference post. We will see in the near future.


Gif created by @liberty-minded and modified by @jimramones

awesome gif created by @zord189



Personal invitation to The Terminal Discord server

Come on by, kick off your shoes and stay a while!



Ladies of Hive Supporter;
personal invitation to the Ladies Discord server:






jr - 10/14/2021

Sort:  

Added to bookmarks ☺ thank you @jamerussell that's very interesting. I tried in my yesterday post first time use html links inside the bilingual text, as @mondoshawan suggested me, but didnt work. Always opend a new window. But I will find it out how it works ☺

Hmmm, did you put target=_self in the link?! Just read your post and the link to the german part works fine here... just saying! 😎

Haha look! thats no editor Problem that's a "frontend link Problem"
https://ecency.com/hive-101265/@mondoshawan/simple-clean-and-easy-to-use-in-post-linking#francais
At least I know I did nothing wrong trying your html Code

Ich liebe diese Christbaum Kugeln muss mir auch mal eine basteln. Ist das Deine community "Free your Mind"?

Oh I see! It works looking at the post with peakd. But doesnt work when using ecency 🤔 I edited the post yesterday once again because ecency always opend a new frame 🤔
Maybe something to discuss later on discord
☺ happy that it works on peakd at least

Okay Beeber, i researched a bit and found out that for all the html attributes to work, ecency and hive:blog would need to implement a few things to make it work. So, as it looks like, they have not spent time on this feature. The reason it does not work on their site.

and a ping for @jamerussell to get the info out

Could also be the browser... hmm, thinking about it and looking forward on to that discussion... CYA later 😌

Oh yeah, I was wrestling with those also, will work it out.
I've done jslite, and it was similar, but with these editors, they are picky.

hiveBallsForFun.png

Hahahahahahaha!!!!!

This is very helpful sir. I am a newbie in this platform, can I ask how can I get many followers?

You can go to other's posts, as your Resource Credits are rather low, and upvote a couple of posts that you really like, but concentrate on making a really nice decent comment on people's posts and give them a follow, and chances are that you will start picking up followers. But you must lead the pack, whatever you do, you will receive back. Also be aware that your Resource Credits will rebuild at a rate of 20% per day, and you don't want to fall much below that.

Also, when you make a post, make a really nice one with a couple of really good images, and maybe between 400 and 1000 words, little bit longer ones like in the 600 to 800 range is excellent as well. If you would like, here is an invitation to The Terminal, come on in, do a short intro with an intro post or a relatively current post and then we will work with you and be able to help you out.

One more thing, do not rush to do an intro yet if you are going to come into The Terminal, we will help you get started.

https://discord.gg/XZGPGpz This is a personal invitation to The Terminal. Use it or not, it's totally up to you. Have an awesome day!

Those are good basics for starting out blogging on hive.
It's important to make these things look good. 🔥🔥

Absolutely, thank you for checking it out Niallon!!!

Yes love when you do the teach blogs, is it in helpfull tool sites already ?
Have a great Hump day

Not yet, it will be shortly though!
And thank you for your confidence in me!
And thank you for the Hump Day, you do the same!

Confidential friendship :)

A7D984CA-41DA-4A1C-8C5B-E5248BABB0DA.jpeg

Based on and introducing

Great post! Will try to use them to make my post more attractive. Bookmarked.
Thanks

Very good, that is what the intention was, I just wish we had more choices like colors in the posts.

Yes, complete customization like wordpress (like different background colors, text colors and styles etc.)should be the goal for front-end. Maybe someday we will achive that.

Uptrennd was the same way, they had color but they still had other flaws in theirs, but the color was nice.

Congratulations @jamerussell! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You published more than 100 posts.
Your next target is to reach 150 posts.
You received more than 10000 upvotes.
Your next target is to reach 15000 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

To support your work, I also upvoted your post!

Check out the last post from @hivebuzz:

Hive Power Up Month - Feedback from Day 29
Hive Power Up Day - December 1st 2021 - Become an Orca!

Thank you @hivebuzz for all you are doing!

Great write up this will be so helpful for so many of us. I bookmarked this so I can come back here and use it as a reference thank you for making this and much love.

!PIZZA

Thank you @drabs587, I have a folders on my bookmarks bar for these and special bookmarks, it helps keep everything handy.

I recently did two concerning images and sourcing as well if you'd like to check them out:
https://peakd.com/theterminal/@jamerussell/how-to-source-properly
https://peakd.com/theterminal/@jamerussell/how-to-source-properly

Have an awesome day!

Cheers, I appreciate that man I also use pixabay for a lot of images and canva both great tools to help with blogging.

You have an amazing day as well and much love

!PIZZA

Thank you for my post. I feel like we are all working n how to make our post better. And the more information out there that is to the point and easy to understand if a real gift. So keep sharing the info and we will keep supporting you.

hehehe you are amazing - and I'm glad that the world sees your amazingness LOL

Kitty shared this with us all on PYPT :) and I'm glad - she actually shared another one too that i need to get to (its an open tab on my browser hehehe)

thanks for making such a fabulous guide for the newbies!!!! I hope lots get to see and UTILIZE IT!

Thank you Dreemie, you and I (and a few others hahaha) know this is the basis of the creative writing skills.
I have had 60 tabs open at once, and that's actually pretty good for a 2009 computer with a Pentium 2 processor lol. But that is for working the heyhaveyamet posts up.
I hope lots get see it and put it into practice as well, thank you!!!

hahahaha a 2009 computer???
James! LOL

you need a new one hahahahahhaha

I have three desktops, two are twins, 4" wide and about 12" tall, one is an Acer, 2009 with a Pentium 2 processor, the second is an emachines, which is my original first computer in September of 2010, it's a 2009 machine with an AMD something or other small processor, hahahaha, and then the third one is a 2013 Dell that the factory wrote off as it has reached EoL (End of Life) so they don't support them anymore. Oh, and only one monitor, so I can only use one at a time hahahaha!

Acer it turns out bought out the emachines name, so they are basically the same machine even though they have different components. They both have Windows 7 on them, I am really hesitant to switch at this point.

I have however started compiling a list of what I want in a computer. It has to be able to take 60 tabs open, run 3 full art programs at the same time, run my code editors, at least two of them, and both of my email accounts open, and also have the live ship cams from Duluth, Port Huron, the live railroad cams open in Iowa and Tehachapi, and also the live cam from the North Pole, where I am from. That is the only way to keep the computers cool enough. hahahahahaha!!!!!

ROFLLLLLLLLLLLl well you better start telling santa that list hahahahahahaha

Okay, done! I just reminded myself!

image.png

this is the best thing ever!!!!!!!!!!!

An excellent, informative post! There can never be too many of these helpful HIVE writeups and there's always something new to be learned! @jamerussell

Thank you @ninahaskin!!!
That is an excellent compliment coming from you.

Aww! That was really kind of you to say!💓

Thank you @jamerussell , this is very instructive and it is nic. Thank you.

!PIZZA

PIZZA! PIZZA! PIZZA!

PIZZA Holders sent $PIZZA tips in this post's comments:
@drabs587(2/18) tipped @jamerussell (x2)
samostically tipped jamerussell (x1)

Join us in Discord!

pixresteemer_incognito_angel_mini.png
Bang, I did it again... I just rehived your post!
Week 83 of my contest just started...you can now check the winners of the previous week!
!LUV
12

Thank you @pixresteemer!!!
Appreciate what you are doing!