22.5.13

Use Entire Header as Home Button in Blogger Dynamic Views | Southern Speakers v3.0

Use Entire Header as Home Button in Blogger Dynamic Views | Southern Speakers v3.0

Remember how non-Dynamic View template's headers used to serve as home buttons? I thought it was pretty neat. It's one of the things that makes you miss non-DV templates. In Dynamic Views, you still kinda have this feature - but you gotta click on your blog's title on the header. Simply clicking anywhere on your header will not bring you to your homepage, or to the top of your blog. Let's change that, shall we?


Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
1
2
3
4
5
.header-bar span.title a h1, .ss, #header .title a:hover{
display: block !important;
width: 100% !important;
height: 100% !important;
}

Extras:

1) Some of you might want to hide your blog's title from showing, especially if it obstructs your header image. I've prepared a slightly tweaked version of the code in case if you want your blog title to remain hidden.
1
2
3
4
5
6
7
8
.header-bar span.title a h1, .ss, #header .title a:hover{
display: block !important;
width: 100% !important;
height: 100% !important;
text-decoration: none !important;
color: transparent !important;
text-shadow: 0px 0px 0px transparent !important;
}

2) If you have description visible, add the following additional code to your Template Designer. Note: This is a supplementary code, not a substitute. You're still gonna need the main code for this to work. Once you've added this code, adjust Lines 3 and 4 accordingly to adjust the position of your description.
1
2
3
4
5
6
#header .header-bar .title h3{
position: fixed;
top: 5px;
left: 190px;
z-index: -1;
}


You might also like: