RSS2.0

Blogpowered
Showing posts with label Template Customization. Show all posts
Showing posts with label Template Customization. Show all posts

Bloggar Hacks: Get rid of uppercase headings



Blogger makes your post footer, blog footer, profile widget and header text turn out in uppercase letters by default. If you don't want this setting, there is simple solution for this.

This post is somewhat similar to my previous post about removing borders - How to remove borders.


1. Simply search for the line:

text-transform:uppercase;

2. Simply delete the line or you may want to change uppercase into lowercase if you want.

Blogger Hacks:How to hide the Blogger Nav Bar



Are you bothered when you and other people open your blog and see blogger navigation bar on your site? There is a way of hiding or removing it. I don't know if it is legal because
it's like removing a copyright without permission. Do this at your own risk.


Removing the Navbar:

1. Go to edit HTML under Layout tab.

2. Search for the tag </b:skin>

3. And before this tag. Paste the following code
.



Blogger Hacks: Putting background image for you blog

Applying a background image is a simple and quick customization which can apply volumes to the style of your fixed width blog.

For my demonstration template, I decided to use a blue patterned background image which blends well with the colors in the header.
There is a wonderful selection of patterned background images available for free download at SquidFingers (in fact, this selection is among the best I've ever seen!); though a Google search for tileable background images will bring you some alternative downloads to try.



*Choose your background image

The first step to using a background image for your blog is to find one which you like. I chose this pattern from Squidfingers, though you could choose any image you prefer. You will need to save the background image to your computer as we will be using this very soon.

*Upload your image to the web
In order to use a background image for your blog, you will need to upload this somewhere online. One method is to upload this to Photobucket, or a similar free image hosting service. But here is a trick to help you host your images with Blogger for free!
Simply create a new post and upload your image as normal. But don't publish the post, just save this as a draft which you can delete later.
Now preview your draft post. You should see your image displayed in the preview page. Right click this image and view the properties. From here, you should be able to extract the URL of where this image is hosted. Copy this URL to your clipboard or Notepad so you can use this to reference your background image in the template's HTML code. Now you can safely delete this draft. Choose NOT to delete the image when prompted, otherwise you will be unable to use this URL for referencing your background image.
Alternatively if you choose to upload your background image to Photobucket (or similar hosting service), ensure you have copied the URL of your image.

Adding the background to your template code
We will now need to edit a small part of your template's HTML code to add this image to the background. So go to Template>Edit HTML in your blogger dashboard, and look for the following lines:

body {
background: $bgcolor;


We need to add the URL of your background image to the "background" statement using the following format:


url(the_url_of_your_image )


The addtional code should appear like this:

body { background:$bgcolor
url(http://bp0.blogger.com/_xn2gmPb9TfM/R4TGdeDdP4I/AAAAA
AAAArY/RP5IQy-eABA/s1600-h/pattern_140.gif);



Of course your own URL will be different. Just be sure to follow the same format, and ensure that the semi-colon (;) appears at the end of the statement. Now preview your blog to see the changes. It may look something like this:








If you are happy with the background, you can then save your template for us to go on to the next step. However, if you prefer not to use this, you can simply click the "clear edits" button and start over again. Now in my demonstration template, you will notice that the text is barely visible against
the patterned background. This leads me to the final customization of this tutorial: changing the background color of the main blog content.

Source:ebook-guide to blogging by Amanda Zafani(www.bloggerbuster.com)