If you have a designed logo for your blog blogger.com, and if you want to add the logo in your blog header, there have a two options to do this, the first option is easy, you can upload the logo via blogger’s page header gadget in Layout section in blogger admin side, the second option is a little hard for you, if you don’t have an idea/knowledge in HTML and CSS.

If you don’t have an idea/knowledge in HTML and CSS, just choose first option, don’t hard yourself, but if want to learn HTML and CSS to get you blog to the next level customization. Check out this website http://www.w3schools.com/html/

Idea in HTML and CSS is advantage for your blog, you can customize your blog’s background color, font, div sidebar and many more and also for AdSense Ads is advantage too, can move the ads to left or right (float in css).

If you have an idea these html and css. Go in option 2, this option 2 may not goanna worked in your blogger template, this customization depends in css styles and div blocks, at lease you have an idea.

So let’s get started…

Option 1 : Upload logo in header widget

Step 1 :

Go Blogger Admin -> Layout -> and Page Header Gadget

Step 2 :

And after you upload your logo, choose the best option “Instead of the and description” and save.

Step 3 :

Preview

And know the logo has finally in your blog header.

Option 2 : Add html and css code

The option 2 is difficult if don’t idea in html/css, like I said this not might goanna work for your xml template, it’s depend of the styles, div blocks and etc.

As the part of my blogger tutorial series, i create to video on how to implement this code in test blog, titled “How to Add Logo in Blogger Blog Header (option 2)”, just watch if you want.

html

<div id='mylogo'>
	<a expr:href='data:blog.homepageUrl'><img src='http://f.cl.ly/items/2e1B3s1s32291s151B18/axlmulat_logo.png'/></a>
</div>

css

#mylogo {
	float: left;
	margin-right: 15px;
	width: 114px;
}
.site-brandingnbt {
	margin-top: 25px;
}

@media screen and (max-width: 960px) {
	#mylogo {
		float: none;
		margin: 0 auto;
		width: 57px;
	}
	.site-headernbt .site-brandingnbt {
		float: none;
		margin-top: 8px;
		text-align: center;
	}
}

So that’s it. That the way to add a logo in blog blogger.com, thank you for reading a watching my video tutorial in my YouTube channel, please recommend and share.