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.
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;
}
Thank you! Worked perfectly!
ReplyDelete@Katie: You're welcome :) Cheers...
ReplyDeleteIs 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@Anon: Use this CSS:
ReplyDelete.header-bar #search{
position: relative;
top: 167px !important;
right: 30px !important;
}
You need to change the two numeric values above to fit your blog.
Is it possible to remove the blogger loader!!??
ReplyDelete@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.
ReplyDeleteThe preloader in dynamic view is it possible to hide it?
ReplyDeleteThanks!
@Anon: I'm about to publish a post on it tomorrow, stay tuned. Cheer..
ReplyDeleteIs 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@Alex: Add the following to your CSS:
ReplyDelete#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.
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?
ReplyDeletewhat 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.
ReplyDeleteThanks
@Los Equis: See the link below, particularly under the 'Extra' section.
ReplyDeleteDisable 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.
How to remove default header in blog example:flipcard,classic,magazine
ReplyDelete@karzisonline: Use the following tutorial, and set your header's height to 0px. Good luck :)
ReplyDeleteAdd Header in Blogger Dynamic View
there is any way to change search bar default text ("Search") to something else?
ReplyDeleteUnfortunately, there isn't. That would required HTML modification. Can't be done with CSS alone. Dynamic Views only allow CSS tweaks at the moment.
Deletedo you have any idea to add another search bar in dynamic views? because it's search bar searchs only in loaded posts!!
ReplyDeleteI 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!
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..
DeleteNot 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?
ReplyDeleteYou 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?
DeleteI apply your code but I still see the Dynamic View original search box in my blog. Pls advise.
ReplyDeleteRegards,
Honeybee at http://healthybeautifulblog.blogspot.com/
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.
ReplyDeleteThank you. My blog is http://healthybeautifulblog.blogspot.com
Regards,
Honeybee
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:
Delete.cse{
display: none !important;
}
Cheers.
Just did it - worked like a charm! thank you SO much!
ReplyDeleteYou're most welcome :)
DeleteHi, thank you for your precious help!
ReplyDeleteI would like to know how can I remove the subscribe link from dynamic views on my blog?
Hi Anon,
DeleteWhere exactly can I find this subscribe link again?
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.
ReplyDeleteWell, 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.
DeleteTotally loving your site! I've wanted to switch to dynamic view for a while, but hated the lack of customization, so THANK YOU!
ReplyDeletehttp://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!!!
1) Yeah.. Increas your header size. It's quite tricky though. See this post:
ReplyDeletehttp://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!
Thanks, you're a hero. :)
ReplyDeleteYou're most welcome :)
DeleteHey Yoga !
ReplyDeleteThanks 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
Hi Nats,
DeleteI 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?
For the first point, "the part where you get to choose which views to set" is left aligned but the choices don't appear.
DeleteFor 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;
}
Hi Nat,
DeleteSorry 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.
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!
ReplyDeletehttp://adventuringly.blogspot.fr/
Also do you know how I can stretch out my title image to fit the top?
Thanks!
Hi adventuringly,
DeleteI can think of a way, but I can't access your blog anymore. Everything okay?
Heard that Blogger has improved their search gadget but it does not look any different to me.
ReplyDeleteAlso, 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!
Oh did they? I've been away from the help forum for quite some time now, so a lot to catch up!
DeleteAs for your question, try this:
#search{
margin-top: -115px !important;
}
Cheers! :)
Here is the link to the improved DV search gadget: http://youtu.be/gGSiL30vZ94
DeleteSadly 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.
Nice. Well, I can see the upgraded search function in your blog:
Deletehttp://i.imgur.com/TAFB8.png
Are you not seeing this?
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:
Delete.header-bar #search{
margin-right: -5px !important;
width: 75px !important;
height: 25px !important;
top: 128px !important;
}
Thanks for your help!
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.
DeleteI'll get back to you once she replies.
Yo Bob,
DeleteLisa 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.
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?
DeleteHi Bob,
DeleteLisa 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!
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
ReplyDeletewww.modderdiaries.com
Hi Charley,
DeleteYou'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?
Is there a way to change the words "Search" to another language that blogger does not support?
ReplyDeleteHi Dream Noise,
DeleteUnfortunately, 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.
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.
ReplyDelete#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!
Hi Chelsea,
DeleteThanks 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 :)
Perfect fix! Thanks!!
DeleteExcellent! :)
DeleteThank you Yoga for your great work. Thanks for solving the problems that Google does not.
ReplyDeleteMost welcome HappyBee.. Appreciate it :)
DeleteHello,
ReplyDeleteI 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?
Hi MB,
DeleteThat's odd.. Have you tried using a different browser? Let's have a look at your blog. What's your blog's address?
Hi,
ReplyDeleteI 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 (:
Hi Evi,
DeleteCould 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.
I think it actually might be :(
DeleteI 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.
Terrible, indeed. Here's the discussion thread, in case you want to follow up with the updates:
Deletehttps://productforums.google.com/forum/#!topic/blogger/S_uVwRQQrOY
Some users have reported success with Internet Explorer browser. Could you give it a try?
Merhaba Yoa
ReplyDeleteSeach Box calismiyor.Yapabilecegin bir kod var mi ?
I'm sorry?
DeleteThank You Yoga
DeleteDon't mention it Adnan :)
DeleteKnowledge of subject matter if you find investigating yoga.
DeleteSee you soon.
Can we place Google Custom Search in Blogger Dynamic View?
ReplyDeleteplease help me on it!
www.thetechgets.com
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..
DeleteYoga you an angel. You have been helping me fight the Blogger Dynamic gremlins all day.
ReplyDeleteI'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
Hi Katie,
DeleteNope, 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! :)
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
ReplyDeleteThank you very much,
J
Hi J,
DeleteThe 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 :)
Before I even help you, could you explain why I'm seeing codes from my blog posted as contents in your blog?
ReplyDeleteI 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
ReplyDeleteOn a non-dynamic template, maybe yes. But I doubt if this can be done ina dynamic template.
DeleteThank you very much! My blog has improved with your amazing tips and tricks. jaysonsnts.blogspot.com
ReplyDeleteAny way to add a custom search to a dynamic blog?
ReplyDeleteSeems unlikely, sorry..
DeleteHow 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.
ReplyDeleteHello Alex,
DeleteI'm afraid this isn't something that can be controlled via CSS.
This was so helpful thank you!
ReplyDeleteHi Yoga,
ReplyDeleteMay 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!
Hi Caveman,
DeleteThose 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!
Hi,
ReplyDeleteis 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.
Hello, again
ReplyDeleteI 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.
Hello Vini,
DeleteSorry 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;
}
I have been all around the web and no offered solution (remove search bar) worked. But yours did first time:
ReplyDelete.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).
Hey glad you found it helpful :)
DeleteDealing 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?
ReplyDeleteHi Marcin. Is this happening when your blog is viewed on all mobile devices? Could you share your blog's URL?
DeleteMy blog adress is :
ReplyDeletehttp://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.
Hello Marcin,
DeleteI couldn't replicate this on my device. Could you share a screenshot of how your page looks like on your device?