Repositioning Blogger Title:
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 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.
.titlewrapper{ position: relative; top: 10px; left: 130px; }Changing the top-attribute's value will adjust the title's vertical position. Changing the left-attribute's value will adjust the title's horizontal position. And yes, you can use negative values, for example:
.titlewrapper{ position: relative; top: -10px; left: -30px; }To align your title to either left, right or center, you don't have to use the above code, as you can directly use the code below:
.titlewrapper{ text-align: center; }You can change the attribute value from 'center' to 'right', 'left' or 'justify'.
Repositioning Blogger Description:
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.
Similarly, to align your description, use the code below instead:
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.
.descriptionwrapper{ position: relative; top: -60px; left: 440px; }
Similarly, to align your description, use the code below instead:
.descriptionwrapper{ text-align: center; }Easy right? Have fun!
Hey YoboY
ReplyDeleteI wanted to say thanks for the assistance with adding the image as background behind text. I was not able to reply on the blogger forums for some reason. If you wanna see the results here's the article I posted with your code:
http://chatterboxdude.blogspot.com/2010/12/hey-have-you-heard-about-community.html
Again. Thank you.
Chatterbox Chuck: Looking good. Glad it worked. You can do wonders with CSS.
ReplyDeleteYes, that's what I was looking for! Many thanks!
ReplyDeleteLeigh: Happy to help, as always. Merry Christmas.
ReplyDeleteThank you so much for your clear tutorials! I had almost given up on trying to 'fix' my blog when I came across someone on Blogger's site recommending YOUR site for clear tutorials. You explain things so clearly that I have been able to make changes without the aid of my teenagers! THAT is saying something! LOL! Thanks again for everything you do.
ReplyDelete@Angela: I'm flattered, thanks :) I'm glad my posts have been helpful. Should you have a question for which you can't find the answer in this blog, feel free to contact me and I'll try my best to help you out. Cheers and God bless.
ReplyDeleteHello! Is it possible to have the blogger header at the bottom of the page? if so do i simply alter the code to read "bottom" instead of "top"?
ReplyDeleteWell, not easily possible. You'd have to dissect your HTML, cut out your header part, and put it at the bottom of your blog. That isn't easy coz there are lots of dependencies that you'd have to take care of.
DeleteThank you SO much for the awesome tutorials! I have spent the entire day working with them to get my blog the way I want it. However, I can't seem to find anywhere on your site how to re-position the blog description in dynamic views. It's driving me crazy! Can you point me in the right direction?
ReplyDeleteHi Sondra,
DeleteI might be able to. Where would you like to reposition it?
Thank you so much for your tutorial as they have been of great help. I too have a query similar to Sondra. I want to place the description right below the blog title, like this:
DeleteBlog title-yada yada yada
blog description- blah blah blah blah....blah
What should i do???
Hi Sudhaa,
DeleteIt very much depends to the kind of template that you use in your blog. Can I have a look at your blog? What's your blog's address?
Thanks for the quick response Yoga. This is my blog
Deletehttp://shadesforduskywomen.blogspot.in/
and thanks for looking in to it. One more query??!! IS there anyway i could add a side bar to the existing dynamic view???? So that i can put more pics/ads...stuff like that
Hi Sudhaa,
DeleteSorry for my late reply. So I've seen your blog, and your description is nowhere to be found. What am I missing?
As for the sidebar, unfortunately, Dynamic View doesnt support one just yet.
Cheers :)
I'm looking for my blog description as well. The gadget in which i have entered the blog description still contains the description.At times when the blog is loading i can see it and the blog appears without the changes i made to it like changing the color and position of the gadget and sticky header and things like that. It happens at random but goes to customised appearance when i load it again.
DeleteTook me awhile, but this should work. Let me know how it goes:
Delete#header .header-drawer.sticky, #header .header-drawer {
top: 69px;
}
#header .header-bar{
height: 100px;
}
#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: 55px !important;
height: auto !important;
}
#header-container #header.header .header-bar span.title{
height: 100px;
}
#header .header-bar .title h3{
color: white !important;
position: relative !important;
top: -50px !important;
}
Cheers and God bless :)
Woohoo it works!!! You are awesome :)
DeleteThank you so much!!!
Hi,
ReplyDeleteI'm not having any luck with these codes. Can you help me please? I want it centered. I would really appreciate it. Thanks
http://www.mysecretromancebookreviews.com/
Hi Taryn,
DeleteI can't see your blog title/description at all.. This is what I'm seeing:
Screenshot
What am I missing?
Most welcome :)
ReplyDeletethank you so much. very useful. I have done. Now one thing I need to do. Please can you teach me that How can I center labels on blogger?
ReplyDeleteThank you.
Sure thing, but it depends on the kind of template that you're using. Let's have a look at your blog, what's your blog's address?
DeleteCheers..
I'm trying to center my blog description in the header also. I pasted the code in and nothing changed. Not sure what i'm doing wrong but would love it if you could help. Here's my blog: http://laurengrabelle.blogspot.com/
ReplyDeleteThanks.
Oh, no. I was the anonymous recent poster (a few hours ago) and playing around with the templates my blog changed horribly and i can't figure out how to get it back! Yikes! So what you will see in the link i sent is not what i want. I'll try to figure out how to get it back and then maybe you can help me. Thanks.
ReplyDeleteHi there..
DeleteSend me a copy of your current template, and I'll see if I can edit it to make it look like your original template. To get a copy of your current template, go to Dashboard - Templates - Backup/Restore - Download - Full Template. Next, upload the .xml file that you've gotten to a file-sharing site, like rapidshare.com or something, so that I could download a copy of the template.
Cheers.
Thank you very much! This is the only CSS worked for me. I have been searching for many days!
ReplyDeleteKeep posting!
Glad it worked Merve :)
DeleteJust like you posted for the dynamic view description being centered... can we do the same for the Blogger TItle in Dynamic View??
ReplyDeleteSure thing. Here, try this:
Delete.header-bar .title{
text-align: center !important;
}
Cheers :)
thanks for the tutorial :D
ReplyDeleteExactly what I was looking for. Thanks for the help!!
ReplyDeleteDon't mention it :)
DeleteThank you thank you so much!!!! I had been literally breaking my head over the positioning of the Title and description! You are a saviour!! Bookmarking your page!!!
ReplyDelete<3
You are most welcome :)
DeleteHi and Big Thanks! "Southern Speakers" - cool name, by the way.
ReplyDeleteThanks Ela! :)
DeleteWe're from the southern part of Malaysia, hence the name :P
Thanks for the post, it really helped me.
ReplyDeleteGlad it helped! :D
DeleteCheers and God bless!
Hi yoboy, I am having problems on my blog. How will I begin the css code to overwrite the default theme settings? It is something like this, https://www.dropbox.com/s/nq1zcb8di50q0vw/LIKE%20THIS.jpg I am just an entry-level web designer. Please help. Thanks
ReplyDeleteHi Anon,
DeleteI'm not sure if I'm getting you right, but you should be able to find your CSS definition in your template, by accessing Dashboard - Template - Edit HTML.
Cheers :)
tnx man it helped alot.... :)
ReplyDeleteDynamic Views Description under the header only has a very limited number of characters. I read all your titles and you don't have anything for this. I can't use Dynamic Views because my Blog Description is long. Is there a solution? Thanks!
ReplyDeleteInteresting.. I think this can be done. Can I have a look at your blog though, just to get an estimate on how long of a description we're talking about?
DeleteThe address is below. It is not Dynamic Views now because of stated problem. I'm amazed that no one else has encountered this problem. In Dynamic Views my Blog Description would only be the first 4 - 5 words !!
Deletehttp://www.hound-dog-media.com/
Thanks
Hi Jerry,
DeleteWhich one of the seven views were you primarily using (Classic, Magazine, etc..)?
I was only using Magazine. Did not try any of the others because they did not fit with my blog.
DeleteI've published a post on this. See if it helps:
Deletehttp://www.southernspeakers.net/2014/01/show-description-text-in-full-in.html
Yoga could you tell me how to put my blog description in 2 columns, aligned left, not centered? It's poetry (unless you work for a literary magazine and don't believe in magic).
ReplyDeleteHmmm.. Interesting.. I'll give it a try.. Could you point me to your blog? I wouldn't wanna start working on the wrong template to find the tweak isn't compatible with your blog, if you know what I mean.
Deletesir my website is
ReplyDeletehttp://actresschillz.co.vu
i want increase the header image size
the menu bar comes in of my header image pls help me sir
You're using a third party template. It is best to contact the maker of this template for any mods.
Deletehi yoga, thank you so much for your great help.
ReplyDeleteplease i need to centralize my tabs text. how can i do it? i already centralized my blog title. thanks to you. my blog: http://bettymanousos-focus.blogspot.com
thank you so much!
This should do for now. You may have to re-adjust the percentage value in the future if your tab-width changes (you will know when it happens):
Delete.PageList ul{
display: block !important;
width: 69% !important;
margin-left: auto !important;
margin-right: auto !important;
}
my picture in my header is coming out so big that it is cutting off the picture. how do i fix it?
ReplyDeleteWhat's your blog's address?
DeleteThank you very much! Thought I might give up on the description because I couldn't make it perfect and all others only gave alignment code. Thank you again, I mean it.
ReplyDeleteHi Yoga! I am trying to align the blog title vertically in the middle. Here's the code I used from one of your posts:
ReplyDelete#header .header-drawer.sticky, #header .header-drawer {
top: 134px;
}
#header .header-bar{
height: 100px;
}
#header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
top: 100px;
}
#header-container {
height: 145px;
}
.viewitem-panel .viewitem-inner {
top: 100px;
padding-bottom: 120px !important;
height: auto !important;
}
The title aligns to the top of the page, and some part of the title is chipped off from the top. This is for a friend and she needs it to be centred, horizontally and vertically. Could you help, please?
We're working on a test blog for now since she already has viewers on her "production" one. The address is http://ccftdraft.blogspot.in/
Hello Ram,
DeleteHave you got this sorted? Perhaps this can help:
http://www.southernspeakers.net/2012/02/center-title-in-blogger-dynamic-view.html
Hi Yoga,
ReplyDeleteI used this code...
#header .header-bar .title {
height: 100px;
line-height: 100px;
}
Thank you! :)
thanks so much - really easy and perfect result :)
ReplyDeleteI can't believe that after HOURS of trying to change the font size and position of my blog description I found your website, AND SUCCEEDED! THANK YOU !!!!!!!!!
ReplyDeleteI cannot for the life of me think why Blogger doesn't make this as easy as changing the title position and font.
Thank you, thank you!!!!!! I tried so many things which didn't work and there it is! Thank you so much for these great instructions :)
ReplyDeleteHi, I've just changed the theme of my blog and now my blog description has been cut off because it's put it next to the blog title but I would like it underneath the title. I've been playing around with lots of different codes but nothing is working so could you take a look for me please?
ReplyDeleteMy blog is: http://justagirlwithacameraexploringtheworld.blogspot.co.uk
I'd like the blog description ("Travelling it leaves you speechless.....") underneath the title (One girl, various cameras.......) if that's possible.
Also is there any way to change the font sizes of blog title and description as I'd like to make the title bigger and the description a little smaller. Any help is greatly appreciated thank you :)
Hi there,
DeleteSee if this is what you're looking for:
http://www.southernspeakers.net/2014/10/description-below-title-in-blogger.html
Cheers!
Hii Yoga,
ReplyDeleteSo nice, very useful events.
It still works! Thank you!!!
ReplyDeleteYou just erased my ignorant and am very happy for this awesome guidelines.
ReplyDelete