ProBlogger: April 2009

How To Hidden Blogger Header and Replace Image Instead

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see this:

#header-wrapper {
width:800px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Note :- width:660px can be different value.

3.Now Replace the above code with the below code.

#header-wrapper {
width:800px;
margin:0 auto 10px;
border:1px solid $bordercolor;
display:none;
}

Done. above code hides your blog header.

4.To use a image instead header,find the below code.

5.Now paste the below code just after the above code.

6Click on "Save Templates" and you are done.

How To Add New Layout below Header in Blogger

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see this:

</head>

3.Add below code into your template just above the </head> tag.

#belowheader-wrapper {
width:890px;
margin:0 auto 10px;
overflow: hidden;
}

Note : You can change width:890px to equal the width to your Header wrapper.

4.Now Scroll down to where you see this:

5.Now paste the below code just after the above code.

6.Click on "Save Templates" and you are done.

How to Add “Save Page as PDF” button to Blogger blog

1.First Sign up with Web2PDF.

2.Now Configure your "Save Page as PDF" button and click ‘Generate the JavaScript’ button.

3.Then a Javascript code will be generated. Copy This code.

Now follow these simple steps :

(a)Log in to your dashboard--> layout- -> Edit HTML

(b)Click on "Expand Widget Templates"

(c)Scroll down to where you see this:

(d)Immediately after above line, paste the code which you have generated at the Web2Pdf Online website. It's look like below code.

<script type="text/javascript">
var authorId = "XXXXXXXX-XXXX-XXXX-XXX-XXXXXXX";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";
</script>
<script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js">
</script>

(e)Click on "Save Templates" and Refresh your site.

How To Redirect Blogger URL To Another URL

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see this:

</head>

3.Add below code into your template just above the </head> tag.

It should Look Like This.

4.Replace http://yournewurl.com with the URL you want to redirect your old blog.

5.Click on "Save Templates" and you are done.

Now your blog traffic will be redirected to your new address.

How To Remove Label Posts Count From Blogger

To remove the label count just follow the below simple steps:-

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Now delete above code.

5.Click on "Save Templates" and Refresh your site.

How To Add Image Hover Effect to Blogger

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> Tag

3.Copy and Paste below CSS code above </head> Tag

4.Now Click on "Save Templates"

Now whenever you embed your image in blog or blog posts you use codes like below.

Look at the Example below.

<a href="http://bloggertipandtrick.blogspot.com" target="_blank" alt="Blogger Tips"><img src="http://i626.photobucket.com/albums/tt346/wam8387/toyotacar-2.jpg"/></a>

5.Replace above code with below code to have hover effect..

It will look like this.

<a class="linkopacity" href="http://bloggertipandtrick.blogspot.com" target="_blank" alt="Blogger Tips"><img src="http://i626.photobucket.com/albums/tt346/wam8387/toyotacar-2.jpg"/></a>

ProBlogger

How To Hidden Blogger Header and Replace Image Instead

How To Add New Layout below Header in Blogger

How to Add “Save Page as PDF” button to Blogger blog

How To Redirect Blogger URL To Another URL

How To Remove Label Posts Count From Blogger

How To Add Image Hover Effect to Blogger

Labels

Partners

Blog Archive

Blogroll

Site Info

Text