Southern Listeners

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

Friday, October 28, 2011

Remove Blogger Dynamic View Search Bar


Should I say more? Maybe I should. Blogger's Dynamic View comes with a little search bar, placed at the top-right corner of your blog page. If you want to remove this search bar, here's how. This is a reply to blog reader Katie.

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.header-bar #search{
display: none !important;
}

97 comments:

  1. Thank you! Worked perfectly!

    ReplyDelete
  2. @Katie: You're welcome :) Cheers...

    ReplyDelete
  3. Is there a way to place the search bar or a link to search, inside of the menu bar next to the dynamic views or pages?

    ReplyDelete
  4. @Anon: Use this CSS:


    .header-bar #search{
    position: relative;
    top: 167px !important;
    right: 30px !important;
    }

    You need to change the two numeric values above to fit your blog.

    ReplyDelete
  5. Is it possible to remove the blogger loader!!??

    ReplyDelete
  6. @Anon: What, the gear thingy? It passes by too quickly, I can't analyze it - thus I can't write any code to remove it.

    ReplyDelete
  7. The preloader in dynamic view is it possible to hide it?
    Thanks!

    ReplyDelete
  8. @Anon: I'm about to publish a post on it tomorrow, stay tuned. Cheer..

    ReplyDelete
  9. Is there a way to move the search box onto the header bar underneath the blog's title? Check out my site if you don't understand what I mean (hcmctoday.com) and I want to put the search box underneath where it says "HCMC Today". THANKS!

    ReplyDelete
  10. @Alex: Add the following to your CSS:

    #header .header-bar{
    height: 100px;
    }

    #header:hover .header-drawer, #header .header-drawer.open{
    top: 100px;
    }

    #header-container{
    height: 140px;
    }

    #main div{
    top: 18px;
    }

    #search{
    left: 18px;
    top: 55px !important;
    }

    Cheers.

    ReplyDelete
  11. Lot's of good info on this blog! I had a question about the drop-down menu that flips between all the dynamic views. How do I remove it?

    ReplyDelete
  12. what if i want to highlight the outline of the search box when i click it. Just as it happens in gmail and google home page search bar. Also i want to change the text appearing in the box to "search this blog". How can it be done? I am using DV.


    Thanks

    ReplyDelete
  13. @Los Equis: See the link below, particularly under the 'Extra' section.

    Disable Certain Dynamic Views in Blogger

    @Harsh: Unfortunately, since we do not have access to DV's template, we can't do onlick functions. Only CSS styles are allowed at the moment. Same goes to the text in the search bar. Sorry.

    Cheers.

    ReplyDelete
  14. How to remove default header in blog example:flipcard,classic,magazine

    ReplyDelete
  15. @karzisonline: Use the following tutorial, and set your header's height to 0px. Good luck :)

    Add Header in Blogger Dynamic View

    ReplyDelete
  16. there is any way to change search bar default text ("Search") to something else?

    ReplyDelete
    Replies
    1. Unfortunately, there isn't. That would required HTML modification. Can't be done with CSS alone. Dynamic Views only allow CSS tweaks at the moment.

      Delete
  17. do you have any idea to add another search bar in dynamic views? because it's search bar searchs only in loaded posts!!
    I tried many cases like google custom search by placing it's code in a page or even using "...blogspot.com/search?q=123" but none of theme works. do you have any idea for it?
    thank you!

    ReplyDelete
    Replies
    1. Nope, I don't. I have seen a lot of complaints regarding the search bar. Let's hope they improve this widget, or allow us to add our own..

      Delete
  18. Not bad, though I was hoping this would help actually move the search bar in my college advice blog, into the header for example. Any ideas on that?

    ReplyDelete
    Replies
    1. You are seemingly using a non-dynamic view template. Why not just drag your search bar to sit below your header, by going to Dashboard - Layout?

      Delete
  19. I apply your code but I still see the Dynamic View original search box in my blog. Pls advise.

    Regards,
    Honeybee at http://healthybeautifulblog.blogspot.com/

    ReplyDelete
  20. I have a custom template of dynamic view. I want to delete the search box made by the designer but am not sure which one is the code. I have tried to delete the codes but when I preview, the search box is still there. Can you do me a favor by checking the codes? I'm afraid I may delete the wrong one. The designer didn't response to my question. Please help.

    Thank you. My blog is http://healthybeautifulblog.blogspot.com

    Regards,
    Honeybee

    ReplyDelete
    Replies
    1. I just checked my code, and it is still working. The reason it isn't working in your blog is because you're not using a Dynamic View template in the first place. Try this for your template:

      .cse{
      display: none !important;
      }

      Cheers.

      Delete
  21. Just did it - worked like a charm! thank you SO much!

    ReplyDelete
  22. Hi, thank you for your precious help!

    I would like to know how can I remove the subscribe link from dynamic views on my blog?

    ReplyDelete
    Replies
    1. Hi Anon,

      Where exactly can I find this subscribe link again?

      Delete
  23. Good I have hided default search bar , can I apply Google Custom Search Widget in Dynamic view...Give me tip to make my blog more searchable as dynamic view only searched from loaded contents not from all.

    ReplyDelete
    Replies
    1. Well, it isn't a good idea to place Google's custom search bar in Dynamic Views because I believe that's only gonna break your template. Let's wait and see if Google releases HTML/Javascript gadget for Dynamic Views anytime soon.

      Delete
  24. Totally loving your site! I've wanted to switch to dynamic view for a while, but hated the lack of customization, so THANK YOU!

    http://ibartinyourgeneraldirection.blogspot.com/

    I was able to remove the search bar, but it still cut off my blog description. The only way to make it fit is to shorten the description and/or reduce the font size of the blog title. Any tips on how to either:

    1) use the empty space where the search bar was, or
    2) reduce the font size of the blog description?

    Also, is there a way to make the blog title bold? I found the link for how to change the font size and color, but still unsure how to make it stand out more. Thanks!!!

    ReplyDelete
  25. 1) Yeah.. Increas your header size. It's quite tricky though. See this post:
    http://www.southernspeakers.net/2011/10/add-header-in-blogger-dynamic-view.html

    2) Use this CSS:

    #header .header-bar .title h3 {
    font-size: 10px;
    }

    3) Here:

    #header.header .title a h1{
    font-weight: bold !important;
    }

    Cheers!

    ReplyDelete
  26. Thanks, you're a hero. :)

    ReplyDelete
  27. Hey Yoga !
    Thanks for all your awesome tutos, it helps me a lot, I'm a shit in CSS...

    I would like to fix some stuff in my blog : amazing-nats.blogspot.com

    1/ Align left the views choice with "magazine" and "flipcard" in the list.

    2/ Center the pages links

    Tell me if my css can help you.
    Thanks in advance, you'r the best.

    Nats

    ReplyDelete
    Replies
    1. Hi Nats,

      I see you've got the pages links centered. But I'm not quite following with the first one. What do you mean by 'views choice'? Are you talking about the part where you get to choose which views to set? If yes, it is already left-aligned by default. What am I missing?

      Delete
    2. For the first point, "the part where you get to choose which views to set" is left aligned but the choices don't appear.

      For the second point, the problem is that the pages links are not exactly centered and I don't understand why. Margin problem ?

      Here is my CSS to help you :
      Thanks a lot !

      .header-bar #search{
      display: none !important;
      }

      #header .header-drawer.sticky, #header .header-drawer {
      top: 200px;}

      #header .header-bar{
      height: 100px;
      }

      #header .header-bar, #header .header-drawer.sticky, #header .header-drawer{
      top: 0px !important;
      margin-top: 0px !important;
      position: relative !important;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 100px;
      }

      #header-container {
      height: 140px;
      }

      .viewitem-panel .viewitem-inner {
      top: 35px;
      padding-bottom: 85px !important;}

      #header-container #header.header .header-bar span.title{
      background: url(https://lh4.googleusercontent.com/-gcdfolJAgkw/TwrpzUWkJoI/AAAAAAAARKU/IkrdW9TA2Ao/s912/header3.png)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 90px;
      }

      #header.header .title a h1, #header.header .title h3{
      display: none;
      }

      body.sidebar #main.hfeed #sidebar{
      position: absolute !important;
      }

      body.sidebar #main.hfeed #sidebar .item{
      background: #EEEEEE;
      }

      .header-drawer {
      width: 100% !important;
      overflow: hidden !important;
      }

      .tabs {
      float: left !important;
      position:relativ !important;
      margin: 0 auto !important;
      padding: 0 !important;
      left: 50% !important;
      }
      .tabs ul {
      float:left !important;
      position:relative !important;
      right: 50% !important;
      }

      .ss, .noborderdv img{
      box-shadow: none !important;
      padding: 0px !important;
      border: 0px !important;
      }

      #gadget-dock, .ss{
      top: 150px !important;
      }

      position: fixed !important;
      right: 0px !important;
      }

      Delete
    3. Hi Nat,

      Sorry for the late reply.

      1) I'm still not following. The choices are already left aligned, and they do appear. See this screenshot --> http://i.imgur.com/yQPNw.png

      2) As for your pages links, have you gotten this fixed? Coz it appears to be centered now.

      Delete
  28. Hi, Thanks for your tutorials they are working wonderfully. But no matter what I do I can't seem to get rid of the bar that used to read "classic, sidebar, mosiac" etc. i just want this horizontal line to be gone so you will just see my blog title image and then the sidebar and posts. Even when i turned the line to white on white there were still shadow lines that showed up! I want that line gone, please help!
    http://adventuringly.blogspot.fr/

    Also do you know how I can stretch out my title image to fit the top?
    Thanks!

    ReplyDelete
    Replies
    1. Hi adventuringly,

      I can think of a way, but I can't access your blog anymore. Everything okay?

      Delete
  29. Heard that Blogger has improved their search gadget but it does not look any different to me.

    Also, I wonder if there is a way to move it further to the right on the screen?

    Thanks Yoboy! Appreciate anything you might have to share!

    ReplyDelete
    Replies
    1. Oh did they? I've been away from the help forum for quite some time now, so a lot to catch up!

      As for your question, try this:

      #search{
      margin-top: -115px !important;
      }

      Cheers! :)

      Delete
    2. Here is the link to the improved DV search gadget: http://youtu.be/gGSiL30vZ94

      Sadly the new features do not seem to be working on my kansasbob.com blogs. Maybe Blogger has not released in full yet?

      Thanks for your help Yoboy with the positioning.

      Hope you are having a great week.

      Delete
    3. Nice. Well, I can see the upgraded search function in your blog:

      http://i.imgur.com/TAFB8.png

      Are you not seeing this?

      Delete
    4. I do see it there (http://fonefotos.kansasbob.com) but not at http://www.kansasbob.com. Did my search bar CCS mess it up? Here is what I use:

      .header-bar #search{
      margin-right: -5px !important;
      width: 75px !important;
      height: 25px !important;
      top: 128px !important;
      }

      Thanks for your help!

      Delete
    5. Doubt it.. You know what, let me just ask Lisa (the person who gives the overview in the Youtube link you posted above) how these things work, and if there's any conditions to it.

      I'll get back to you once she replies.

      Delete
    6. Yo Bob,

      Lisa said you need to be using jQuery 1.7.1. You need to edit your Dynamic View's HTML, and change script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript' to script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'


      To edit your Dynamic View's template, go to Dashboard >> Template. Note the address in your browser's address bar. It should look something like this:

      http://www.blogger.com/blogger.g?blogID=3462318257116246218#template

      Change the 'blogger.g' part to 'html'. It should now look something like this:

      http://www.blogger.com/html?blogID=3462318257116246218#template

      Hit 'Enter' on your keyboard and you should now be able to edit your Dynamic View's HTML.

      Delete
    7. That worked Yoboy! Thanks much and please say thanks to Lisa for me. Also wonder if the template would have eventually been updated to use the newer script?

      Delete
    8. Hi Bob,

      Lisa said templates that have not been HTML-ly modified will update automatically, whereas templates that have been modified (at least once) will have to be updated manually.

      Cheers!

      Delete
  30. Hi everyone, i followed the tuto but i still see my search bar, it is a custom template, can you help me please:) thank you very much for your time
    www.modderdiaries.com

    ReplyDelete
    Replies
    1. Hi Charley,

      You're using a non-dynamic view template, thus the reason why the code in this page isn't working for you. Anyways, I've taken a look at your site, and I can't find your search bar. Where exactly is it?

      Delete
  31. Is there a way to change the words "Search" to another language that blogger does not support?

    ReplyDelete
    Replies
    1. Hi Dream Noise,

      Unfortunately, there isn't a way to change the default input text, even to another English word. CSS alone couldn't do this, and we don't have what it takes to alter the main script of DV templates.

      Delete
  32. I modified some CSS that you suggested to someone trying to put the search bar in their header bar. It worked, but now the date ribbons get smushed, and I'm not sure how to fix it. Any help would be greatly appreciated.

    #header .header-bar{
    height: 165px;
    }

    #header-container{
    height: 140px;
    }

    #main div{
    top: 18px;
    }

    #search{
    right: 18px;
    top: 167px !important;
    }

    http://stuffedwlove.blogspot.com/

    PS Thanks for your AMAZING site. I wasn't sold on the dynamic view until I found your site and could modify it to my liking. You are awesome!

    ReplyDelete
    Replies
    1. Hi Chelsea,

      Thanks for your feedback, appreciate it :)

      As for your search bar, here, add this to your CSS (forget about the code that you have now):

      #search{
      top: 137px !important;
      }

      Cheers :)

      Delete
  33. Thank you Yoga for your great work. Thanks for solving the problems that Google does not.

    ReplyDelete
    Replies
    1. Most welcome HappyBee.. Appreciate it :)

      Delete
  34. Hello,
    I tried couple of times to edit my blog using custom CSS after changing to dynamic view. I followed your instructions for removing the search bar and it won't apply anything. Have you run into this before?

    ReplyDelete
    Replies
    1. Hi MB,

      That's odd.. Have you tried using a different browser? Let's have a look at your blog. What's your blog's address?

      Delete
  35. Hi,

    I have come across the same problem as well. Last year when I created a new blog and first used dynamic view, the codes worked perfectly, but a year later when I created a new blog using dynamic view, the css codes no longer work. I don't know exactly why. Is there anyway to fix this?

    Thank you (:

    ReplyDelete
    Replies
    1. Hi Evi,

      Could you check if your code is still there after closing and re-opening your browser? There's a bug lurking around that isn't letting users to save their code. Once they close their blogs, the code disappears. Check if this is the case in your blog.

      Delete
    2. I think it actually might be :(

      I actually deleted my blog and created a new one just now, thinking it might help, but it's still the same. And come to realize that even when I change only the background color, it doesn't even save.

      What is this terrible bug? It won't even save one thing.

      Delete
    3. Terrible, indeed. Here's the discussion thread, in case you want to follow up with the updates:

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

      Some users have reported success with Internet Explorer browser. Could you give it a try?

      Delete
  36. Merhaba Yoa
    Seach Box calismiyor.Yapabilecegin bir kod var mi ?

    ReplyDelete
  37. Can we place Google Custom Search in Blogger Dynamic View?
    please help me on it!
    www.thetechgets.com

    ReplyDelete
    Replies
    1. I don't see a way forward for now. Maybe when the HTML/Javascript gadget becomes available, we'll have few options up our sleeves..

      Delete
  38. Yoga you an angel. You have been helping me fight the Blogger Dynamic gremlins all day.

    I'm guessing you're going to say something about how we don't have access to their html, but is there any way to change the color of the search bar? It's really messing up my palette.

    Thank you, thank you, thank you, thank you, thank you...

    Katie

    ReplyDelete
    Replies
    1. Hi Katie,

      Nope, this time we don't need to HTML, as we can directly inject a code that could change the bar's color.

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.


      #header input#search, #spk{
      background-color: black !important;
      }

      Cheers and God bless! :)

      Delete
  39. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Before I even help you, could you explain why I'm seeing codes from my blog posted as contents in your blog?

      Delete
  40. I am desperately looking for a way to remove the flipdown menu that saysclassic, flipcard, magazine, mosaic, etc." and maybe the "home" button as well (all on top left). And if possible remove the subscribe on the right and the tweet, g+, and like buttons at the bottom. I am using dynamic view. This is my blog : classicjazzstandards.com

    Thank you very much,

    J

    ReplyDelete
    Replies
    1. Hi J,

      The following should help you remove the links in your header bar:

      #views, #pages{
      display: none !important;
      }

      To remove your gadget and share buttons, see the links below:
      http://www.southernspeakers.net/2013/08/removing-subscribe-gadget-from-bloggers.html
      http://www.southernspeakers.net/2011/10/hide-share-buttons-in-blogger-dynamic.html

      Cheers :)

      Delete
  41. I was wondering if it would be possible to have an expandable search bar, like when you minimise the size of your browser window (widt) it wil get some kind of an icon, i want my search bar to be like that every time.. www.iampeer.com

    ReplyDelete
    Replies
    1. On a non-dynamic template, maybe yes. But I doubt if this can be done ina dynamic template.

      Delete
  42. Thank you very much! My blog has improved with your amazing tips and tricks. jaysonsnts.blogspot.com

    ReplyDelete
  43. Any way to add a custom search to a dynamic blog?

    ReplyDelete
  44. How can I rename text "Search" in this search bar? I have my blog in russian, but this bar display "Search" in English. I want to translate it.

    ReplyDelete
    Replies
    1. Hello Alex,

      I'm afraid this isn't something that can be controlled via CSS.

      Delete
  45. Hi Yoga,

    May I first say that you are tremendously helpful and wise and thank you for all the tips you have shared that I have been playing about with for the last couple of weeks. I wanted to know if it's possible to move the search bar in the header further over to the left, not by much but by perhaps an inch or two?

    Cheers again!

    ReplyDelete
    Replies
    1. Hi Caveman,

      Those are some big words. Anyways, sorry for the late reply - just got back from my honeymoon. As for moving the search bar to the left, this should do the trick. Add this to your 'Add CSS' box:

      #search{
      margin-right: 125px !important;
      }

      Cheers!

      Delete
  46. Hi,
    is anyway that to remove the whole bar, Classic Flipcard Magazine Mosaic Sidebar Snapshot Timeslide ? including the line too. Also I would like to make customize categories. Here is my blog, http://teenvinistudio.blogspot.com/

    Thanks so much, I really need help.

    ReplyDelete
  47. Hello, again

    I able to move the whole bar by used this quote the one you showed. It's possible to make customize at the bar with out a line on the up here is my site, http://teenvinistudio.blogspot.com/

    #header .header-drawer {
    display: none;
    }

    Thank you so much.

    ReplyDelete
    Replies
    1. Hello Vini,

      Sorry for the late reply. See if this is what you're looking for:

      #header .header-bar{
      box-shadow: none !important;
      padding: 0px !important;
      border: 0px !important;
      }

      Delete
  48. I have been all around the web and no offered solution (remove search bar) worked. But yours did first time:

    .header-bar #search{
    display: none !important;
    }

    Thank-you!

    I've found dynamic view solutions that actually work here before :)


    {I had to remove as no home button option after search leaves limited pages up on screen).

    ReplyDelete
  49. Dealing with searching bar. I've noticed that while mobile on different views the searching bar overrides the title. Only while in classic view the search bar is small. How to make it on the other views?

    ReplyDelete
    Replies
    1. Hi Marcin. Is this happening when your blog is viewed on all mobile devices? Could you share your blog's URL?

      Delete
  50. My blog adress is :
    http://developerschoolplbeta.blogspot.com/

    I have an andoid device with Internal Browser and Chrome. The same is on those browsers. Only in classic view the search bar is smaller. But I don't use this view.

    ReplyDelete
    Replies
    1. Hello Marcin,

      I couldn't replicate this on my device. Could you share a screenshot of how your page looks like on your device?

      Delete

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