Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, June 3, 2012

Use Entire Header as Home Button in Blogger Dynamic Views

Before: Header is not clickable
After: Header is clickable, acts as Home button
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.
.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.
.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;
}


85 comments:

  1. Is there any way to do this while keeping your description intact?

    I did this and my description disappeared.

    ReplyDelete
    Replies
    1. Oops, sorry bout that. And thanks for informing. I've updated the tutorial above. Let me know how it goes :)

      Delete
    2. Hey, thanks! It works out great now.

      Delete
    3. And now, my description is no longer working as a button, but the picture to the right of the description is. Weird.

      Delete
    4. Hi Stephen,

      Try changing the z-index value from '0' to '-1'.. That should do the trick..

      Let me know how it goes :)

      Delete
  2. Do you know sir how to use same style in different page
    www.blogsanjal.blogspot.com home page style same in other please

    ReplyDelete
    Replies
    1. Hi सम्झना को फूल,

      I'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 :)

      Delete
    2. Thank you very much


      Sorry 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/

      Delete
    3. Hi there,

      I'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.

      Delete
  3. Any way I can do this and have my search bar still working? It's now clickable too...

    ReplyDelete
    Replies
    1. Hi therem

      It wouldnt interfere with your search bar. What browser are you using? Can I have a look at your blog?

      Delete
    2. Hey, thank you for all your fantastic tutorials.
      I have this problem, that the search bar is now clickable.
      my blog is :

      www.affairedreyfus.com

      Thanks for your help !

      Delete
    3. Hi Pierre,

      Try removing the following line from your code:

      z-index: 100;

      Cheers :)

      Delete
    4. Very fine. It's fixed now. Thank you.

      Pierre.

      Delete
  4. Wondering 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.

    ReplyDelete
    Replies
    1. Hi Bob,

      You 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.

      Delete
  5. Hi YOBOY!
    May you show me how to creat Star rating on each post?
    I'm using Dynamic view.
    Thank you so much. You'r really awesome!

    ReplyDelete
    Replies
    1. Hi Alau,

      I'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 :)

      Delete
  6. You are THE bomb! thanks for all the code!!

    ReplyDelete
    Replies
    1. Hi Tessa,

      Thanks! Enjoy your stay here :)

      Delete
  7. 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.

    ReplyDelete
    Replies
    1. Yeah, sure. Add this to your CSS:

      .group-label span{
      color: #ffffff !important;
      }

      Cheers :)

      Delete
  8. Thanks for the tip!
    When 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.

    ReplyDelete
    Replies
    1. your site is brilliant, thanks so much! incredibly helpful! p.s. this tutorial also disabled my search bar, but remove the z-index line as suggested by Ty above worked :)

      Delete
    2. There 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.

      Thanks again Glen and Ty for the feedback, appreciate it :)

      Delete
  9. hi Yoboy, i am using blogger dynamic view. I want to disable the link in header bar completely. Kindly help!

    Thanks in advance.

    ReplyDelete
    Replies
    1. Which link are we talking about here? Or do you wanna remove the whole of the header bar?

      Delete
    2. the link provided in the title which takes it to the home page....just wants to remove that link....

      Delete
    3. I don't see a way to do that at the moment. I'm sorry I couldn't be much more of a help.

      Delete
    4. Hi Yoga, any way to make the header go to a different link than the home page?
      Reason 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.

      Delete
    5. Hi Anon..

      It 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..

      Delete
    6. Thanks... posing a few others that I have not been able to figure out.

      - 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?

      Delete
    7. Hi there,

      My 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 :)

      Delete
    8. I like that idea about opacity Yoboy. Wondering how to make a post's background default to something semi-transparent.

      Delete
    9. It 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..

      Delete
    10. Thanks 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/.

      Delete
    11. Hi Bob,

      It 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

      Delete
    12. Thanks Yoga... the code for reducing transparency below the post works great and gives a better feel of the blog now...

      Delete
    13. Glad you're thinking so, and thanks for the feedback! Appreciate it :)

      Delete
  10. I 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?

    thanks

    ReplyDelete
    Replies
    1. Hi Jasmine,

      There 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..

      Delete
    2. 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

      Delete
    3. Hi Jasmine,

      I'd be happy to have a look at your template. What's your blog's address?

      Delete
    4. 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

      Delete
    5. You're still using the old code. Change this:

      .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 :)

      Delete
    6. perfect that worked. thanks

      Delete
  11. I 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?

    ReplyDelete
    Replies
    1. Hi Zara,

      The 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 :)

      Delete
  12. pls help...
    when i click home link in black bar,
    all the gadgets and links in black bar disappears
    pls help

    ReplyDelete
    Replies
    1. Let me have a look. What's your blog's address?

      Cheers..

      Delete
  13. I want to remove the Header. Is that possible?

    ReplyDelete
    Replies
    1. Hi Frans,

      I'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 :)

      Delete
    2. Thanks Yoga, the code works perfect. Just what I needed.
      Thanks again.

      Delete
    3. You're most welcome Frans :)

      Cheers and God bless..

      Delete
  14. 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)

    ReplyDelete
  15. Good day,

    this 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?

    ReplyDelete
  16. oh never mind, it's the wrong tutorial lol.

    I'm looking for a way to get rid of the dynamic view option so my blog will stick to just one view

    ReplyDelete
  17. Perhaps this is what you're after:

    http://www.southernspeakers.net/2011/09/disable-certain-dynamic-views-in.html

    Cheers :)

    ReplyDelete
  18. I tried this code and the title is still showing. Am I missing something?

    ReplyDelete
    Replies
    1. Sorry for the late reply. Let me have a look at your blog. What's your blog's address?

      Delete
  19. Hey, 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?

    ReplyDelete
  20. Sorry~ wrong website, was going to comment on another website..

    ReplyDelete
    Replies
    1. No prob :) Btw, here's a relevant forum where you might wanna leave your information on:

      https://productforums.google.com/forum/#!msg/blogger/S_uVwRQQrOY/zYt7wHjyl2MJ

      Delete
  21. Hey Yo!

    I 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.

    ReplyDelete
    Replies
    1. Hi Whalen,

      Could you give this code a try, instead of the older one:

      #header .title h1{
      display: none !important;
      }

      let me know how it goes. Cheers :)

      Delete
    2. That did it!

      Sorry I couldn't find the link I saved back to this page but thanks again for the help Yoga.

      Delete
    3. That's great! Sorry for the late reply :)

      Delete
  22. thankyou very much again!

    i use this script too, and now my blog header looks better :D

    ReplyDelete
  23. Hi, this code seems to alter the formatting of my blog: http://timeless-styles.blogspot.com/

    I can't get it to work

    email: ask.nomdeplume@gmail.com

    Cheers

    ReplyDelete
    Replies
    1. Hi Nom,

      Sorry for the delayed replied. Let's keep our discussions consolidated at one place. I've replied you in the forum :)

      Delete
  24. I love you!!!! Your guides are so helpful. Thank you for figuring out and doing everything that Blogger should have done itself!

    ReplyDelete
  25. Hi!! 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

    ReplyDelete
    Replies
    1. I see you've already got this done. Let me know if you still need help with it.

      Delete
  26. Hey 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/)

    my blogger page is: http://inspired-by-two.blogspot.co.nz/
    Am i using the wrong template?

    ReplyDelete
    Replies
    1. Hello there,

      I 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.

      Delete
  27. Hi Yoga! Thanks for all the helpful tips!

    This tip works great for me. I was wondering is it possible to redirect the header area to another page or website besides the homepage?

    ReplyDelete
    Replies
    1. Hello Jason,

      That'd be cool, but it isn't possible and this will require structural editing which DV templates doesn't support.

      Delete
  28. Hi Yoga,
    Fantastic, it works great.
    Thank you.

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.