1. Go to Dashboard > Design > Edit HTML.
2. Find This code below.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Test Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Test Blog (Header)' type='Header'/>
</b:section>
3. Insert the following code just below that.
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
4. Should look something like this after your done.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tweak My Blogger (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
Now we should have 2 sections to the Gadget sections in the header. But you will have to position it correctly.<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tweak My Blogger (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
5. Now you will want to locate the following code.
]]></b:skin>
6. Add the following code just above it.]]></b:skin>
(Older Templates)
#header {width:50%;display:inline-block;_float:left;}
#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
body#layout #header {width: 50%; float: left;}
body#layout #header-right {width: 50%; float: right;}
(Newer Templates)#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
body#layout #header {width: 50%; float: left;}
body#layout #header-right {width: 50%; float: right;}
#header {width:50%;display:inline-block;_float:left;}
#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
If you are using a newer template you will need to locate this code below.#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
]]> </b:template-skin>
Just above that code place this code below.#layout #header {width: 50%; float: left;}
#layout #header-right {width: 50%; float: right;}
7. Now apply this to your blog and go to the Page Elements. In the Page Elements you should see the widgets area now available. Place a Gadget in there.#layout #header-right {width: 50%; float: right;}
8. Now you might have to go back to the code in section 6 and change the width around in the first 2 lines. Play around with it untill you get it to your liking. You can just click preview after you changed it to see what it looks like. As for the orange padding you will need to adjust this to move the gadget around on the blog. You can view our section on padding and margin if you do not understand the values.
thank you so much!
ReplyDeleteIt may seem like it don't work from the page elements because the gadgets will not line up side by side. But the Add Gadget just below the header is the place you want to add the new gadget. Then when you view your blog it will show the gadget to the right of your header.
ReplyDeleteHi Aires, nice hack! It doesn't seem to be displaying properly on my blog in Explorer (cursed browser). In Explorer, it wants to be below the header, just above the tabs. Any ideas on a fix?
ReplyDeleteTry adjusting the percent in red to a lower number.
ReplyDeleteIf your still having problems I will need your blog URL to correctly isolate the issue.
Was there a solution to AiresOFwar's problem?
ReplyDeleteAre you having the same issue as DeanneM then let me know so I can run some test on different template to come up with a solution. IE has always been a pain to with code compatibility. But I think I can come up with a solution if I can duplicate this issue on a test blog. I just need to know what template your are using.
ReplyDeleteThanks for post
ReplyDeleteHi! The post is amazing, learned a lot today ;) I even created an header-left b:section.
ReplyDeleteBut getting to the point, following your tutorial strictly, the two gadgets dont lineup, and the header stays centered on the add element page.
Thanks for the heads up I will look into it.
ReplyDeleteThanks for helping to fix my problem in splitting the header(title). if you want to split the header exacly half, use the following code....
ReplyDelete#header {display:inline-block;_float:left;}
#header-right {display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
body#layout #header {width: 50%;}
body#layout #header-right {width: 50%;}
I too am using IE. I have split the header which is great, and now have a gadget box showing next door to the header on the Page Elements. But when I turn it into a text box and display it, it displays below the header and to the right of it. Changing the percentages still doesn't allow me to display the box in the right place. I have tried giving it an "absolute" coordinate, but whatever I put in as the coordinates it resolutely stays in exactly the same place. As though it is not recognising the GadgetID Text1. Any thoughts?
ReplyDeleteDo you have a bog URL to go with that so I can see what your seeing?
ReplyDeleteOut of topic Q:
ReplyDeleteHow do I add HTML or a gadget to the right hand side of the existing footer where the share buttons and edit pencil tabs are located?
Ummmmmm I don't know of anyway off head, maybe later on I will look into it and see if I can figure it out.
ReplyDeleteWill leave it set up displaying incorrectly for a while so you can see it. Afterwards I will reposition text under header until I can resolve problem.
ReplyDeleteThis is what is currently in my CSS box. I have tried resizing the picture to make it smaller, but it makes no difference.
#header {width:50%;display:inline-block;_float:left;}
#header-right {width:30%;display:inline-block;float:right;padding:20px 10px 10px 10px;}
#header-right .widget {margin:0;}
Use a code like this below in the CSS box.
ReplyDelete#Text3 {
position: relative;
bottom: 10px;
right: 15px;
}
You may have to adjust the pixels to your liking.
OK, now we are getting somewhere. You are such a clever chap! But there is now a large gap under the header and text box before the rest of the page continues. On the page elements there is an "add gadget" box which I haven't used. Could this be causing it? I can't seem to get rid of it.
ReplyDeleteHave just solved my own problem, by applying the last bit of advice you gave me to the other boxes on the page. Not sure why they were in the wrong place but seem to have shifted them satisfactorily. Many thanks
ReplyDeleteHmmm. Thought all was well until a friend told me that when she looks at the site on her Mac the writing on the right hand side is over the top of the photo..... Is this a factor of screen size, or different operating systems do you think?
ReplyDeleteI never used Mac computers before but it sounds more likely that she is using a older browser. Some browsers interpret coding different while older ones may not support it at all. If she has a mac then likely she is using safari so ask her to make sure her browser is not outdated. Also ask her to look at it in Firefox and Internet Explorer and see if it looks different. But I am unaware of any problems with Mac or any browser not rendering the tweak properly. So please let me know what she says about her browser so I can look into it.
ReplyDeleteShe is using Safari, but is pretty sure it is up to date. Having seen how it displays on her screen, I think it would in fact have displayed correctly in Safari without the tweaks I have had to put in place to make it look right in IE. Are the two incompatible?
ReplyDeleteBrowser compatibility is a endless nightmare for a programmer or web-designer. Although I am unaware of any problems between Safari and Internet Explorer it is possible. Each browser rendered coding different which makes for a fun time when designing sites. Firefox is the best browser and most sites are optimized for Firefox browsers.
ReplyDeleteSo I wonder which bit of the header splitting code IE wasn't recognising, before I started relocating. It looks as though Firefox and Safari can recognise whichever bit IE is ignoring and therefore they don't need the relocation tweaks. If I can identify which bit that is, then perhaps it can be rewritten in a way that IE can understand ...
ReplyDeleteSend me a email through the contact and we can work it out through there. I will get you to attach your template in a email and I will see what I can do.
ReplyDeleteHi AiresOFwar,
ReplyDeleteYour is tweak is great i must confess, it has really help me to customise my blog exactly the way I love it, keep up the good work.
Trying to put gadget inside has been given me some problem now, another gadget shows up and i try to put the one I created tru your guidline but i could not figure it out well. will attach my template to my email and mail you.
thank you once again for the good work.
Thank you so much!!! It works perfectly!!
ReplyDeleteMy blog: http://bachecaebookgratis.blogspot.com/
Thank you very much....
ReplyDeleteHi AiresOFwar boy am I late to this party. I spit my header to add a Google search bar in there but when I did the tweak rather than have the new area for a gadget show up below the header as you mentioned it showed up to the right of it. In layouts I'm looking at two areas at the top of the page one next to the other. I put the search bar in to the right side one. when you look at the page the search bar was in the right place but you could not click on it. when hovering over the search bar you were not given the opportunity to click on it. I see it but can t use it. I need the search bar so I change it with something ells so if you were so kind as to take a look you can try for yourself. my blog URL http://www.investonabudget.com/
ReplyDeleteThanks again for helping with my blog. Your blog has been instrumental in making my blog work the way I want it to.
This is a bit of a complex tweak which has many variables that may differ from template to template. I will be glad to help you with this matter but I am limited to the help I can provide through this comment box. If you can send me a email through the Contact option at the top I should be able to get this figured out for you.
Delete