HTML is one of the scariest abbreviations for bloggers. Those four letters that stand for Hypertext Markup Language, can be difficult to get your head around. It's taken some time for myself to figure it out. During my final year of GCSE's, I had to sit an exam where I had to create a website using basic HTML language. It wasn't easy. Let's just say that I had to resit it. After doing all of that, i made sure to teach myself some of the basics because they can be super helpful when I blog. Today, I'm going to give you tips and step by step guides on the HTML basics. I'll help you embed tweets and playlists. How to cope when your text isn't the correct font, and how to link your site when commenting on other people's blogs. I may include a few other things too!
First thing's first is to learn what your HTML space should look like. If you have your blog set up correctly, then the HTML shouldn't include anything other than line breaks. When you publish your post, all of those things should already me sorted out. Line breaks are super easy, when you look at a HTML page, a line break will look like </br>. Above is the current HTML page for this blog post. Nothing too confusing, right?
ADDING A CUSTOM GADGET TO YOUR SIDEBAR
When it comes to adding in things into my sidebar on my blog, I had to do a lot of research. One quick way of adding in a small section, maybe a promotional code for your readers, create it as if you were writing a normal post in the 'Compose' section. Once you have done this, you can copy the HTML code from this into your HTML gadget on the 'Layout' page on your blog. hey presto, a quick and easy gadget which can include links, photos, videos and text!
COPYING FROM WORD INTO BLOGGER
Hello, this is an example of what may happen when you copy
from a Word document straight into Blogger!
This can be a massive issue. if you see the text above, it isn't the correct font, or colour. In fact, it's screwed everything up! Sometime's it's as simple as highlighting the text in 'Compose' and changing the font and colour. However, I've come across instances where this doesn't work which is annoying to say the least. This is what my HTML page looks like now that I've copied the text from Word straight into Blogger.
And this goes on for absolutely ages! At the bottom, there will be a CSS sheet which you shouldn't worry about at all, it is basically the sister for the HTML. All you need to be looking at is where your text is and the div tags that are surrounding it. Div tags look like <div>CONTENT GOES HERE</div> and once you've found them, they're easy to edit. Any tag with a backwards bracket in, is the closing tag.
So I have found the correct piece of text just under the End Fragment. All I am going to do is delete the div tags and span tags. If you remember back tot he beginning, none of this is actually needed. I would delete <div class="MsoNormal"> and <o:p></o:p></br> Just to be sure, I usually delete all of the <span> tags as this is what holds the font type, colour and size. You only need the text and so everything between those div tags, span tags and weird <o:p> tags can go!
EMBEDDING SOCIAL PAGES (INSTAGRAM, TWITTER, FACEBOOK)
Adding in your tweets and Instagram posts are pretty important as a blogger. Its such an easy job when you know how to! Twitter is the easiest. I've taken a few screenshots to help you along the way! For Instagram and Facebook, the steps are pretty much the same, just look for the three dots.
Find the drop down menu for the post that you would like to embed into your post. When you do this, lot's of options will come up. In this case, it's pretty self explanatory, you need to choose 'Embed Tweet'. In some cases, you may need to click 'Share', it depends on the social page you want to embed.
A popup like this will appear and you need to be sure that the box 'Include Media' is checked. You should then copy and paste the code into your HTML in the space that you want it to be. Usually, you can go back into 'Compose' and centre the post like you would with text. Here is what my embedded tweet is like. If the post has not centred, usually this is when you embed tweets, you should find the part of the code that says <blockquote class="twitter-tweet"> and insert tw-align-center. so that tag should look like this: <blockquote class="twitter-tweet tw-align-center">
Are you subscribed to my YouTube channel yet? 🤷🏼♀️❤️https://t.co/EJLbDIagTH#bloggers #youtube #beginner #teen— SophieTheUnique⭐️ (@OneUniqueBlog) 18 November 2017
EMBEDDING SPOTIFY PLAYLISTS
I'm a music blogger so Spotify playlists are important to me! I have quite a few and it's important that I share specific albums, songs and playlists with you during some of my posts. This is a similar job to embedding a tweet. When you've done it once, it'll be an easy job!
Got to love Justin's Christmas album at this time of year! Find the three dots next to your playlist, album or song. Hover over 'Share' and the option to embed the album will appear. Just click 'Copy Embed Code' and the code will be copied to your clipboard. Once you've done this, head to your HTML space and paste the link and hey presto! you've embedded something from Spotify. You can centre this by highlighting the icon in 'Compose' and selecting the centre alignment like you would with your text.
ADDING A LINK INTO A COMMENT ON SOMEONE'S BLOG
This is a bit of an easy one because I'm going to provide you with the HTML tag that you need to add. I often sign my comment's off like this:
Adding in a link to your blog is essential as it's s quick way for someone to find your blog to return a comment or just check out your blog in general. When you comment, there is no option to go from HTML to a normal screen. Instead, you just have to add the HTML into the comment box. This is the HTML tag that you need to use.
<a href="http://www.oneunique.co.uk/">One Unique</a>
You need to change the link and text that you would like to be shown. once you've done this, it's just a copy and paste job. Quick and easy!
That's all I've got for you but if you need anymore help, let me know! I'm happy to help you. If there's anything else that you need to know to do with HTML make sure to tell me and I'm sure I can find out for you. I hope this has broken things down for you.
Do you have any HTML tricks?
Until next time...
Have you read my last post?
This is so helpful thank you
ReplyDeleteJen from Just Average Jen
You're welcome x
Deletethis is a really helpful post!
ReplyDeleteI'm glad it helped!
DeleteAll of this went right over my head, but it was so interesting to read! xox
ReplyDeleteHaha, thanks x
DeleteLove this post so much! It's so helpful.
ReplyDeleteAbby | ExactlyAbby