Home
HTML/CSS
Link 1
Sublinks >>>
jQuery/JS
PHP
MySQL
XSLT
How To Add CSS In Blogger – Understanding CSS In Blogger
Looking through tutorials I’ve covered so far, I realized
that I missed a fundamental one.
Where do we even put the CSS?
If you’ve never ventured into your template or WordPress
editor, you may have no idea where it is. Usually I give a little bit of
instruction for this in tutorials. Today though, I want to go deeper and show
you different options available for Blogger and WordPress. Adding CSS for
WordPress and Blogger is a fairly easy process, especially with the different
options available for each.
If not knowing where the CSS should go ever held you back
from following a tutorial before, hopefully this will help clear your worries
and set you on the path to customizing your own theme.
If you want to add some cool effects to your blog like snow
fall, 3D fonts, neon texts, box shadows or you want to take your blog’s design
to the next level, then all you need is to insert few lines of custom CSS to
your blog. CSS, what is it? CSS is known as Cascading Style Sheet which
in simple used to describe the look and feel of your blog or in other words it
is used to define how HTML elements should be displayed. Before you learn about
CSS it is better to know about HTML. There are tons of resources on CSS and
even a beginner can easily understand the basic elements of CSS, but mastering
it will take lots of time and practical knowledge.
CSS plays a most important role in beautifying elements and
all Blogger templates by default will have their own CSS code. At any time if
you wish to further beautify your blog’s design then you can add some custom
CSS. In few of our blogger tutorials we have mentioned our visitors to add CSS
codes for example take a Look At This Article, but most of the beginners do
not know where to add the CSS. Most of them simply open up their template
files, find out the b:skin tags and in some way finally mess up their
template codes. Blogger allows you to add your own custom CSS in template
designer which overrides the default CSS code in order to achieve the appealing
look for your blog. Here we will show you how to insert / add CSS in Blogger.
Adding CSS To Blogger
The Blogger platform offers us Two Options for adding in our
CSS coding. You can add it in as part of your blogger template or you can add it in
separate from the template.
So which one is right for you?
Well, adding CSS separate from the template is a great option
if you have custom CSS you want to keep, even when you switch your template for
a different one. Maybe you have gadget CSS that you don’t want to lose track of
when you switch to a different premade theme. The nice thing about having your
own custom CSS separate from the theme’s CSS is that it is easy to find when
you need it and easy to pull out when you want to switch templates.
Adding the CSS to the blogger template will keep all you CSS
together and allow you better visibility into the CSS that is already there.
You may be trying to add CSS through the separate option, but it doesn’t work
because there is CSS in your template that is overriding it. I like having all
of my CSS in one place and going into the Blogger template really isn’t that
scary.
First Option
1. Login to your blogger account.2. Select desired blog where you want to add CSS coding.
3. Now click on "template" and then on "customise" as you can see in below image.
5. Now you can add your desired CSS coding to the blogger.
6. After adding CSS, click on "Apply to Blog" to make changes to your blog. See the image below.
Second Option
The second option is to go into your template code and add
the CSS there. To find it, click the Edit HTML button on the Template tab in
Blogger. From there you will see this screen.
2. Now you will see the Blogger template designer page with 5
some options
Before you add CSS you have to write CSS and before you can
write the CSS style code you have to find the selectors for which you wish to
change the style. You can make use of your browsers developer’s tools to
inspect the element, here we are not going detail about that. For example you
know about h1, h2, h3, h4, h5 and h6 tags in general and to modify those fonts
you can add CSS like this below.
h1 {
|
h1 {
font-family: "Times New Roman",
Times, serif;
font-size: 15px;
font-weight: bold;
color: rgb (56, 77, 187)
}
|
But what will you do for changing the page layout, menu tab
style, links, font family, alignment, background or text color when you don’t
know the element class. This is where you have to make use of your browsers
developers’ tool. Just right click on an element and then click on inspect
element where you will see the elements to your left and CSS to your right.
Alter the CSS code and see how the changes results, for instance here is the
CSS code for menu tab which you will find it different on your template.
|
.tabs-inner .widget li a:hover {
color: #fff;
background-color: #FF9900;
text-decoration: underline;
display: inline-block;
padding: .6em 1em;
font: normal normal 15px 'Trebuchet MS',
Trebuchet, Verdana, sans-serif;
border-left: 1px solid #ffffff;
border-right: 1px solid #dddddd;
}
|
By using the inspect element tool you can preview the CSS
changes for any element and when you get the desired look grab the CSS code and
execute it in your blog.
Applying CSS In Blogger
There are two ways to implement CSS in Blogger one is by
editing the template files directly and the other easiest method is to use the
add CSS option in Blogger template designer.
Add CSS Using Blogger Template Designer
Adding CSS here is the easiest and safest way as it does not
affects your core template files. Other than adding custom CSS, Blogger
template designer allows you to easily change your blog background, adjusting
the width, layout, font styles, colors, gadget area, footer content etc.
1. Login to your Blogger blog, go to Templates and then click
on customize.
3. Click on Advanced option, scroll the sub items down and then
choose Add CSS.
4. Next you will see a field to your right side and this is
where you have to add your custom CSS.
Add the custom CSS code above; see the changes below and
when everything is done click on “Apply to Blog” at the top.
Adding CSS By Editing Your Blogger Template
The other way to apply CSS is by directly editing the core CSS or adding a custom CSS in to your template file. We do not suggest this method for beginners because improper use may lead to break your template. So before adding CSS using this method make sure to backup; here is How To Backup And Restore Blogger Template.
1. In your Blogger dashboard, go to Template and then click on
edit HTML.
2. Now you will see your template codes, just press CTRL + F to
search and then search for <b:skin>
3. Expand the <b:skin> and you will see the CSS for your
blog template appears.
Also CHeck Out Below Article!
Start editing the existing CSS or you can add your custom
CSS, but in here you don’t get the preview option which you get in Blogger
template designer. Finally save your template when done.
I can hope this article guided you on how to add CSS in Blogger. Start
beautifying your blog and to get more such updates subscribe to our RSS feeds.
Share On
Hey this blog is great, keep up the good work!
ReplyDeleteBookstores / Sham
Thanks for sharing this valuable post its very informative and very helpful apart from that if anyone looking for e accounting institute in delhi so Contact Here-+91-9311002620 Or Visit Website- https://www.htsindia.com/Courses/Tally/e-accounting-training-course
ReplyDelete