How to style borders?

Often while editing you template you must have come across something like border: 1px solid #333333. What this means is "make a border 1 pixel wide, with solid line, and color of line is #333333. In this tutorial we will tell what styles you can apply to the borders and how to increase the line width. Finally we will also tell about outlines.

Video tutorials on their way.

Yesterday a friend of mine was watching me blog. He is particularly new to blogger. He had tried the 'Remove the blogger navbar' hack and was not able to do it. I was surprised. It's such an easy hack, just copy paste the code and you are done. I asked him where he faced the problem. The reply: "Don't know. I didn't even understand what a template is." So I decided to add a video tutorial section. For the next coming days I will be busy making video tutorials for the older posts. This also means less number of posts per week and more work for me. Well I will try my best to keep up my work.

How to open all links in a new window?

Watch the video tutorial.

If you want to open all your links in a new window here is how to do it. But I don't recommend this hack. All your links - older post, newer post, home and all in-post links will open in a new window. This can be really annoying at times. As a thumb rule you should open external links in a new window and internal links in the same window. Anyways if anyone of you find this thing useful do tell me.

How to add favicon to blogger blog?

Watch the video tutorial.

Favicon is the small image beside the url (as you can see in the image). Any image .jpg, .bmp, and even animated .gif images can be used as favicon. Here is the easiest way to add it to your blog.

How to properly write code in blogger blog post? (Part 2/2)

Writing code in post part 2/2.

In first part we told you how to write html/javascript code in blogger blog post. In this part we will show you how to properly write the code in post i.e. how to make your code standout the regular text.

After you have placed your code in the post, highlight it so that users can easily spot it. Often while reading others post I have face this peculiar problem. The authors do not highlight their code. This is specially problematic when they are referring to a single line of code. You can apply a lot of styles make it bold, increase or decrease font, change the font altogether... Pretty old stuff...isn't it. This is how we like it.





Consider this (Style 1)

//your code here

Or this (Style 2)

//your code here

Or even this... (Style 3)

Title here


//your code here


Neat code presented elegantly. Read on to know how to apply these styles.

Control opacity of blogger-navbar

Recently Blogger released new transparent navbar styles. It is a nice move on blogger's part to encourage its users put back the navbar again. Users used to hide the blogger navbar as it did not match their template. The transparent navbars mix with the template colors and hence give a better look.
There is one thing though that I still think is missing. The level of transparency can not be controlled. Here is a work around to achieve this.

How to write html/javascript code in blogger blog post?

If you have ever tried writing HTML/Javascript code in your blogger blog post then you might have found that it does not appear as code in the post. Instead the code is interpreted and displayed.
The above problem can be simply fixed by replacing < with &lt; and > by &lt; . Here we are providing a few elegant ways to do this.

New Transparent Navbar Styles From Blogger

Blogger has introduced two new navbar styles - Transparent Dark and Transparent Light. Previously only a few styles were available - Blue, Black, Tan, and Silver. These styles couldn't readily mix with many of the blog designs. So blogger introduced the transparent styles.

Here is what the have to say about it

Remove the blogger navigation bar.

At the top of your page you may see a bar this is called 'Blogger Navbar'.

If you don't like you can remove it just by adding a few lines of CSS (Cascading Style Sheet) code.

Replace 'Older post', 'Newer post' and 'Home' links text with anything of your choice

At the end of each page your can see 'Older post', 'Newer post' and 'Home' links. What we are talking about is this.

This can be changed to anything of your liking. For e.g.

Link to us

Were we able to help you? Did you find this blog useful? or You just liked it. Please link back to us.

468X60 link units

<a target="_blank" href="http://bloggerfunda.blogspot.com"><img src="http://feeds.feedburner.com/blogspot/bloggerfunda.4.gif" alt="Blogger Tips and Tricks @ bloggerFunda" style="border:0" /></a>

<a target="_blank" href="http://bloggerfunda.blogspot.com"><img src="http://feeds.feedburner.com/blogspot/bloggerfunda.5.gif" alt="Blogger Tips and Tricks @ bloggerFunda" style="border:0" /></a>

234X60 link units

<a target="_blank" href="http://bloggerfunda.blogspot.com"><img src="http://feeds.feedburner.com/blogspot/bloggerfunda.6.gif" alt="Blogger Tips and Tricks" style="border:0"></a>

<a target="_blank" href="http://bloggerfunda.blogspot.com"><img src="http://feeds.feedburner.com/blogspot/bloggerfunda.7.gif" alt="Blogger Tips and Tricks" style="border:0"></a>

180x100 link units

<a target="_blank" href="http://bloggerfunda.blogspot.com"><img src="http://feeds.feedburner.com/blogspot/bloggerfunda.8.gif" alt="Blogger Tips and Tricks" style="border:0"></a>

<a target="_blank" href="http://bloggerfunda.blogspot.com"><img src="http://feeds.feedburner.com/blogspot/bloggerfunda.9.gif" alt="Blogger Tips and Tricks" style="border:0"></a>

Seasonal (Dyanamic) link units

<a target="_blank" href="http://bloggerfunda.blogspot.com"><img src="http://feeds.feedburner.com/blogspot/bloggerfunda.10.gif" alt="Blogger Tips and Tricks" style="border:0"></a>

Can't find anything suitable for your blog? Please let us know. Just visit our Contact us page or drop a comment here. We will try our best.

Thank you for providing us a link back.