Blogger Image as Blog Header BLOGGER IMAGES

Use an image instead of text For the header On yours Blog.Its Really Easy To Do That Just What You Need Is to Do here is the modifications made to the default "Header" widget to accomplish this. Data that is specific to yours blog, and which you'll want to change if you copy this code, is displayed in Red in Below Code.

<b:widget id='Header1' locked='true' title='Header' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<a href='http://onwebsite.blogspot.com/'><span/><data:title/></a>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>

The original template also used 'data:blog.homepageUrl' for the link, but this resolved to 'http://onwebsite.blogspot.com/index.html', which is redundant. Use more shorter and more Future-proof URL 'http://drewthaler.blogspot.com/' So I changed the link manually.
Left the description code as-is, because may Blogger dont Use it. Blogger always want to do something Different.
You'll notice a single tag in the middle. That's required for CSS image replacement.

Stylesheet modifications

Here are the CSS additions that go with in the template below Tag and above. These are additions to the original Stylesheet.


/* Replace the header with a graphic on computer displays */
@media screen, projection, tv {
h1.title {
width: 750px;
height: 89px;
left: 0;
top: 0;
padding: 15px 0 0 40px;
margin: 0;
border-bottom: 1px solid black;
z-index: 0;
}
h1.title a span {
background: url(http://homepage.mac.com/drewthaler/images/blog-header.gif) no-repeat;
position: absolute;
top: 0;
left: 0;
display: block;
width: 790px;
height: 105px;
z-index: 1;
}
#sidebar {
z-index: 2;
}
}


The span is given a z-index of 1 so that it sits above the original H1. The H1 text is still there, hiding underneath at z-index 0. Then the sidebar is given a z-index of 2 so that it will float above the header image if the two overlap.

The pixel sizes (790px by 105px) are from the size of my image. The padding (15px 0 0 40px) and bottom border are in there to make CSS-on/images-off browsing still look acceptable. It's a personal preference and based on the size of my image and text, so you might need to tweak it for your setup. The H1's width of 750px is the image's width (790px) minus the horizontal padding (40px), and the H1's height of 89px is the image's height (105px) minus the vertical padding (15px) minus the one-pixel bottom border (1px).For More on It Visit Mezzoblue

Print this post

Related Posts by Categories

Widget by Scrapur | Scrap Book