Change Position of Search Bar in Blogger Dynamic Views | CutieCoding

Estimated Reading Time:
I could be without every cool feature of Blogger's dynamic views templates BUT for the search functionality. #TrueStory



I know what you are thinking.

You (hands at your waist): A blog is meant to let the mind wander, not be super-searchable. The user navigation needs to make you get lost in the wonder of your blog -- like a forever 21 store -- not just type whatever you want, right? -- Do you think this is a supermarket.

Me (pouting): But I love it when I can simply search and find out if the blog genuinely has what I want. And, if it shows a preview of what context it's been used in, that's even better. With a picture and the date too? Marvelous!

That's why I love the search box in the dynamic views template. Take a look at this screenshot!


Here's how you can change the position and stylize the search bar in the dynamic views template:

HOW TO MOVE & CUSTOMIZE THE SEARCH BAR IN BLOGGER'S DYNAMIC VIEWS TEMPLATES

THE TL;DR Version

  1. Log in to Blogger.com.
  2. Click on the blog you want to edit. The one that uses a dynamic views template.
  3. Go to ‘Template’ and click on ‘Customize’ under the ‘Live on Blog’ frame.
  4. Then, move to ‘Advanced’ on the left panel and ‘Add CSS’.
  5. Paste the code below at the end of any other CSS code you might have there. Play around with the highlighted values to match your blog's design.
  6. Press 'Apply to Blog'.
  7. World Done-nation!

/* ADJUST THE SEARCH BAR */
#header input#search {
  right: 10%;
  top: 2.5em;
  z-index: 3000 !important;
  color: #ff0080 !important;
  box-shadow: inset 1px 1px 2px #000
}


Let me know in the comments below if you have any questions. 

...o0o...


Ray out! Peace!

Image credit: the photo of the building with 'search' letters propped against it is by Pleuntje.


READ MORE BLOGGER TIPS ON CUTIECODING

Comments

Popular Posts