Flexibility in customizing blog header's position is vital to any blog tools. In case of blogger, it is very easy to align your header to the middle of a web browser's screen.
Step 1: Sign in to your blog Visit Blogger Blog home page at: http://blogspot.com/ or http://www.blogger.com/ and sign in with your Google account.
Step 2: Go to 'Template Designer' page
A Google account can be used to manage many blogs. When you sign in to your blog, you are presented with the main dashboard. You can click Design link and then 'Template Designer' tab under your chosen blog.
Step 3: Align your blog's header
All you need to do is overriding the 'header-inner' id element in order to align your header to the center of the screen.
- In your blog's 'Template Designer', click Advanced / Add CSS.
- Enter the following CSS code to 'Add Custom CSS' tab.
- Click 'Apply to Blog' button to finish modifying CSS styles of your blog. Now return to your blog's home page you should see your blog's header at the middle of your web browser's screen.
Notes:
- You can also align your title by modify the .header-inner .Header .titlewrapper element.
- Go to Design -> Edit HTML. Click 'Expand Widget Templates'
- Locate the .header-inner .Header .titlewrapper element. Modify the padding css element.
- Padding-left is used to move your title to the left, for example
1 comment:
thank you so much. So far only your code worked :D
Post a Comment