 |
| Before |
 |
| After |
Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
All the best!
.tabs{
width: 80% !important;
text-align: center !important;
}
If the links aren't exactly centered, adjust the value 80% accordingly till they are centered. Since the Template Designer's live preview box is not working, you need to click on 'Apply to Blog' and see the changes on your actual blog. Using a high 'width' value could force your pages links to go into a drop-down mode.All the best!
Thanks again Yoboy, this worked perfectly for my blog. Now I'm just trying to figure out how to put my "Welcome" post as a permanent post at the top of the page with the rest of the post's following. Let me know if you have any suggestions.
ReplyDeletemrandmrsrobison.blogspot.com
Hi Corey,
DeleteHave you tried editing the post, and set its date to reflect some date far in the future? That way the post will always be 'sticky' at top.
Thanks a bunch Yog.
ReplyDeleteSorry for being a bit off topic, but any chance there is a way to make your header bar sticky? I don't want it to disappear when I scroll down. And getting rid of the header bar's under shadow would be nice too.
Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
Delete#header .header-drawer.sticky{
margin-top: 0px !important;
position: fixed !important;
top: 65px !important;
}
#header .header-drawer, .ss{
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
Dude, I'm still amazed that your tuts ACTUALLY work. Well done and keep it up!
ReplyDeleteThanks mate :)
DeleteHi mate my blog is http://www.game-modo.com. I have been having some issues with the dynamic views, if you press on About Modo you will notice that the Gadget menu is over the top of the scroll bar. How Can I fix this?
ReplyDeleteHi Richard,
DeleteLooks like the gadgets overlap on the scrollbar by default in static pages. Here's what you can do. Edit your static pages - Switch to HTML mode (as opposed to compose mode) - Add the following HTML at the bottom of your page. Do this for all your static pages:
<style>
#gadget-dock {
right: 17px;
}
</style>
Cheers!
i'm sorry,, but on my blog can't
ReplyDeletecan u tell me, how to fix it?
here dis link
ReplyDeletelsmarketgroup.blogspot.com
Hi Laode,
DeleteI don't see the code anywhere in your template. Could you leave the code on in your template and get back to me?
@Yoboy, i have a question, this is not related to this post but please answer me, as you inspired me. I have a blog stramaxon.blogspot.com, but now i want to buy a domain, but the question is will it effect my search rankings and Alexa ranks ? I have seen many blog's search rankings going down due to change of address. Hope you will reply.
ReplyDeleteHi Deepak,
DeleteI'm not an expert on rankings, but based on my personal experience, yes you'd notice a slightly significant drop in the ranking - as it'll take a while for your pages to get re-indexed. But if you maintain your consistency, you can recover from it quickly. To answer your question, yes it will temporarily affect your ranking.
this didn't work for me...can you please help?! also...I'm wondering why when I click on one of the tabs, the font/color/alignment changes??
ReplyDeleteThanks!!!
http://lindsaydaniellephotography.blogspot.com/
Hi Lindsay,
Delete1) You're nt using a Dynamic View template, whereas the tweak above is for Dynamic View templates only. In your case, add this to your CSS:
#Label3 .widget-content ul{
position: relative;
left: 220px !important;
}
Adjust the value 220px accordingly, if necessary.
2) To prevent that weird changes when you click on one of the tabs, add this to your CSS:
.tabs-inner .widget li span {
color: #000000;
display: inline-block;
font: 14px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
padding: 0.6em 1em;
}
Cheers :)
oh my goodness - THANK YOU!!! I've been going crazy trying to figure this out!! :D
DeleteNo biggie :) Glad you got it sorted!
DeleteCheers :)
Is there any way to snap the tabs directly to the center? without the width % command?
ReplyDeleteThank you
Hi Stephen,
DeleteYou could try this in your case.. It still has the width command but you don't have to adjust it:
#header #pages{
width: 100% !important;
}
#header #pages.tabs ul{
width: 100% !important;
text-align: center !important;
}
There is another way, which is to position your menu to a static location. But in Dynamic View, the width of your blog is not a fixed entity. Which means a centered position in your computer doesn't necessarily mean a centered position in your reader's computer.. So, yeah, you need to somehow make it dynamic with the 'width' command..
Cheers :)
Guys I just wanna help with my own experience, the code below help me to centered my page very well after I read all the comment on this post and combine it with another post's comment. Thank you Yoga, you are the best!
Delete.tabs{
width: 81%; !important;
text-align: center !important;
}
#pages{
margin-left: 10% !important;
}
Thanks Lisa ;)
DeleteThank you so much for the awkward selected font tip, that had been driving me insane! However now whenever on of the label headers are selected the separator lines get all wonky. :( Do you know how to remove them? Thank you so much! xoxo
ReplyDeletehttp://thechicconfessions.blogspot.com/
Hi Haley,
DeleteThis should fix it. Add it to your 'Add CSS' box:
.tabs-inner .widget li span{
border-left: 1px solid white !important;
}
Cheers :)
Will the same code work for centering in other that dynamic view template??
ReplyDeleteShould work on all Dynamic View templates. The code for non-dynamic template varies, depending on the template used (there are like hundreds of non-dynamic templates out there, if not thousands.)
DeleteNot sure what I am doing but I can not get codes to work for me. Every trick I am trying from your site is not working correctly. I would like to be able to have some page tabs listed as blogger initially puts them (on the left hand side of the screen) and then I would like to move some to the right hand side of the screen. Can you take a look at peoniesandhoney.blogspot.com?
ReplyDeleteI appreciate your help!
Replied to one of your newer comments --> Your Comment
DeleteHey Yoboy,
ReplyDeleteI ve been tweaking my site karsouny.com
and i cant seem to center the tabs. they re always coming a buit to the left. And if i go beyond 92% i just goes to the drop down mode.
Any idea what i should do?
Also, how do i remove the
Posted by, date and comment box and labels?
Thanks! :)
Hi Karsouny,
DeleteAre you using a small-screened device? Coz when i tried setting it to 100% in my 14-inch laptop, it appears fine. Here's a screenshot --> http://i.imgur.com/TzuW6.png
In any case, set it to the highest number that it could go before reverting to a drop down menu, and get back to me with the code still in your blog. I'll see if there's an alternative to adjusting the left-margin.
And this is how you remove your post footers:
.article-footer, .comments{
display: none !important;
}
Cheers :)
Hi guys!
DeleteI have the same problem. I've tried on numerous resolutions, it's just a few pixels more to the left instead beeing centered as it should be. Can you help?
Hi Vlad,
DeleteWhat's your blog's address?
Hi Yoga,
ReplyDeleteI have a problem with my CSS code. Whatever I write into it, it is not saved. I push the 'Apply to blog' button, but nothing is changed. I tried it several times. And the other strange thing is that a few lines are added to the end of my CSS code, but I don't remember writing it. This is the additional text:
#pages ul li a, .ss.menu-item{
color: #e4e4ea !important;
}
I couldn't delete it because of the saving problem, and I don't even know if it is needed. Could you help with this, please? My blog is here: http://igyvarrok.blogspot.hu/
Thanks!
Hi Vegazus,
DeleteThere is a known bug lurking around the Template Designer, that isn't letting users to save their settings. Here's the discussion thread:
https://productforums.google.com/forum/#!topic/blogger/S_uVwRQQrOY
Some users have reported success with IE. Give it a try, and let me know how it goes.
Cheers :)
Thank you for your quick answer! I wrote to that thread and hope that they can fix it soon. I will keep you informed.
DeleteThanks! :)
I could make it in Internet Explorer! :) Thank you for your help!! :)
Deletethanks for the coding :')
ReplyDeleteDon't mention it :)
DeleteHi! I centered the page tabs but how to get rid of the separator line on the left (in front of the first tab "Blog"). It looks weird with it in the front. Thank you! Your tutorial are awesome!
ReplyDeleteNever mind regarding my earlier comment!
ReplyDeleteHi Yoga!
ReplyDeleteThanks for all your great tutorials, you've helped me SO much! For this particular tutorial, I was wondering, I have 4 tabs, is it possible to keep the first three on the left and put the last one on the right?
http://tinypic.com/r/dra0r6/6
Those four ''follow'' buttons you see, they are in one tab, and I would like to move them to the right of the screen leaving the other tabs where they are.
Hope you can help me! Thanks a bunch!
Hi Anna,
DeleteHere, use this code - wrote it for your blog:
#pages, #pages ul{
width: 100% !important;
}
#pages ul li{
display: inline-block !important;
}
#pages ul li:last-child{
position: relative !important;
float: right !important;
top: -34px !important;
}
Cheers :)
hello!
ReplyDeleteI have a problem with the alignment. I had to tweak the code like this:
.tabs{
width: 65% !important;
text-align: right !important;
}
, and it gets aligned to the center, but if I open the webpage in a smaller window the header links tend to align to the left.
Is there a code to make the header links remain stick to the center?
http://mateigheorghiu.blogspot.ro/
Thank you again for your tutorials!
George
Hi there,
DeleteWhy not use this?
.tabs{
width: 100% !important;
text-align: center !important;
}
I tried this before, and the result is that it makes all my links dissapear in the left margin under "Pages":
Deletehttp://mateigheorghiu.blogspot.ro/
I tried before to change the width - exactly as it was in this tutorial, to 80%, but it makes the bar to be aligned on the center but to the left.
This is how I ended up with:
.tabs{
width: 65% !important;
text-align: right !important;
}
it was the only possible solution to make the bar stay in the center - but still, when I open the page in a smaller window, it makes the bar align to the left.
I don't know why this isn't working for me - all of your other tutorials worked perfectly (and I thank you a lot for your tutorials - worked miracles!).
that's why I ask if there can be a code (other than this) that can stick the bar to the middle of the page.
Thanks you again for your reply,
George
Hi George,
DeleteThe new code that you're using will align your links towards the left. The original code should work fine. Could you send me a screenshot of what you were seeing with the original code in place?
Hi Yoga, I'm new to blogs and stuff.
ReplyDeleteAnd I'm having a problem while centering the links on the header bar (dynamic views).
When I apply this code of yours, it works, the pages are centered, but, the links stop working. They are displayed as text and lose their "button" instance.
Any thoughts on this?
Thanks in advance
PS. The same happened with the Logo on the header. Everything is displayed the right way, but they lose their "button" ability.
Hi Rui,
DeleteLet's have a look at your blog. What's your blog's address?
http://onenightshift4.blogspot.pt/
DeleteThe links are blocked because you've added padding to your header bar, making the layers to appear on top of your links. In your code, change this:
Delete#header-container #header.header .header-bar span.title{
background: url(http://imageshack.us/a/img40/6137/lunapic1363220302940472.png)
no-repeat;
margin-top: 45px !important;
margin-left: 250px !important;
margin-right: auto !important;
height: 165px;
}
to this:
#header-container #header.header .header-bar span.title{
background: url(http://imageshack.us/a/img40/6137/lunapic1363220302940472.png)
no-repeat;
margin-top: 45px !important;
margin-left: 250px !important;
margin-right: auto !important;
height: 120px;
}
Thanks a lot, that was it :)
DeleteAbout the logo, is there any way to make it "clickable" too? To make it work as a button like on the regular templates?
Thanks again.
If you're looking for a clickable header, I'd usually point my readers to this tutorial of mine: http://www.southernspeakers.net/2012/06/use-entire-header-as-home-button-in.html
DeleteBut in your case, since you've manually added left and top margin to your header to incorporate the abstract background, the clickable area in your header will be limited, unless if you could get rid of the extra margins.
Cheers..
i have searched far and wide and tried every tutorial for centering the damn tabs and it's still not working! any way you could help me out? devinandkatieashby.blogspot.com
ReplyDeleteHi Devin,
DeleteHere, this should do the trick. Add it to your CSS:
#PageList1 ul{
width: 640px !important;
margin: auto !important;
display: block !important;
}
Cheers :)
aw man, thank you so much! unfortunately, it didn't work :( am i just totally out of luck?! i mean, what the heck?! haha css is soooo complicated for me :( thank you for trying though!
DeleteThe code isn't faulty, but your other code is. There seems to be some crazy amount of repetitive lines in your CSS. It looks off. Did you put them there?
Deletehmmm. i don't think so?! at least no on purpose... haha!
DeleteI don't think so?! I haven't touched my CSS much, and have only put in a few codes to make some adjustments... but it's very possible I could have messed it up seeing as how I don't really know what i'm doing... haha
DeleteI guess you have some cleanup to do then. If you keep piling up codes in your Add CSS section now, things are just gonna get worse, and at one point, you'll decide it's beyond recovery and you'd want to start over from scratch. Let's not go there.
DeleteThis doesn't work for me for some reason, could you help me out? http://citysphere.blogspot.co.uk/
ReplyDeleteall your other tutorials have been great
Hi Victoria,
DeleteYou aren't using a DV template, whereas the tutorial above is for DV templates alone - which is why it wasn't working in your blog. To center the links in your template, use this:
.tabs ul{
width: 42% !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
Cheers..
Hi Yoboy, firstly, thanks for all the super advice on this blog, you've really helped me transition to dynamic views and be happy!
ReplyDeleteI am using timeslide, and I have applied the change to centre the header links, but they aren't actually centered... Is there anything I can do?
www.onefortydeep.com
Thank you.
Hi Andy,
DeleteI couldn't find the code in the tutorial above anywhere in your page. Can you check again?
Hi Yoboy, thanks for the reply and sorry not checking back sooner! I removed the code and left them as they were in the end.
DeleteThanks though, i get so much value from this site :)
I have an OLD template ,I was wondering how to center the culumns, the main one and side bar is over to the left?
ReplyDeleteHello there,
DeleteDid you mean you want to bring your right sidebar to the left? If that's the case, the Template Designer will still work for you (Awesome Inc template is still relatively new). Head over Dashboard - Template - Customize - Layout - Select a desired layout.
See with the OLD template I have I can not do that. it shows this when I try
ReplyDeleteBody layout
Not applicable for this template.
Footer layout
Not applicable for this template.
Perhaps I've been looking at the wrong link. What's your blog's address?
DeleteHi Yoga!
ReplyDeleteGreat blog. I went ahead and added a logo along with the styles. But now I'm having issues with the other pages now have a large gap between the content and nav bar. Take a look: http://www.photosbypurciel.com/
Any ideas?
Thanks!
Hi Matt,
DeleteAre you still seeing the gap? I can't quite find it in your blog. You've probably gotten it sorted. If that is not the case, could you share the link to the page in which you're seeing the gap?
Hi Yoga! Thanks for all of your tutorials, they're all so helpful and most have worked instantly. This one is driving me nuts though. I've tried using other variations from the comments , changing the percent, even using some other positioning things I sort of know like trying to get it to float center. No matter what it will look great in Chrome for me but be very off in Firefox and Sarafi. Any chance you can help? My site is www.internlikearockstar.com. Thanks so much! You're awesome!
ReplyDeleteHi Katie.. I'm seeing pretty much the same thing in both Chrome and Firefox. Have you tried refreshing your browsers' cache/cookies?
DeleteChrome: http://i.imgur.com/WxmJlWP.png
FF: http://i.imgur.com/Jlg0qm8.png
Hi Yoga, thanks a lot for your site and your many counsels. There is a problem that I can't find an answer to. On a blog that I'm making with 13 years-old pupils, http://lemetierdewebdesigner.blogspot.fr/ , the pages in the horizontal bar don't all appear. Is there something I can do about it? Could this menu be on two lines so that all the pages could be seen?
ReplyDeleteThanks a lot!
Probably yes but the result wont be as pretty (in terms of cosmetics). Just for the records, I can see all your tab menus. That said, please advise where is the cutoff point (the last link that you can see on your screen) so that I can estimate accordingly.
DeleteHi Yoga,
Deletethanks a lot for your answer. As I couldn't found the solution, I just changed the siez of the font, so that fixes the problem... The problem is still there only if you reduce the size of the Firefox Windows... The cutoff point depends on how much you reduce the window...
Hi Drouet,
DeleteI notice you're using a Dynamic template. I must have mislooked your template in the past. It's very tricky to go for a double-lined bar with a Dynamic Template, unfortunately.
Hi Yoga,
ReplyDeleteYou have a great tutorial here.
Ok, anyway, I was trying to apply this on my blog but it just won't work. :(
my blog address is: http://www.feedyourtummy.com
Another thing, I also applied from one of your tutorial as well on how to hide the side bar on one of my pages and it worked just fine. But my problem is, I want to center the 'contact page" after i hid the side bar. I can't find any codes how to center just this specific page though.
the url for this one is: http://www.feedyourtummy.com/p/contact-me.html
Hope you could help me out.
Thanks a lot in advance!!
Hi Len,
DeleteThe tutorial above is for Dynamic View templates, you're not using a dynamic template. That said, for your blog, I wish I could share an automatic way to center your title, but this needs to be manually adjusted. Here's the code to start you of. Adjust the value in the code below:
#PageList9{
margin-left: 100px !important;
}
As for centering you contact page, changes would have to be done to the original code. Mind sharing it here so that I can amend it?
Hi Yoga,
DeleteThank you so much! It worked. :)
oh and for the contact page, I'm really very familiar with codes so I don't know if this is the code you were asking:
#sidebar-wrapper{
display: none;
}
#content, .single{
width: 100% !important;
}
Once again, thank you!
Hi Len,
DeleteIs this the code that was added to the HTML section of your blog (to get rid of the sidebar for this particular page)? I imagine you won't get to post HTMLs in comment section, so perhaps you'd want to paste it http://pastebin.com/ or something and get back to me with its link.
Thank you Yoga!
ReplyDeleteSince Google made some changes in the menu options, i can't change my links!
I have a link going to the wrong URL.
I need the link "shop" to go to bymismas.com.
Can you help me?
http://mismasblog.com/
Best Silja
Hi Silja,
DeleteTry going to Dashboard - Layout - Pages - Edit - Click on the 'X' for the wrong link - then add a new one by clicking on '+ Add link page'.
All of your suggestions have been great! I can't seem to get my header links centered, though. The highest it will let me adjust the percentage is 96% before it reverts back to a pages dropdown menu on the left. Therefore, all of my links are just a little left of center under the header image instead of right in the middle. Any suggestions for how to fix this?
ReplyDeleteHi Megan,
DeleteThis should let you to manually adjust the position of the links. Just play with the value 10 below:
#pages{
position: relative;
left: 10px !important;
}
That worked! Thank you so much!! I am so grateful you are willing to share your knowledge!
DeleteHi, Yoga!
ReplyDeleteI frequent your page and appreciate all of the great tutorials! I was wondering if you'd be able to help me. I just deleted my pages widget on blogger in order to implement a custom navigation bar complete with sub menus but now my tabs WILL NOT CENTER. I've must have tried a million codes. The nav bar itself is centered. Just not the tabs. Any suggestions?
www.ginachristiansenphotography.com
Hello Gina,
DeleteSorry for my ridiculously late reply. I see your tabs are already centered (or I must have been looking at the wrong place). Have you gotten this sorted?