Friday, June 29, 2012

How to Remove or Change the Blog Title Border in Blogger (Blogspot)

In this Blogger tutorial I discuss how to change the blog title border color or remove the border in a Blogger template (Blogspot template) by changing either the CSS styling of the border manually or by using the Blogger Template Designer feature.

Lots of bloggers have updated their Blogger template to the new default series of Blogger templates for 2010. There are however many of you who are still using the default Minima template from 2006 (and there are lots of good reasons to do so) so this tutorial is for you and anyone else who is using a custom Blogger template based on Minima.

Remove or Change the Blog Title Border in Blogger (Blogspot)
There are two simple ways to remove the border around the blog title in Blogger. We are going to hide the border rather than actually remove the code that creates it by making the border color transparent. I will also show you how to change the border color.

Method 1 discusses how to do this using the Blogger Template Designer while Method 2 describes how to change the blog title border manually by changing the code.



Method 1 - Using Blogger Template Designer
  1. Log in to Blogger
  2. From the Dashboard go to Design > Template Designer
  3. Go to Templates > Advanced > Border Color

  4. Choose the down arrow color picker to activate the color palette window
  5. Choose transparent which is below the color palette to remove the border around the blog title completely. You now will see the blog title border disappear. Or choose a new color from the color palette to change the color

    Remove Blog Title Border in Blogger
    Remove Blog Title Border

    Change Blog Title Border Color in Blogger
    Change Blog Title Border Color
  6. Click on Apply to Blog to save your changes


Method 2
If the Blogger Template Designer is not working on your template for some reason you can tweak the code in your template to remove the border around the blog title

  1. Log in to Blogger
  2. From the Dashboard go to Design > Edit HTML
  3. Back up your Blogger template
  4. Find the border color variable which will be near the top of the template code

  5. Change the border color value to transparent to remove the border altogether so that your code now looks like this:

    type="color" default="#ccc" value="transparent">

    or change the value to a color of your choice eg

    type="color" default="#ccc" value="#ff7f00">
  6. Save your template and view your blog to see that the border around the blog title has been removed or changed color

    Remove Blog Title Border CSS Styling in Blogger


Tips and Troubleshooting
Below are some tips to help you further customize the blog title border width. You can either remove the inner border, thicken the outer border or thicken both borders around the blog title in Blogger.

  1. To change the width of the border around the blog title in Minima change the following:

    #header {
    margin: 5px;
    border: 1px solid $bordercolor;
    text-align: center;
    color:$pagetitlecolor;
    }

    to

    #header {
    margin: 5px;
    border: 10px solid $bordercolor;
    text-align: center;
    color:$pagetitlecolor;
    }

    This code increases the border width from 1px to 10px
  2. To remove the inner border around the blog title in Minima change the code to the following:

    #header {
    margin: 5px;
    border: 10px solid $bordercolor; (remove this line)
    text-align: center;
    color:$pagetitlecolor;
    }
  3. To increase the width of the outer border around the blog title in Minima change this code

    #header-wrapper {
    width:660px;
    margin:0 auto 10px;
    border:10px solid $bordercolor;
    }

In this Blogger tutorial you have learned two methods to change the color of the border around a blog title in Blogger blog (Blogspot blog). I have also shown you how to increase the size of the border width. This tutorial applies particularly to the default Blogger template Minima but also is relevant for any blogger using a custom Blogger template based on Minima. Good luck!


    Random Posts...!!!

  • AdWords Keyword Tool - login to get the best
    AdWords Keyword Tool - login to get the best
    10/05/2012 - 0 Comments

    Choosing the best key phrases that match your clients needs may be the goal associated with any Ad Terms or…

  • 50 great Google Secrets and Tricks
    50 great Google Secrets and Tricks
    09/09/2013 - 0 Comments

    Amazing Google Secrets, tricks and amazing facts I found all over the Internet. Just for you guyz!! Hidden…

  • The way to produce a Competitive Advantage for your Blog
    The way to produce a Competitive Advantage for your Blog
    10/06/2012 - 0 Comments

    Every single blog should devote itself to produce a sustainable edge so that you can produce a competitive…

  • Blog SEO tags Nofollow Labels - save your blog from SPAM
    Blog SEO tags Nofollow Labels - save your blog from SPAM
    04/02/2012 - 0 Comments

    Blogger Label Links effect your blog or site Page Rank in a negative way and that's a fact. Why follow…

  • How to Add Custom Robots Tags in Blogger
    How to Add Custom Robots Tags in Blogger
    19/08/2013 - 0 Comments

    How to Add custom Robots Tags in Blogger:- Today I am going to teach you a special SEO related Tutorial…

  • Blogger Post Image Borders Change or Remove
    Blogger Post Image Borders Change or Remove
    01/07/2012 - 0 Comments

    Sometimes you may want to remove, delete or change the image border of a custom Blogger template or default…

  • How to Dodge Blogging Mistakes
    How to Dodge Blogging Mistakes
    15/08/2012 - 0 Comments

    Gone are the days, when people used to take blogging for granted (if this has ever happened!). Blogging is…

  • Blogging And Email Marketing A New Approach
    Blogging And Email Marketing A New Approach
    27/08/2012 - 0 Comments

    Email marketing is powerful because it allows you to develop personal relationships with your blog readers.…

If You Enjoyed This Post Please Take 5 Seconds To Share It!

1 comments:

Template Design said...

Thanks for creating this great informational resource.

Post a Comment

Please feel free to comment on this topic.

horizontal random post

    Random Posts...!!!

  • 7 Tips for Google Adsense Approval
    7 Tips for Google Adsense Approval
    18/09/2013 - 0 Comments

    Google AdSense is the best site for earn moeny and PPC (Paid Per Click) network which is being used by…

  • Why Free Email Marketing is a Great Option for Small Businesses?
    Why Free Email Marketing is a Great Option for Small Businesses?
    11/06/2012 - 1 Comments

    To say that business conditions these days are less than ideal across the board would be a great…

  • How to Create Short URLs For Your Blog Using Google Shortener
    How to Create Short URLs For Your Blog Using Google Shortener
    14/09/2013 - 1 Comments

    With the rise in the social media, i am continuously seeing people are giving more significance to branding.…

  • How to Add a Comments Counter Button to Blogger Blogspot
    How to Add a Comments Counter Button to Blogger Blogspot
    27/06/2012 - 1 Comments

    In this Blogger tutorial (Blogspot tutorial) you will learn how to add a comments counter button to Blogger…

  • Facebook Essential SEO: The Leading Social Network
    Facebook Essential SEO: The Leading Social Network
    22/09/2012 - 1 Comments

    Now these days social media is an important part of search engine optimization and due to huge popularity…

  • 10 Advanced Comment Tricks for Better SEO
    10 Advanced Comment Tricks for Better SEO
    10/10/2013 - 0 Comments

    Many people can come up with some form of advice about SEO, but very few people give you advice about how to…

  • Learn How to Add a Flickr Slideshow Gadget to Blogger
    Learn How to Add a Flickr Slideshow Gadget to Blogger
    28/06/2012 - 0 Comments

    I am going to show you how to add a Flickr Slideshow (Flickr Photostream) to a Blogger blog (Blogspot blog).…

  • How to Add Profile Images to Blogger Comments
    How to Add Profile Images to Blogger Comments
    03/07/2012 - 0 Comments

    Today I will show you how easy it is to have Blogger (Blogspot) display profile images in the embedded…