Friday, 2 February 2018

Blogger CSS Tricks


DON'T WORRY THAT PICTURE IS NO INDICATION OF WHAT I'M GONNA TELL YOU. Because frankly that's terrifying.

I literally freak out whenever I see the words "HTML template". It strikes terror into my very bones. But CSS is easier cos you just get to add it to your Customized Template without risking blog failure. It's easier to undo, if you will.
Today I'm sharing some very simple CSS tricks and codes that I've used to (hopefully) improve my blog. I'm sure most of you will already know the majority of them, and yes you can easily google them yourselves, but I thought I'd do this post anyway just in case you were interested. The tricks will probably seem so obvious and simplistic to you and yes I should stop apologising now but WHATEVER. Here they are in case you're interested!


{Disclaimer: I am not very knowledgeable about HTML or CSS. Apologises if I accidentally use the wrong terminology, etc, in this post ;)}


(These will only work for Blogger blogs)


Link in text 
You know how I usually leave my "Amy @ A Magical World Of Words" whenever I comment on your blog? And my link's in the words? Here's what I do:


<a href="LINK HERE">TEXT HERE</a> 


Whenever I want to include a link in text when I comment, I paste the above code in the comment. All you do is fill in what you want the text to say, and then put the link in. Ta da!

(Oh, and I keep a copy of this code in a draft Blogger post so I can just copy and paste it every time).


Blockquote 
Want to have a colour background behind some words in a blog post? Use the below code by pasting it into the HTML section of your draft post, and filling in the words you want: (And you can obviously change the colour code depending on the colour you want).

<blockquote style="background-color: #F5EDF1;">TEXT HERE</blockquote>


Navbar colour
You see how the navbar at the top of my blog is pink? You can do that too. Simply go to Layout-Navbar-change the option to Transparent, and then add the following code to the CSS section of your Customised Template, changing the colour code accordingly:

#navbar-iframe{background-color:#b61364;}


Sidebar gadgets titles colour background
As you can see in my blog sidebars, my gadget headings have colour backgrounds. If you want the same, paste the following code into the CSS section of your Customised Template (and change the colour code accordingly):

.sidebar .widget h2 {
 line-height:2em;
 background:#B61364;
 }


Post underlined
I have a dividing colour line between the posts on my homepage. If you also want one, paste the following code into the CSS section of your Customised Template, changing the colour and size accordingly:

.post { border-bottom: 5px solid #B61364; padding-bottom: 10px; margin:  10px 0px  10px 0px;}


Blog background cover whole blog
If you have an image you want to be the background of your whole blog but it won't to fit the entire space, paste the following code into the CSS section of your Customised Template:

body {
background-size: cover;
}



Quick Note: 

This is probably glaringly obvious, but I'm saying it anyway. When you add these codes - or any codes - to the CSS section of your Customised Template, always press enter afterwards. That puts the codes into effect. If you ever had a brain freeze moment like I *cough* *cough"* did when I first started blogging, that's just a helpful tip :) 





I hope you found this post helpful, and if you have any questions or queries, please feel free to ask in the comments! 
And if you know of any other CSS tricks I haven't mentioned, please share them below :)

No comments:

Post a Comment

I cannot even begin to say how much I appreciate your comments. THANK YOU for taking the time to say a quick hello or comment on my review/post. I appreciate every single word from you. Xx
I reply to EVERY comment I receive. Because I'm using the Blogger comment system, you won't know I've replied unless you check back to the original post. But just know....I will always reply to you :)