Monday, June 18, 2012

How to remove gradient from the blogger blog's tab bar ?

       
         After a short break,i was redesigning one of my blog which was hosted on blogspot.com.So when i selected a particular template i found out that some how the tab bar color is now having a white gradient across it.And i tried every options in the customize template section to remove it.None of them worked.
           Then i started google searching i found many pages which contained my keywords in google's different discuss forums.But when i click on those search results it goes to the home page of that forum.Its like google never knew what i was searching for.And none of the search forum's search bars works properly.Lets accept it,the search giant want to increase the traffic rate only to it's forum's home pages(for some unknown reason!!) and redirects you to it when you click on the search result link thinking you found the solution for your problem.

           After 20 minutes trusting in google's search ability i couldn't find any solution.So i randomly clicked through pages from number 15 and found the solution.Sorry for the long introduction.Let's get into the business.

   I know many of you are searching for the problem and are not able to find the solution.So here it is in the simplest(is there a word like that??!!) way ..I have added some screenshots so it can be more easier for you to understand.

Below is a sample how my tab bar looked like with the gradient.


Now lets see how to solve this problem.First go to your blogger dash board and click on the 'template' button.Then click on Customize button.(Check the picture below)


You will reach the customization page.Click on the 'Advanced' section then scroll down next column and select the last option 'Add CSS'.On the right side you will find a blank white box(Check the picture below)

Click on the pic to see it in large size


Then type the below script there. 

<style type="text/css">
body {}
.tabs-inner .widget ul {background:#000000;}
</style>

         Now '#000000' is the html color code of black.I wanted black so i typed this.Now you might ask what if you need a different color? Wel,then you have to replace '#000000' with the color code of your choice.Now how can you find out the color code of your choice of color?.

      Well there is a place where you can find html color codes.Click on that link and you will land on a page wchich contains a huge list.Or else if you have software like adobe photoshop,open it then click on the color selection .You will get a window just like the below picture.


        If you notice you can see that the selected color is black and you can see the color code is shown at the bottom(Rounded in red).Select whatever color you want,note the color code replace #000000 with that code click apply to blog on top right .Then you are done.

Here is my fully black tab bar after i edited.


Please let me know if this post solved your problem.

Update : Check out the comment section too..


11 comments:

  1. Hi there. Thank you for this post, but I'm afraid I can't make that CSS work for me. Yes, it works find in your demo, but there is still a gradient present. You just don't see it because you've made the background behind the tabs black, and so the tabs themselves can't be made any darker.
    At least that's how it seems to me.
    I found your page whilst trying to get a completely different colour tab to the tab background itself, but still can't find the right html to over-ride the gradient command.
    My dummy test blog is at http://derbyperegrinessandbox.blogspot.co.uk
    I'm trying to get the Blog's Outer Background AND the Tab's Background Colour an identical bluish/green (#134f5c), whilst having the non-selected tab completely different, say mustard (#f1c232).
    I don't know enough html to build the code from scratch, but can assess the template html just about well enough to see that there is no variable name command to directly control the tab colour. The offending bit if code in my blogger template which is causing the gracient seems to be :

    Variable name="tab.background" description="Tab Background" type="background"
    default="transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left" value="transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left"/>

    I'll keep on plugging away and let you know if I can find a solution. It must be simple if only I knew something enough html!

    ReplyDelete
    Replies
    1. Hey Nick,if you check out my current tab bar color,you can see that it's kind of blue now.And i'm not an html master.I posted this idea in my blog,only because i couldn't find any pages about changing or removing this gradient color in the internet.I thought my post might be a help to people who are searching for it.Then after reading some codes and some other pages about designing blogs,i figured this out.
      It works just fine for me.Even in the blue color there is a slight black shadow at the bottom.That's fine for me.But before applying that CSS code my main problem was the white color spreading to whatever tab color i was selecting.I was able to solve that problem through that CSS code.
      Try to google about html codes.You might find a page where you can request for codes.

      Delete
  2. I guess how the gradient looks will depend on which blogger template you start with.
    I was using Josh Peterson's standard Picture Window template with the picture removed to get a simple layout with rounded tabs linked to static pages at the top. I wanted the colour behind all the tabs to be the same as the Outer Background to my blog. I wanted to choose the actual tab colour myself, and not to have it a gradient darkening from my Tab Background colour.

    These tabs also had a gradient in the code. I couldn't get your method to work on my template, but a bit if trial end error solved the problem.

    Rather than go to "Customise" as instructed above, go to "Edit HTML" and "Proceed" to avoid going back to the Template Designer.
    Use Find to go look for "tab.background"
    You'll need to change the "type" from "background" to "color" and change the default and value urls to a hex colour of your choice.

    Original html:

    Variable name="tab.background" description="Tab Background" type="background"
    default="transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left" value="transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left"/>


    New html (giving me a mustard-coloured tab):

    Variable name="tab.background" description="Tab Background" type="color"
    default="#f1c232" value="#f1c232"/>

    Note: to get this post to display here I have removed the chevron from in front of the word Variable in both examples. You will need to put it back in, of course.

    See the results under test here: http://derbyperegrinessandbox.blogspot.co.uk

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  3. Thank you for that info Nick,that will be more helpful to future visitors.And hey i loved your blog design.And an interesting topic too.Once again thank you for the updated info.
    :)
    Keep visiting

    ReplyDelete
  4. Your post did exactly what you wanted. It gave me a lead and it got results with my second posting. So I hope my solution is of use to others, too.

    Thanks for your comment on the redesign of my blog. The real one, with live nest webcameras (which I did back in 2006) is here. http://derbyperegrines.blogspot.co.uk

    ReplyDelete
  5. I have tried both Nick's as well as the author's suggestions. Both works but the gradient still appear at both sides of my blog. You can see it here: pinkydiamonds.com

    May I ask if there's a way to remove the excess 'gradient tab'?

    ReplyDelete
    Replies
    1. I don't understand!!!...Both works but the gradient still appears???

      Delete
  6. Thanks a lot :) I was searching for this and finally got it :) great work :)

    ReplyDelete

Google Basic tips money Web Traffic Google Adsense Blog monetization. earn money online make money blogging AdSense monthly revenue Advertising PayPal Free Beginners Website blog CPM Free giveaway change on the site Nokia Search engine optimization announcement publisher Ad types Advertising network Blogger India Pay per click Promotion Search Engines WordPress YouTube keywords. offtopic Adfly Amazon Amazon.com CPC CTR ContextWeb Cost per mille FAQs Help and Tutorials How to Marketing and Advertising Microsoft Windows Mobile phone Nokia Android phone. Nokia Asha Nokia Normandy Other Payment Systems PageRank Quick money Search Engine Sponsored Post Video download e-book google adsense alternative linkbucks new page ranking policy change search terms AdWords AskPrice Banner links Blogger.com Business Christmas Clickthrough rate Comment Spam Directories Google Chrome Graphics Holidays Nokia X Nokia X+ Nokia XL Online advertising PTC Paid To Click Social network Social networking service Spam Topline Traffic exchange Web directory Web page WhatsApp in Nokia Whatsapp Whatsapp installation ad unit advertiser affiliated programs google adword profit pulsepoint website traffic 100$ 3500 channels Ad-it Affiliate marketing Akismet Alexa Alexa Internet Amazon Instant Video Amazon MP3 Android Android Kitkat. Smartphones Android Lollypop Anonymous comments Antivirus Apple Ban (law) Bollywood Browsers CAPTCHA Cameraphones Chitika Christmas and holiday season Click fraud ClickBank Clip art Computer wallpaper Cost per action Court order Customer service DNS Changer Dangerous Ishq disaster Desktop Customization Domain Name System Dual Sim phone E-mail spam Email Facebook Ferrari Firefox Flipkart Funny Google Page Ranking HTML HubPages Humour Hyperlink IOS IPad IPhone InText Infolinks Internet access Internet forum Internet service provider Internet television JSS Tripler January earnings drop Lumia Lumia 1020 Lumia 920 Lyrics MCW 2014 MP3 MWC Malware March Market Research Microsoft Mobile Computing Moderation system Neobux New Year No monthly subscription fee No spam Nokia Asha 200 Nokia Lumia Paid survey Paypal cheat Paypal hoax Paypal money multiplier. Paypal scam Pop-up ad Product Product Links RPM Reliance Entertainment Reliance crap Entertainment Ltd Renting Ringtone Rules S40 Satellite television Screensaver Search Security ShoutMeLoud Social media Spam folder Spam in blogs Spambot Supreme Court Symbian 40 Tikona Digital Networks Traffic Swarm Twitter Unique user Uploading and downloading Vimeo Vimeo.com banned Wallpaper Watch TV online Web banner Web search engine Widgets Yes advertising ad sizes banned blocked blog directories. click fraud. compaint contest copyright infringement copyrights free custmoze blog fraud free actress wallpaper free wallpaper guitar iPad Pete intext ads isp leaked link shortener. media player music track pageview prelaunch. rock royalty free shrink url sign up thanksgiving trial windowsphones