Before: Header is not clickable |
After: Header is clickable, acts as Home button |
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.
.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.
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) 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.
.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.
#header .header-bar .title h3{ position: fixed; top: 5px; left: 190px; z-index: -1; }
Is there any way to do this while keeping your description intact?
ReplyDeleteI did this and my description disappeared.
Oops, sorry bout that. And thanks for informing. I've updated the tutorial above. Let me know how it goes :)
DeleteHey, thanks! It works out great now.
DeleteThat's great :)
DeleteAnd now, my description is no longer working as a button, but the picture to the right of the description is. Weird.
DeleteHi Stephen,
DeleteTry changing the z-index value from '0' to '-1'.. That should do the trick..
Let me know how it goes :)
Do you know sir how to use same style in different page
ReplyDeletewww.blogsanjal.blogspot.com home page style same in other please
Hi सम्झना को फूल,
DeleteI'm afraid I'm not following. If you're referring to the Slide feature that you have in your blog, you're gonna have to contact the author of your template. This is a third-party add-on, thus the maker of your template will be the best person to ask. All the best :)
Thank you very much
DeleteSorry to say asko you but its a big problem to me my blog in dynamic view so it is not problem whatever and wherever but when someone try to see my blog then not open properly I means totally freeze or hang so please help me how to solve it and Do you know sir how to just 1 post show in page just see one time what is the problem
http://samjhanakophool.blogspot.com/
Hi there,
DeleteI've seen your blog, and it is not in Dynamic Views. This is how your blog will look like under Dynamic Views:
http://samjhanakophool.blogspot.com/view/classic
And your current blog doesn't seem to have any problem. It opens fine in my computers, without freezing. I don't think it is your blog's problem. Most probably something is wrong with the browser/computer that you're using. Try to use a better computer and verify this.
To show just 1 post in your homepage, go to Dashboard - Settings - Posts and Comments - Show at most - 1 - Save Settings.
Any way I can do this and have my search bar still working? It's now clickable too...
ReplyDeleteHi therem
DeleteIt wouldnt interfere with your search bar. What browser are you using? Can I have a look at your blog?
Hey, thank you for all your fantastic tutorials.
DeleteI have this problem, that the search bar is now clickable.
my blog is :
www.affairedreyfus.com
Thanks for your help !
Hi Pierre,
DeleteTry removing the following line from your code:
z-index: 100;
Cheers :)
Very fine. It's fixed now. Thank you.
DeletePierre.
Excellent! :)
DeleteWondering Yoboy if there is a way to expand my blog's (http://kansasbob.com) header image (https://lh4.googleusercontent.com/-1mT-zlXc-rc/T23-jnysStI/AAAAAAAAGEk/KksHvYNnb8A/s1600/KB2012banner.jpg) to auto-size to the width of the window. I can make the image larger or a different file type if that helps. Thanks in advance.
ReplyDeleteHi Bob,
DeleteYou mean dynamically, as in an auto-adapt mechanism? I'm afraid that isn't possible. We could only add a custom static background, and we're gonna have to give it a fixed size.
Hi YOBOY!
ReplyDeleteMay you show me how to creat Star rating on each post?
I'm using Dynamic view.
Thank you so much. You'r really awesome!
Hi Alau,
DeleteI'm not aware of any native ways of doing so in Dynamic Views. However, if you could find third party star rater (and its code), you could place it in the HTML section of each post (Dashboard - Post - Edit - HTML).
Cheers :)
You are THE bomb! thanks for all the code!!
ReplyDeleteHi Tessa,
DeleteThanks! Enjoy your stay here :)
Hi, hope you don't mind me asking this here but I;ve been setting up a dynamic theme blog here http://thegagamanportfolio.blogspot.co.uk/ using a bunch of the trick here (thanks btw, been really handy so far!) and there is just one thing I can't seem to edit: when in flipcard mode (my default) is there anyway to change the colour of the text next to the posts when they are sorted by date, Label etc. Currently they are #333333 which is unreadable on my background so I just want to change them to white. Thanks.
ReplyDeleteYeah, sure. Add this to your CSS:
Delete.group-label span{
color: #ffffff !important;
}
Cheers :)
Thanks for the tip!
ReplyDeleteWhen I implemented it my search quit working because it was behind the header-bar... I just removed the "z-index: 100;" line and allowed the header-bar to stay where it was and search works again.
Thanks for feedback Ty! :)
DeleteThere was a reason why I included the z-index initially, but for the life of me I can't recall what the reason was.. Oh well, I might as well remove it if it is affecting the search bar.
DeleteThanks again Glen and Ty for the feedback, appreciate it :)
hi Yoboy, i am using blogger dynamic view. I want to disable the link in header bar completely. Kindly help!
ReplyDeleteThanks in advance.
Which link are we talking about here? Or do you wanna remove the whole of the header bar?
Deletethe link provided in the title which takes it to the home page....just wants to remove that link....
DeleteI don't see a way to do that at the moment. I'm sorry I couldn't be much more of a help.
DeleteHi Yoga, any way to make the header go to a different link than the home page?
DeleteReason for this:
- Home page opens with Timeslide
- However, there is a big bounce rate from Timeslide pop-up post views or from individual post pages.
- Want to point header Blog title to go to Sidebar view instead of timeslide which will still open as home page.
Thanks.
Hi Anon..
DeleteIt isn't possible to change the header's link at the moment. You can, however, add a link pointing to your sidebar view in your menu and name it 'Home', if that'd help..
Thanks... posing a few others that I have not been able to figure out.
Delete- The reason for high bounce rate from Timeslide posts seems to be
(1) lack of scroll bar visibility on post in Chrome - the scroll bar looks more visible in IE or FF
(2) the background home page gets 'blackened' when the post opens up in pop-up
So Q is:
1- can we disable pop-up post in timeslide to make the post appear in same frame/window like in Sidebar
Or
2- can we put a home link or nav bar in post pop up
or
3- can we reduce blackness and increase transparency beneath the post pop up when the post opens in timeslide?
Hi there,
DeleteMy replies:
1) Unfortunately, we can't make any structural change to Dynamic View at the moment, as it'd require script modifications to acquire structural changes - scripts that are hosted at Blogger, scrips that we do not have access to..
2) Same as above.. Unless if you include a link to your homepage manually in each post..
3) This can be done, yes.. Here, add this to your CSS:
#overview .overview-backdrop{
opacity: 0.1 !important;
}
You can vary the opacity value from 0 to 1, with 1 being completely opaque and 0 being completely transparent..
Cheers :)
I like that idea about opacity Yoboy. Wondering how to make a post's background default to something semi-transparent.
DeleteIt doesnt work that way Bob. If we apply the opacity attribute to a post, all elements associated to it, including background and the actual post contents (images, text, etc) will also be affected.. In other words, your post-text and images will also be semi-transparent, not only your background..
DeleteThanks for the reply Yopboy. Thought it might be possible to make the background transparent like some on non-DV Blogger - like http://annkiemel.blogspot.com/.
DeleteHi Bob,
DeleteIt is still possible to use semi-transparent background, using a combination of a CSS color and URL attribute. Perhaps I'll publish a post on it, right away!
Done.. Here :)
Semi-transparent Post Background in Blogger Dynamic View
Thanks Yoga... the code for reducing transparency below the post works great and gives a better feel of the blog now...
DeleteGlad you're thinking so, and thanks for the feedback! Appreciate it :)
DeleteI entered this code and now my post title goes transparent when I hover over it. How can I change the code so that its doesn't apply the transparency to the post title?
ReplyDeletethanks
Hi Jasmine,
DeleteThere was a bug with the old code. I've updated the code few hours ago. Try the new one above and let me know how it goes :)
Cheers..
It still doesn't work. I think it's because I added my header as a background instead of the way you suggested. I'll try doing your 'add header in blogger dynamic view' and see if that changes things. thanks
DeleteHi Jasmine,
DeleteI'd be happy to have a look at your template. What's your blog's address?
thanks. its http://i-makecrafts.blogspot.co.uk when you hover over the post title, the title disappers. My header is still added as a background though. thanks again
DeleteYou're still using the old code. Change this:
Delete.header-bar span.title a h1, .ss, .title a:hover{
to this:
.header-bar span.title a h1, .ss, #header .title a:hover{
That should do the trick :)
perfect that worked. thanks
DeleteExcellent! :)
DeleteI couldn't get this to work for me! I already have the code to enlarge profile picture in the box. I put this code just directly below, is that wrong?
ReplyDeleteHi Zara,
DeleteThe tutorial in this page works only on Dynamic View templates. You're using a non-dynamic view template, particularly a Watermark template..
In your template, your blog title is a plain text on your homepage, but it will get linked and clickable in every other page (post page, static page and so on..).. An easier way to get the whole of your header clickable in your template is to upload a header image by going to Dashboard - Layout - Header - Edit, and choose the 'Instead of title and description' placement option..
Let me know how it goes :)
pls help...
ReplyDeletewhen i click home link in black bar,
all the gadgets and links in black bar disappears
pls help
Let me have a look. What's your blog's address?
DeleteCheers..
I want to remove the Header. Is that possible?
ReplyDeleteHi Frans,
DeleteI've managed to cook something up. See if it works:
.header-bar{
height: 0px !important;
}
.header-drawer{
top: 0px !important;
}
#main{
position: relative;
top: -65px !important;
}
#sidebar{
position: fixed;
top: 35px !important;
}
Cheers :)
Thanks Yoga, the code works perfect. Just what I needed.
DeleteThanks again.
You're most welcome Frans :)
DeleteCheers and God bless..
Is there a way to but an image in my header bar instead of text? (in dynamic views) Right now I have links in my header to my social media sites.I would like to put icons instead to make them stand out. possible? (www.organiccents.blogspot.com)
ReplyDeleteYeap, possible. See the link below :)
Deletehttp://www.southernspeakers.net/2011/12/blogger-dynamic-view-picture-menu.html
Good day,
ReplyDeletethis doesn't seem to be working.
I added the code by the menu bar still displays the dynamic views.
Is there a way to just stick to one dynamic view?
oh never mind, it's the wrong tutorial lol.
ReplyDeleteI'm looking for a way to get rid of the dynamic view option so my blog will stick to just one view
Perhaps this is what you're after:
ReplyDeletehttp://www.southernspeakers.net/2011/09/disable-certain-dynamic-views-in.html
Cheers :)
I tried this code and the title is still showing. Am I missing something?
ReplyDeleteSorry for the late reply. Let me have a look at your blog. What's your blog's address?
DeleteHey, I've tried dis.. everythings going fine in the blogger template designer, with the custom header, but i can't 'apply to blog'. any help?
ReplyDeleteSorry~ wrong website, was going to comment on another website..
ReplyDeleteNo prob :) Btw, here's a relevant forum where you might wanna leave your information on:
Deletehttps://productforums.google.com/forum/#!msg/blogger/S_uVwRQQrOY/zYt7wHjyl2MJ
Hey Yo!
ReplyDeleteI did your trick to remove the title and description and although it doesn't show up on my computer, people outside are seeing the title still in the far left corner.
Can you take a look please?
http://comicbookjunk.blogspot.com/
Here is what they see and sent me an image:
http://i.imgur.com/aerdETh.jpg
Oh and thank you so much for all of these tips. VERY helpful.
Hi Whalen,
DeleteCould you give this code a try, instead of the older one:
#header .title h1{
display: none !important;
}
let me know how it goes. Cheers :)
That did it!
DeleteSorry I couldn't find the link I saved back to this page but thanks again for the help Yoga.
That's great! Sorry for the late reply :)
Deletethankyou very much again!
ReplyDeletei use this script too, and now my blog header looks better :D
Excellent! :)
DeleteHi, this code seems to alter the formatting of my blog: http://timeless-styles.blogspot.com/
ReplyDeleteI can't get it to work
email: ask.nomdeplume@gmail.com
Cheers
Hi Nom,
DeleteSorry for the delayed replied. Let's keep our discussions consolidated at one place. I've replied you in the forum :)
I love you!!!! Your guides are so helpful. Thank you for figuring out and doing everything that Blogger should have done itself!
ReplyDeleteThanks Ed! :D
DeleteHi!! I am trying to make my entire header background image a "home button". I thre a way to do this? My site is http://www.alesserfate.com... many thanks in advance
ReplyDeleteI see you've already got this done. Let me know if you still need help with it.
DeleteHey Yoga - sorry me again, just started using bloger and im so confused. I want to design my header to look something like my tumblr. (http://inspiredbytwo.tumblr.com/)
ReplyDeletemy blogger page is: http://inspired-by-two.blogspot.co.nz/
Am i using the wrong template?
Hello there,
DeleteI assume you're referring to the part where you have the links to other pages on your header. Unfortunately, this isn't possible in Dynamic View templates. They aren't very customisable.
Hi Yoga! Thanks for all the helpful tips!
ReplyDeleteThis tip works great for me. I was wondering is it possible to redirect the header area to another page or website besides the homepage?
Hello Jason,
DeleteThat'd be cool, but it isn't possible and this will require structural editing which DV templates doesn't support.
Hi Yoga,
ReplyDeleteFantastic, it works great.
Thank you.