Customize Blogger Template

How to Remove blogger Description Header Title space, Navbar
Customize Blogger Template: How to Remove anything from blogger, Description Header Title space, Navbar, How to hide or remove Powered by Blogger Attribution Gadget?

How to remove blogger Attribution widget?

Go to Gadget change locked=’true’ to locked=’false’  then visit layout page and blogger attribution page you have the new option called remove you can remove that.


Add this using blogger customization tool>>Advanced >> Add css (best way to add css to blogger>



removing blogger attribution from mobile template

<b:widget id=’Attribution1′ locked=’true’ mobile=’no’ title=” type=’Attribution’>

just add mobile no tag.

To remove quick pencil and wrench / quick edit widget icon visit Blogger SEO Tips

How to remove locked gadget from the blogger?

a process as same as removing Attribution gadget 

How to Remove Navbar in blogger / BlogSpot?

Today I am gonna show you How to Remove blogger Description Header Title space, Navbar?
Method 1

First check navbar removing part

1 log in to blogger dashboard
2 Go layout
3.Click on Navbar
4. Turn off

The disadvantage is Not removed space of Navbar but Hides.

Method 2 remove navbar and save space above header.

1. Go template click on >>Customize>>and Then Choose>>Advanced> and then scroll down
for >>css>>
And The Below Piece of code to your blog CSS
#navbar {
      height: 0px;
      visibility: hidden;
      display: none;

See your blog navbar removes completely.

Look at remove header /anything from a mobile template.

To hide blogger Home page title

simply add this  #header { display:none; to advanced CSS menu in blogger template customization settings.


How to Remove/ Hide description in blogger

A simple way to hide page title/name and description in blogger

To hide blogger blog spot title and description we need to add  display: none; syntax above h1 header and h2 meta description.

for this we need to edit template search for

search for below code
.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
 and add  display: none; after above code to delete blog title.
To hide blog description
 search for below code
.Header .description {
  font: $(description.font);
  color: $(description.text.color);
 and add  display: none;  after above code to delete blog description
 step 5: click on save the template.

Method 2 by adding CSS code

after the upgraded blogger we have facility edit CSS directly

by Dashboard>> Template>> Customize [Not edit HTML]

After that click on Advanced.

5. Then Click on Add CSS.
6. Paste the following CSS Code in CSS box.

7. Finally, Click on “Apply to Blog

1.For Title

#header h1 { display:none;

2. For Description

#header .description { display:none;


Removing / Hiding Description and Title

here I already hid title before this let us look at the description.
I am going add just piece of this code blog spot CSS

#header .description { display:none;

Removing Extra space or delete header space extra side by side
top to bottom also done by below code

/- Removing Extra Space - Above Header Box*/
{margin-top: -40px !important; 

/ Removing Extra Space - Left and Right Margin*/

margin-left: 0px !important;
margin-right:0px !important;

/ Removing Extra Space - Header Top and Bottom Margin*/

.Header h1
margin-top: -20px !important;
margin-bottom:-20px !important;

/ Removing Extra Space - Setting Padding*/

.header-inner .Header .titlewrapper 
padding: 0px 20px;
/ Removing Extra Space - Around Description*/
.header-inner .Header .descriptionwrapper 
padding: 0 30px;

/*Tauseef - Removing Extra Space - Around Description*/

#header .description { display:none;

This code only removes extra space around your theme

 To delete extra header space above blog spot?

for deleting extra space

you have to edit Template and Then Find by pressing CTRL+F </head> tag place 
below code above that tag
<style type=’text/css’>

margin-top: -60px !important; 
This code
Adjust width in pixel to fit your template 60-80. or more.

check blogger SEO tutorials  and Floating social share icons to the Blogspot.

Also check insert Adsense below Post title and middle also in blogger without parsing and without violating Adsense TOS.

blogger mobile template customization

 To enable Adsense Ads on blogger mobile site, you have to add at least 1 ad by blogger platform (Not direct code).

Hide title on  blogger mobile template

Three properties can use to control how widget operates, and the properties include.

  1. mobile=”no” disable gadget on mobile
  2. mobile=”yes” we don’t need to add this because all gadgets already apply for the mobile version.
  3. mobile=”only” only enable some gadget as HTML javascript or anything mobile then use this.
I want to hide my header title and description  because it’s appearing very large in mobile version instead of AdSense ads.
if you want to know about enable AdSense ads on mobile version look at blogger Adsense page.
How to Hide blogger title and description on mobile?
  1. Go Blogger Dashboard
  2. Check Template and Edit not customize.
  3. In blogger, editor menu goes to gadgets direct option is there instead of searching.
  4. choose header that looks like 
<b:widget id=’Header’ locked=’false’  title=” type=’Header’/>
<b:widget id=’Header’ locked=’false’ mobile=”no” title=” type=’Header’/>
You can use 3 options mentioned above.

hide comments on blogger on the mobile version of a blog

Allow / Disallow comments gadgets on mobile template
removing Powered by blogger footer link on mobile template Not possible for me. I have lost Adsense ads on mobile templates. 40% of the traffic got by mobile. but there is no Ads. we have to think about Improving Adsense earnings on mobile devices.
If any changes failed you can revert to template default, also take the backup before doing any changes.