The standard blog has the header which scrolls upward along with the content and soon disappears from view. It is a rare connoisseur's blog which has a fixed header with the content scrolling upwards into it. This effect has the header always remaining in view thus imprinting itself in the viewer's memory........ Technorati Tags:header, fixed header, banner link, blogger hacks, blog header, template, css
As an example I have hacked the new layouts of Blogger to reproduce this effect as can be seen here. See the screenshots below in which the header remains fixed in its place as the content magically scrolls into it and disappears.


To achieve this effect you have to change or modify the following code in your new Blogger template/layout. Go to Template------>Edit Html and first backup your template. Then scroll down in the css section and add this code :
@media screen{
body>div#header{
position: fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
after this line
<b:skin><


Upload this image to any freehost like Googlepages. Google Groups also offers 100 MB free hosting if you create your own Group. You can also upload to Imageshack from the widget below my Label Cloud inthe right column of this blog. After uploading it copy down the link location of the image (URL OF UPLOADED IMAGE).
Go to Template------>Edit Html and first backup your Template.
Then scroll down to the header code in the body of your template :
<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="The Widgets of Beta Blogger. (Header)" type="Header">
</b:widget>
</b:section></div>
In the above code change maxwidgets="1" to maxwidgets="3"
Also change showaddelement="no" to showaddelement="yes" and change locked="true" to locked="false" in the Header widget. This last will enable you to remove the original Title and Description widget.
Save Template
Now click Page Elements tab. The Add and arrange Page Elements page opens.
Here you can now see that header section has a Add Element link. Click it to open the choices page. Choose the Html/Javascript option and paste the following code in it under contents :
<a href="BLOG URL/LINK"><img src="URL OF UPLOADED IMAGE" alt="BLOG TITLE"></a>
Save Changes. Click on Edit Link in original Blog Title and Description widget. In popup window click Remove. View Blog. The image header also serves as a link to your blog home page to make it search engine friendly.
How to Add a Banner Link in the Footer. |
To Insert a Banner Link in the Footer you must first............... Technorati Tags:banner link, footer, template
have a banner ready. You can create your own banner in an image editing program like I have done or go to an online banner generator. To find an online banner generator just type 'free banner generator' in Google's Search Box and hit Enter.
Once you have made a banner upload it to a free host like GooglePages. At present GooglePages offers 100 MB free space for hosting your files. After uploading it copy the Url of the image.
Log in to Dashboard of your blog and click on Layout. Click on Edit Html tab next to Page Elements tab below the Template tab. Do not put a check in the Expand Widget templates box. Scroll down in the Edit Template text box till you come to :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
Replace the second line above with this line :
<b:section class='footer' id='footer' maxwidgets='3' showaddelement='yes'>
Save Template. Click on Page Elements tab. On Page Elements view you will now see a link to Add Page Elements has been added to the Footer section. Click on this link and a popup window will open with 12 choices. Choose the Html/Javascript option. DO NOT choose the picture option because that will only add a banner and not a banner-link. In the content section of the Add Html/Javascript window add the following code :
<a href="http://MYBLOG.blogspot.com"><img src="URL OF YOUR BANNER AT GOOGLEPAGES" alt="YOUR BLOG TITLE"></a>
Substitute MYBLOG with name of your blog, URL OF YOUR BANNER AT GOOGLEPAGES with the link of your banner you uploaded to Googlepages in Step 2 and YOUR BLOG TITLE with the title of your blog. Save Changes. Refresh Cache. View Blog.
See the Footer I have created at the bottom of this page.
How to insert Banner Link to your Blog in each Post. |
To Insert a Banner Link to your blog you must first............... Technorati Tags:banner link, template
have a banner ready. You can create your own banner in an image editing program like I have done or go to an online banner generator. To find an online banner generator just type 'free banner generator' in Google's Search Box and hit Enter.
Once you have made a banner upload it to a free host like GooglePages. At present GooglePages offers 100 MB free space for hosting your files. After uploading it copy the Url of the image.
You can even upload the banner picture to Blogger. To do this click on Create Post and click on the Add Image icon in the top frame of the Post Editor. NOTE :THE ONLY FILE YOU CAN UPLOAD TO BLOGGER IS A IMAGE FILE.
Choose the picture in your PC by browsing to it and upload it to the post. Now click the Edit Html tab in the top frame of the Post Editor. There you will see the code for the picture which will look like this :
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_J2kVk3AKsXA/RXcetyx4o6I/
AAAAAAAAAAw/khphtkWwAMY/s1600-h/PIC_NAME.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_J2kVk3AKsXA/RXcetyx4o6I/
AAAAAAAAAAw/khphtkWwAMY/s400/PIC_NAME.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5005503282919547810" /></a>
You can extract the URL of the picture from the above code like this :
http://1.bp.blogspot.com/_J2kVk3AKsXA/RXcetyx4o6I/
AAAAAAAAAAw/khphtkWwAMY/s400/PIC_NAME.jpg
Copy this and use it later. You can now save this post as a draft so that it is not seen by viewers.
Log in to Dashboard of your blog and click on Layout. Click on Edit Html tab next to Page Elements tab below the Template tab. Do not put a check in the Expand Widget templates box. Scroll down in the Edit Template text box till you come to :
<div id='main-wrapper'>
<b:section class='main' id='main'>
Replace the second line above with this line :
<b:section class='main' id='main' showaddelement='yes'>
Save Template. Click on Page Elements tab. On Page Elements view you will now see a link to Add Page Elements has been added to the Blog Posts section. CHOOSE TEXT PAGE ELEMENT TO CREATE A PERMANENT MESSAGE ON TOP OF YOUR POSTS.
Click on this link and a popup window will open with 12 choices. Choose the Html/Javascript option. DO NOT choose the picture option because that will only add a banner and not a banner-link. In the content section of the Add Html/Javascript window add the following code :
<a href="http://MYBLOG.blogspot.com"><img src="URL OF YOUR BANNER AT GOOGLEPAGES" alt="YOUR BLOG TITLE"></a>
Substitute MYBLOG with name of your blog, URL OF YOUR BANNER AT GOOGLEPAGES with the link of your banner you uploaded to Googlepages in Step 2 and YOUR BLOG TITLE with the title of your blog. Save Changes. Refresh Cache. View Blog.
See the banner I have created at the top of this post.












