Skip to main content

How to Add Custom CSS in a Blogger Blog?

As the colorful wings make a caterpillar butterfly, you need to dress up your blog to make it look awesome. In designing world we define this dress as CSS or more complicatedly Cascading Style Sheets. If you want your blog to look like a beauty queen, you gotta CSSify it. Anyway as a starter you might face difficulties while adding css (I faced, everyone face). Hence this tutorial. So without any clutters let's directly talk about how to do it.
how-to-add-css-code-in-a-blogger-blog-cover


In this world, there are two ways to perform any task. One, the easy way (or the Lazy Way) and the hard way (some hard-working people do it). I prefer the first process. Why the heck would I waste and burn extra calories, when I'm getting the same result? Anyway let's head over to the steps.


First off, the Lazy Way:


If you're sort of lazy and want to save your calories for future usage, you must follow this procedure. At first go to your blog's dashboard and steer down to the template part. You should notice a small screenshot of your blog with Live on Blog written over it. Got it? Fine, now click on the orange Customise button below it. The screen-snap will help you out.


how-to-add-css-code-in-a-blogger-blog-template-snap

A new page should open, where you'll notice some extra bit of options. Now directly navigate down to the advanced tab. Can you see a box up there? Right, now put any CSS code in that box and press Apply to Blog at the top right corner. That's it; you've now successfully and lazily added custom CSS code to your blog.

how-to-add-css-code-in-a-blogger-blog-custom-css-tab


Now, the hard way:


Okay, if you think the life is full of hurdles and stuffs & you're at some stupid race of success, then you should probably follow these steps.


At first go to the template section and then click on Edit HTML right beside the Orange customise button (below the live view thumbnail of your blog). Now you'll find some innumerable bunch of crappy codes! Just click inside the box and press Ctrl+F and a tiny box will pop at the right top corner. Copy-paste this code in that box and hit enter.

]]></b:skin>

The code, now, should be highlighted in yellow color, got it? Fine, now put any css code above that line of phrase. Remember the CSS must be above ]]></b:skin>. See the screenshot below.

how-to-add-css-code-in-a-blogger-blog-edit-template-snap


As you can see in the snap, the CSS codes are pasted above the highlighted portion. Right? Okay, now click on Save Template. Wait a few moments until it gets saved and then head over to your blog to check whether the CSS addition was successful or not.

Putting All Bucks in Pocket:


Now you know how to add css codes in your blogger blog. If you face any problems while performing these tasks, comment below or you can knock me at Google+. Go ahead, it's your blog, make it awesome. Ceeyaa!

Cover pic credit: Geralt

Comments

  1. Landon Donovan7/18/2014

    This is great, Learned something today.

    Increase Conversion Rate

    ReplyDelete
  2. Custom Software Development De11/04/2014

    Custom
    software development
    specialists explore exactly what it is a
    company does - what the necessities of the company are on a day to day basis
    and what they need from their IT system in order to operate to their optimum.
    In order to perform efficient functionality, a company would ideally need its
    software to do exactly what they want it to.

    ReplyDelete

Post a Comment

Popular posts from this blog

How to hide any folder or files in android without any third party app?

Credit: Racchio H owdy! Finally the exams are over, and thanks to our holy goat it wasn't too bad you know! So I decided to stop wasting time with those shits and do my job, i.e. blogging. Today I'm gonna discuss the easiest way to hide folders or files in android. You may need to hide folders because of your nasty cousin or because of ultra-personal stuffs (you know what I mean). And the best part about the process is that you don't need any third party app. Sounds interesting, no? So alright let the mission begin. Cool Article: 5 Damn Awesome Android Launchers you can't Miss! Stuffs You're Gonna Need: A working android device. A File Manager (default). Few fingers to work with. A Goat (optional). F irst of all switch on your phone and unlock it (just kidding). N ow open your file manager. For this tutorial, I'm using the default file manager of my Galaxy Y (don't laugh, old is gold). N ext go to your file manager settings and loo

Powered by Blogger Attribution — How to Remove it From Your Blog?

Is that 3 word clutter making your blood boil? Then why u no remove it?  Last week I wrote a tutorial on removing the navigation bar in blogger blogs, which too, is nothing but a mess to your blog. In this post I'm gonna help you removing the 'Powered by Blogger' attribution from the footer section of your blog. In default templates and some of the custom templates, the attribution stay locked at a fixed position which is really infuriating. You can't move it, you can't delete and you go mad about that crap. Chillax, cool up your brain, and read this post. It's all up here. Now there a question comes that — Is it legal to remove the attribution from a blog? Because, it's kind of right of Blogger to place that stuff. Isn't it? Here's a way to deal with it. If you're using a custom template, then there must be a space in the footer to display the template maker's credits, right? In that space, beside the credits, you can place a link

Post Blank Status or Comment on Facebook!

H ello again everyone! Well, I'm writing a little bit much facebook tricks these days, though I wonder why.  However let's cut that off and begin. The crap that I'm gonna dictate to you today is a facebook trick to post blank status or comments (not bad, eh!). Updating a blank status may sometimes help you to get more likes than a normal boring quotation. Here we go. Cool Stuff: Trick to Post Animations on Facebook Easily! Updating Blank Status: T o update a blank status, Log In to Your Account. In the Status Update box type (hey don't be lazy, type it!) — @[0:0: ] and then post it. You copy-pasted it, huh? I knew you're gonna do it. :-\ However, you're done. The much likes you get, the much friends you recommend our site, okay? After you are done it should look like, Posting Blank Comments: P osting a blank comment is pretty much the same as creating a blank file or folder in windows. If you missed that article, catch it no