Blogger Tips and Tricks

How to style borders?

2009-11-27T23:14:00.002+05:30

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.

Increase the border width
To increase the border width just increment the pixel value. For e.g. to make a border 2 pixel wide

border: 2px solid #333333;

The higher the pixel value the wider the border. border: 5px solid #333333 will have five times wider border than border: 1px solid #333333.

Change the border style
Following are the styles available for border.

border:3px solid #b90000;
border:3px double #b90000;
border:3px inset #b90000;
border:3px dotted #b90000;
border:3px groove #b90000;
border:3px outset #b90000;
border:3px dashed #b90000;
border:3px ridge #b90000;

Outlines
In addition to borders you can also have outlines. Here is an e.g. of outline.

outline:#b90000 dotted 3px;

Confused, do they look same. Here is another e.g. to show the difference.

border:3px solid #333; outline:#b90000 dotted 3px;

The inner gray line designates border, while the outer red line is the outline.

Video tutorials on their way.

2009-11-17T18:31:00.000+05:30

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?

2009-11-16T23:01:00.019+05:30

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.

Goto your template. Dashboard > layout > Edit HTML
Look for this line

<head>

Now immediately below this paste this line

Save your template and you are done.

I will still recommend that you do not use this hack. Whenever you want to open your links in other window do it like this.

How to add favicon to blogger blog?

2009-11-11T23:59:00.013+05:30

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.

Goto your template. Dashboard > layout > Edit HTML
Replace the text in red with the url of your image in the code below and then copy it.

Find the line

</head>

and immediately above it paste the code modified in step 2.
Save your template.

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

2009-11-11T11:04:00.008+05:30

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.

Code container style 1

Copy the code

/* Code container by http://bloggerfunda.blogspot.com */ .codecp{ border: rgb(79,129,189) 1px dotted; background-color:#efefef; padding: 3px; min-width: 98%; }

Goto your template. Dashboard > layout > Edit HTML
Search the line (just ctrl+f it).

]]></b:skin>

and immediately above it paste the code copied in step 1.
Save your template.

Now whenever you have to use this container in your post, write it as follows

For e.g. if you are writing <html></html>, you need to write it as

Code container style 2

Grab the image from here and upload it to your mydatanest account. Make sure you keep the image access public. Copy the hotlink url.
Replace url of image here text in the code below with url of image uploaded in step 1.

Copy the above modified code.
Goto your template. Dashboard > layout > Edit HTML
Search the line (just ctrl+f it).

]]></b:skin>

and immediately above it paste the code copied in step 3.
Save your template.

Now whenever you have to use this container in your post, write it as follows

For e.g. if you are writing <html></html>, you need to write it as

Code container style 3

Grab the image from here and upload it to your mydatanest account. Make sure you keep the image access public. Copy the hotlink url.
Replace url of image here text in the code below with url of image uploaded in step 1.

Copy the above modified code.
Goto your template. Dashboard > layout > Edit HTML
Search the line (just ctrl+f it).

]]></b:skin>

and immediately above it paste the code copied in step 3.
Save your template.

Now whenever you have to use this container in your post, write it as follows

<div class='code'>
<p>Title here</p>
<div>
<code>
//your code here
</code>
</div>
</div>

For e.g. if you are writing <html></html>, you need to write it as

<div class='code'>
<p>HTML example</p>
<div>
<code>
<html></html>
</code>
</div>
</div>

Control opacity of blogger-navbar

2009-11-11T00:09:00.013+05:30

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.

First you need to modify the code below to select the desired level of transparency.

The line opacity:0.5; is to control opacity in firefox.
The value of opacity ranges from 0.0 to 1.0
0.0 means more transparency and 1.0 means more opacity.
Replace 0.5 in code below with any no within specified range.

Similarly line filter:alpha(opacity=50); is to control opacity in IE.
The value of opacity ranges from 0 to 100
0 means more transparency and 100 means more opacity.
Replace 50 in code below with any no within specified range.

Modify the code below as per your need and copy it

Goto your template. Dashboard > layout > Edit HTML
Search the line (just ctrl+f it).

]]></b:skin>

and immediately above it paste the code copied in step 1.
Save your template and your are done.

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

2009-11-10T17:34:00.093+05:30

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 < and > by < . Here we are providing a few elegant ways to do this.
We will start with the toughest one first. If you like easy things just skip to the last step.

Method 1

Open notepad and paste your code in it.
Hit ctrl+h or choose Edit > Replace
In Find what: box type < and in Replace with: box type <
and hit Replace all button

Similarly for > type > in Find what: box and > in Replace with: box.
Your are done, the code is ready to be used in your post.

Method 2

Paste your code in the text box below and hit Convert button.

Done! Your code is ready to be pasted in your blogger blog post.

For easy access we suggest that you bookmark (ctrl+d) this page.

Method 3

The above method requires you to visit this page whenever you want to convert your code. This is waste of time and will also require your to have an active internet connection.
Let's make things a bit easier download html converter now.

Method 4

The next method is the official solution from blogger. If you need to write html code in your post just select post options and in compose settings choose Show HTML literally. Any code now written will not be interpreted as HTML.

End of part 1/2 of how to write code series.

In the next part we will tell a few ways to highlight your code.

New Transparent Navbar Styles From Blogger

2009-11-01T13:55:00.005+05:30

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

we have added two new color schemes — "Transparent Light" and "Transparent Dark." These new color schemes take advantage of the ability of modern browsers to render transparency (a technique known to web designers as "alpha blending"). This allows the navbar background to blend together with your blog's background color and pattern. The "Transparent Light" color scheme has a semi-transparent white background, producing subtle pastel colors, while the background of "Transparent Dark" is a semi-transparent black that produces a shaded look.

In addition, we've simplified and slimmed down the look of all the navbars, so that they will be more likely to harmonize with the aesthetics of your blog.

Most bloggers prefer to hide the blogger navbar but now blogger has given a reason to put it back again.

Remove the blogger navigation bar.

2009-10-09T19:53:00.003+05:30

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.

To remove the navbar

1. Goto your blogger dashboard.
2. Goto Layout > Edit HTML.
3. Look out for the following lines of code



<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name: Stretch Denim

Designer: Darren Delaye

URL: www.DarrenDelaye.com

Date: 11 Jul 2006

-----------------------------------------------

*/



/* Variable definitions

====================

Now simply add the CSS code as shown in blue here.

Look for the code.



<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name:     Stretch Denim

Designer: Darren Delaye

URL:      www.DarrenDelaye.com

Date:     11 Jul 2006

-----------------------------------------------

*/



#navbar-iframe {

display: none !important;

}



/* Variable definitions

====================

4. Now save your template and you are done.

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

2009-09-25T21:25:00.002+05:30

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.

Goto Layout > Edit HTML.
Check the 'Expand Widget Templates' checkbox.

Look for the following html code in your template.



<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId   &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

</span>

</b:if>



<b:if cond='data:olderPageUrl'>

<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId   &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

</span>

</b:if>



<b:if cond='data:blog.homepageUrl != data:blog.url'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

<b:else/>

<b:if cond='data:newerPageUrl'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</b:if>

</b:if>

Now all we need to do is to replace the code in red with our content.

We will modify <data:newerPageTitle/> to change "Newer Post", <data:olderPageTitle/> to change "Older Post" and <data:homeMsg/> to change "Home" links.
These can be replaced with text of our choice or an image.

For e.g. to use images instead of "Home" link. We will replace the code

<data:homeMsg/>
with

Where "path-to-image" is the path of image to be displayed.
The modified code will look like this



<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId   &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'> <data:newerPageTitle/> </a>

</span>

</b:if>



<b:if cond='data:olderPageUrl'>

<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId   &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

</span>

</b:if>



<b:if cond='data:blog.homepageUrl != data:blog.url'>

<a class='home-link' expr:href='data:blog.homepageUrl'><img src="/path-to-image/" width='50px' height='50px'>

</a>

<b:else/>

<b:if cond='data:newerPageUrl'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</b:if>

</b:if>

Similarly change <data:newerpagetitle> to modify "Newer Post" and <data:olderpagetitle> to modify "Older Post" links.

An example can be seen at the end of this blog.

2009-09-23T20:13:00.000+05:30

2009-09-23T19:01:00.001+05:30

Link to us

2009-09-23T18:51:00.016+05:30

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

234X60 link units

180x100 link units

Seasonal (Dyanamic) link units

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.