As said before in the last post regarding blogger tips, I promised some HTML tips! Now, if you’re like me, then I assume you know absolutely nothing about HTML or CSS, it’s very confusing and I totally understand where you’re coming from. But never fear! It is actually very simple (I’m sure you’ve heard this a million times) and it can make your blog look great! Unfortunately, this HTML and CSS tutorial is ONLY FOR BLOGGER. I’m really sorry, but since I do use blogger, that’s what I know. WordPress is a whole other world for me, maybe one day I’ll move to WordPress with your guys’ support!
Anyways, let’s get to it! These are some of the more simple things that will spice up your blog!
Adding Social Media Buttons
- There are various ways to add social media buttons, but I personally find this the easiest way.
- To find social media buttons look on Pinterest and search up some free ones. Or you can buy them if you find some you REALLY like. For me personally, I won’t put any cash into my blog until I feel I’ve got a good handle on everything blog-related and of course, people are actually seeing my blog.
- The hardest button to find is the Goodreads button, unfortunately I can’t find the link for the free downloadable buttons I used for my blog! Sorry guys! 😦
- For this simply go to “Template” and then “Customize”. Scroll down to Advanced designer and from there go down all the way to the bottom to “Add CSS”
- Obviously you can see I have tons of CSS coding in here, ignore that. Yours is probably blank, and if it isn’t, that’s awesome!
- I’m gonna tell you right now, this is super complicated. It took me awhile. So if you don’t get it at first don’t give up, this took me a couple tries!
- The highlighted red is the color you want your background to be. That is the HTML number for the color grey, that’s the color I chose. You can customize this by finding a different color HTML here.
<a href=”YOUR IMAGE URL” style=”clear: left; float: left; margin-bottom: 1em; margin-right: 1em;”><img border=”0″ src=”YOUR IMAGE URL” width=”100″/>
- Note: If you copy/paste, say a synopsis from Goodreads, the background of the copy pasted text WILL be highlighted white. To remove this find this HTML code: <span style=”background-color: white;
- Do not delete this entire code, delete it so it will look like this: <span;
- There should be more than one of these so repeat that step over until they are all gone. Once they are gone it should look just like the second picture below.
- At the end, it should look like this. The picture at first will look small, but just click on the image and change the size, it should then be the size you actually want it to be.
Credit to Small Reviews for this great tutorial!