post large images and photos in your Blogger blogspot?

Using the standard "Add Image" button in Blogger's text editor, you can only post photos or images with limited size, even if you choose the "Large Image" option.

Check out this test blog to see how the image fills up the entire post area. If you use the Blogger's Add Image button, the largest image you can post will be much smaller than this.


Follow these instructions to post large photos or images in your blog:

• Store your photos in an online image hosting service. I would suggest the free Photobucket powered by Google.
  
• Copy the direct link to the photo you want to post. In Photobucket, the direct link to your photo is located in the "Direct Link - Layout Pages" tab below your photo.
  
• In your Blogger Create Post panel, click the Edit HTML in the text editor.
• To post the photo or image, type the code below in the Blogger text Editor:

click here

• Change PhotoURL to the actual URL (the direct link) of the photo you want to post.
• Set the width and height of your photos appropriately. If you want it to be the actual size, simply delete the red part. If you just want to set the width and let the height changes accordingly to scale, simply set the width only, not the height.

How to Change Background Opacity?

You can change the Blogger template opacity/transparency level easily by changing a few numbers in the code. Here's how to do it:

Click on the Layout: Edit HTML tab. Then, search for the code below:

#content-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 3px 3px;
width: 805px;
position: relative;
text-align: left;
background: $blogbgColor;
border-right: 1px solid $blogBorderColor;
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
}

Change the transparency level by changing the numbers highlighted in red. Vary the numbers between 0 to 100 for the line 1, or 0 to 1.0 for the lines 2 and 3. All the numbers must be at the same level, for example 75 for line 1 is equal to 0.75 for lines 2 and 3. The lower the number, the more transparent your blog is. If you don't want it to be transparent, set the values to 100, or 1.0.

How to Add the Language Translator Buttons?

Here's the code you can add to create the flag buttons (above) to translate your blog into different languages, depending on which country flag the visitors click. Simply copy all the code below and paste them into a widget (aka a Page Element) and all the 9 flag buttons will appear.




click here to get the code


How to Add the Technorati Favorites Button?

Here's a few codes that you can implement to add the 'Add This Blog to My Technorati Favorites' button to your blog. The purpose for this button is to let your visitor s have an easier option to add your blog to their list of Technorati favorite blogs. This increases your blog popularity in Technorati listing.

I'll put down 3 codes for you to choose from, each with a different Technorati Fav buttons. Don't forget to change yourblogname.com to your own blog's URL.

Button 1:






Button 2:
The Technorati image is rounder for this button.





Button 3:

How to add META tags into your blog?

Do you want to improve your blog value, get more hits, and ranked high on search engines? Then you must optimize how your blog is indexed in a search engine.

While there are lots of factors involved in building quality blogs that can draw huge traffic in, having simple things right in the beginning is as important. One of this simple thing is getting your blog indexed properly with the right description & keywords to optimize search engine rankings (known as Search Engine Optimization or SEO).

To get information, search engines use automated software agents called spiders, crawlers, robots, or bots to collect the a few words from a site or blog (typically the URLs, blog name, and blog description, and maybe some words in the early part of sentences or paragraphs) that will later be used as keywords to index the blog.

Because you cannot be certain which words are taken as keywords pertaining to your blog, it's most likely that your blog won't be indexed properly in search engines - in the worst case, your highly relevant keywords might not even be used to index your blog. When this happen, searches on keywords relevant to your blog may have your blog buried at the far end of the list of thousands and millions of pages. What a waste!

To have a control of what is read by crawlers on your blog to be indexed, you have to build what is called a META tag - basically a bunch of words that makes up the most relevant description and keywords of your blog. If the META tag exist, this is what the crawlers will read and index and get displayed on any searches related to your keywords.

Here's what a search on my blog looks like on Google. The description is exactly the one I have written in the META tag. The 1st search on the list shows the new META tag description that was made a few seconds before the snap. The old META tag is shown beneath it (22 hours ago).


There are basically 2 parts to a META tag: first is the META description and second is the META keywords. The description are what appears on a search. As you can see, if the description is too long, it'll be cropped as search engines only uses a few lines to describe the blog. An optimum number of characters to use for META description is 150 (including spaces and dots).

For META keywords, you can use as many words as you want, but don't repeat the same word too many times (more than 5) to avoid keyword spam. Crawlers can identify keyword spamming easily - which won't make it good either for SEO.

To create a META tag, simply copy the code below and rewrite your META description and keywords (the red text):


Write your META description here. Keep it less than 150 characters.' name='description'/>
Write your META keywords here as many as you want separated with commas. Keep word repetition less than 5 to avoid keyword spamming.' name='keywords'/>

Then, place it in between the ..... section near the top part of your template XML code. It's best to put it just below the code.

For more details:
Go to this Free META Tag Builder tool. It directs you easily to build a META tag, create the HTML or XHTML code, and guides to paste it into your blog template XML code.

Just for the fun of it, you can analyze your blog's original description and keywords by submitting your blog URL at the Free META TAG Analyzer before placing the new META tags in your blog - so that you can compare how it is indexed before and after the change.

Testing in different browsers using Browsershots.org

If you're a template designer or happen to redesign your blog on your own, you must want to know how it looks in other browsers than the one you're using.

It's easy enough to open up the few browsers you have installed in your computer and test your newly designed blog in it. But to know for sure that it works ok in all the browsers out there is next to impossible. Just to test in 2 different version of browsers, IE6 and IE7, are tough enough - as I've faced with previously.

I have the IE7 and can't have the IE6 installed in the same machine. There are options out there to install a virtual PC in your machine so that I can install IE6. But it requires quite a large space for the virtual PC alone, and there are some other things to get out of the way to get everything in place. So, thanks but no thanks!

Recently, a reader here mentioned about using Browsershots.org to test a new template in all the browsers out there. All of them! I tried it and basically this was where my testing problem ends. All the testing works beautifully.

Browsershots.org is an online free service that takes the URL of the blog to be tested and opens it up in all the different browsers on their machines. Screenshots, or snapshots, of the blog page in each one of the browsers are then taken and uploaded back within a a few minutes into the main page for your viewing pleasure/displeasure. From there, you can immediately see which browser works or not, and zoom in to a full page ( top to bottom of page) to see the details.

Here's the Browsershots.org main page:

Here're the screenshots (you can zoom each one to a full page):

There are limitations in that you can only have a number of screenshots (~300+) per day per IP, and ~60+ shots per website per day. Limitations can be lifted up by signing up into their service or paying for an extended period of priority processing.

At least for me, having only a few hundreds of screenshots is much better than not knowing how it looks in other browsers at all. My own experience is that almost all browsers work great with my templates - except IE5 and IE6. Since knowing this Browsershots service, all my new templates are good to go with IE5 or IE6.

In some cases, you may see that your new template doesn't open up well in one or two obscure browsers. Before you try to do more tweaking to solve the problem, check to see that browsers' usage statistics. It's not worth your effort to pull up your brain power just to make it look okay in a browser used by one person for every million internet users. W3schools can provide you a record of the current browser usage monthly statistics.

How to Hide Navbar

Many blogger do not like the navbar up on their blog site.But They don't know how to hide the navbar.Here is the process I know.See the navbar below first.

The Blogger Navbar is a navigation and search bar on top of all blogspot blogs. It is available in several colors, and is configured in the Template tab in Blogger’s interface.

Below is the step-by-step process how to hide the navbar:

Step 1. Log in to blogger account

Step 2. On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog’s HTML.

Step 3.Add the below html code as specified in the below picture.

#navbar {
   height: 0px;
   visibility: hidden;
   display: none;
}

Step 4. Save the changes.

Now, you can see your blog without that navbar.If you want the navbar to appear again,just remove that code and save the changes.

How to Change favicon in blogger blog

Favicon is one small part of your blog design, usually blogger blogs have Blogger logotype as favicon, but you can easily change it to your favicon.

It can be your blog logotype or some funny small picture, for example 'smileicon'.

Ok, take your logotype (if you have it) or some picture or draw your own logo in Photoshop (or other graphic editing software).

Creating Favicon

After creating you logo you need to change size of it to 16x16 pixel. After that, save your logo in '.ico' format ( for example: my_favicon.ico ).

Installing Favicon

Now you need to install your favicon to Internet. You can use one of the free image hosting provider or Google Page Creator. Just upload your .ico file to your Google pages directory, like on the picture.

Installing Favicon to Blogger

Now you need to go to your Blogger account.

1. Click on 'Layout'.

2. Click on 'Edit HTML', Backup your template!.

3. Now, if you using google pages, you need to add the following codes right after the code:

Click here to Download FAVICON CODE

*Change 'myname.googlepages.com' to your account address, change 'my_favicon.ico' to your favicon name.

4. Save Changes and Then View Your Blog. YaY ! You Done it !