Originally Posted by denisegoldberg You log in at www.blogger.com.

I don't know why I didn't think of that. I got used to doing it one way and forgot about the others. I have to do the same process with my SmugMug account becasue I took the login link off of my site. They should have an emoticon that is a slap in the head...LOL. Thanks.

Hi Denise,

Thanks for putting up with me.

Re:
I said:
I removed the HTML and saved the blog code, so now you can see it.
You said:
Your banner and navbar html is not in your blog.
What I meant to say:
I removed the HTML (which is why it's not there), so now you can see where I added the - #MyTopRow and #MyTopBanner code.

You said:
You need to start adding it in pieces - as I recommended yesterday - until you isolate the problem.

I did, and I found the problem. There was a <br> right before the </ul>, so it messed up, and the error message said I was missing the </ul> when I actually was missing the </br> . I simply removed the <br> and it works great! Thank you.

You said:
For example, this url means absolutely nothing outside of smugmug:

Duly noted. I added the URL as per you example, and it too works great!
Again, thank you so much.

Now maybe you can help me with a one more related problem. I would like to have the navbar underneath my banner instead of on top of it - for both the blog and my website. I've searched, but have found no clues.

I also have another non-related question. Don't know if I should alsk it here, or on another thread. I will ask it here, and if you would like me to put it on another thread I would be happy to do that.

I changed my home page from a slideshow to a single image. But the image is off center, has a square background behind the retangular image, and shows the words Brad Sharp's Home Page. I can see the code the code that is supposed to remove the Brad Sharp's Home Page, but it doesn't seem to be working. I found several of your threads (as well as others), on this issue and have added, and removed, and added again to the code to the CSS, as well as your example for the 'Your Bio' edit, but nothing seesm to work.

When I added the code to my 'Your Bio', it also shifted the Search box to the left.
Could you look at it and see if you can tell me what is wrong?

Thanks,
Brad

Originally Posted by bsharp Now maybe you can help me with a one more related problem. I would like to have the navbar underneath my banner instead of on top of it - for both the blog and my website. I've searched, but have found no clues. Thanks, Brad

I was able to fix this problem.

Hi all!

I'm read the tutorials and have given it my best effort. I'm trying to have a smugmug photo site and a blogger blog and have them seamlessly integrated. What I have so far is at http://casterlinephotography.blogspot.com/ If you click the "about" button it will show you my smugmug page where I've managed to get a temporary test slideshow up. My question is, how do I make that navbar look more like my smugmug navbar? The smugmug one turns grey when you roll over it, whereas the blogger one was added manually (and slopilly done with spacing...you can see it when you roll over it.)

Is there a way to get my actual smugmug navbar moved over so that if I ever change the links in one, it will change in the other? Can I just do it with the text without making my own navbar?

I'm a bit confused here, and any help would be appreciated!

Thanks,
WBJ

Originally Posted by WBuffettJr I'm a bit confused here, and any help would be appreciated! Thanks, WBJ

Always best to post in the relevant thread

Originally Posted by WBuffettJr My question is, how do I make that navbar look more like my smugmug navbar? The smugmug one turns grey when you roll over it, whereas the blogger one was added manually (and slopilly done with spacing...you can see it when you roll over it.) Is there a way to get my actual smugmug navbar moved over so that if I ever change the links in one, it will change in the other? Can I just do it with the text without making my own navbar?

There are no shortcuts here. Smugmug is one site and blogger is a totally different site. If you want the two sites to look the same you must customize one of them to look like the other. If you change the links in one navbar, you must also change them in the other navbar.

Start by getting one of the two sites into its final form. I'd suggest you start with your smugmug site. Then follow the instructions in the first post of this thread to match your blog to your smugmug site. Post back here if you have specific questions.

--- Denise

Just wanted to say thank you to Denise. I followed your instructions and after several minutes of tweaking some codes we finally have a blogging site that matches our smugmug site.

Read through the forums and still having problems...

I've tried everything, but obviously making a mistake somewhere. I can't figure out how to set my blogspot header (test blog (http://www.exactexposuretest.blogspot.com/) to sync with my website (http://www.exactexposure.smugmug.com). The image will center at times and then it won't. The buttons never look right and I'm driving myself nutz after spending 6 hrs reading and trying everything.

Hate to ask, but gonna have to as my novice HTML ideas are at a loss. Help PLEASE :-)

Here is my goofed up code on my test blog....

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima Black
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#000" value="#191919">
<Variable name="textcolor" description="Text Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="linkcolor" description="Link Color"
type="color" default="#9ad" value="#99aadd">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#777" value="#777777">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#ad9" value="#aadd99">
<Variable name="bordercolor" description="Border Color"
type="color" default="#333" value="#333333">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#777" value="#777777">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#999" value="#999999">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#a7a" value="#aa77aa">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/

/* Use this with templates/template-twocol.html */

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
----------------------------------------------- */
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;}

#header-wrapper {
width: 800px;
height: 126px;
margin: 0 auto;
background: url(http://exactexposure.smugmug.com/pho...75_CpGt6-O.jpg) no-repeat;
}

#header-inner {display: none;}


#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none; font-size: 100%; font-style:arial; text-transform:uppercase;
padding: .2em 2.05em;
color: #cdaf95;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

/* Outer-Wrapper
----------------------------------------------- */

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}


/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:bold;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

.post-body {
margin:0 0 .75em;
line-height:1.6em;
}

.post-body blockquote {
line-height:1.3em;
}

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

/* Sidebar Content
----------------------------------------------- */

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

/* Profile
----------------------------------------------- */

.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='eXacteXposuretest (Header)' type='Header'/>
</b:section>

<div id='navcontainer'>
<ul>
<li><a href='http://exactexposure.smugmug.com/'>Home</a></li>
<li><a href='http://exactexposure.smugmug.com/Aviation'>Aviation</a></li>
<li><a href='http://exactexposure.smugmug.com/Landscapes'>Landscapes</a></li>
<li><a href='http://exactexposure.smugmug.com/Fine%20Art%20Photography'>Fine Art</a></li>
<li><a href='http://exactexposure.smugmug.com/gallery/1243006'>Pricing</a></li>
<li><a href='http://exactexposure.blogspot.com/'>Blogspot</a></li>
<li><a href='http://exactexposure.smugmug.com/About%20eXacteXposure.com'>About</a></li>
</ul>
</div></div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> <!-- end outer-wrapper -->
</body>
</html>

Originally Posted by exactexposure I've tried everything, but obviously making a mistake somewhere. I can't figure out how to set my blogspot header (test blog (http://www.exactexposuretest.blogspot.com/) to sync with my website (http://www.exactexposure.smugmug.com). The image will center at times and then it won't. The buttons never look right and I'm driving myself nutz after spending 6 hrs reading and trying everything.

Please do not include code in your posts. It is easily visible to anyone who has installed Firefox Web Developer Extension (see tutorial at http://dgrin.smugmug.com/gallery/1354921), and including it in a forum post just makes the post just about impossible to read.

Instead of copying your banner div, you chose to use one of blogger's divs. That was not a good idea.

Start by removing your CSS from the #header-wrapper div.
Copy your banner div, #my_header, from your smugmug css to your blog css.
Copy your banner and nav html from your smug site and place it in your blog before <div id="outer-wrapper"> (as noted in the first post in this thread).

If you are still having problems after you have gone through those steps, post back with a description of the problem.

--- Denise

Originally Posted by denisegoldberg Please do not include code in your posts. It is easily visible to anyone who has installed Firefox Web Developer Extension (see tutorial at http://dgrin.smugmug.com/gallery/1354921), and including it in a forum post just makes the post just about impossible to read. Instead of copying your banner div, you chose to use one of blogger's divs. That was not a good idea. Start by removing your CSS from the #header-wrapper div. Copy your banner div, #my_header, from your smugmug css to your blog css. Copy your banner and nav html from your smug site and place it in your blog before <div id="outer-wrapper"> (as noted in the first post in this thread). If you are still having problems after you have gone through those steps, post back with a description of the problem. --- Denise

Thank You. I figured posting the css was a lot of info and won't do it again.

I believe I just did what you said prior to me checking back on this forum. However, I may be doing something else wrong on another section of the blogger css code as internet explorer shows my buttons differently than Firefox or Safari? The buttons become much wider in IE? I've noticed I'm having to do different modifications to my "real" blog site (vs. the test one), so I'm working with that one now (http://exactexposure.blogspot.com/). I've copied the old css if I really goof things up, however so far so good, but not perfect. Right now... It seems that only firefox and safari are 95% accurate to what my website header and nav buttons look like. Internet Explorer shows my buttons on the blogger site as much wider than on my website? But I'm making slow progress after doing this ALL day.

I'm sure I have more (little) errors, but working to figure it out.

Thank you for helping me and other smugmugers! We really do appreciate it. :-)

David

Originally Posted by exactexposure However, I may be doing something else wrong on another section of the blogger css code as internet explorer shows my buttons differently than Firefox or Safari? The buttons become much wider in IE? I've noticed I'm having to do different modifications to my "real" blog site (vs. the test one), so I'm working with that one now (http://exactexposure.blogspot.com/). I've copied the old css if I really goof things up, however so far so good, but not perfect. Right now... It seems that only firefox and safari are 95% accurate to what my website header and nav buttons look like. Internet Explorer shows my buttons on the blogger site as much wider than on my website? But I'm making slow progress after doing this ALL day.

Very interesting. Your navbar buttons are shifting for me on your smugmug site too. On home page, clicked to aviation - the buttons shifted. Clicked to landscapes - they shifted again. So whatever is going on with your blog, it's consistent across your smug site too. I just looked in Firefox and in IE8. It happens in both, but it is more pronounced in Firefox. I see what you mean about the navbar font size. I'm thinking that you need to explicitly set the font size for your navbar in both sites, then tweak to get an exact match.

I don't have time to play right now, but I'll try to check back later.

It looks like you're pretty close to a good match.

--- Denise

Originally Posted by denisegoldberg Very interesting. Your navbar buttons are shifting for me on your smugmug site too. On home page, clicked to aviation - the buttons shifted. Clicked to landscapes - they shifted again. So whatever is going on with your blog, it's consistent across your smug site too. I just looked in Firefox and in IE8. It happens in both, but it is more pronounced in Firefox. I see what you mean about the navbar font size. I'm thinking that you need to explicitly set the font size for your navbar in both sites, then tweak to get an exact match. I don't have time to play right now, but I'll try to check back later. It looks like you're pretty close to a good match. --- Denise

Thanks Denise...

Actually the Nav bar "shifting" has to do with the vertical scroll bar to the right of the specific page. If the page has lots of information on it (with a right hand vertical scroll bar) then the whole header and navbar shifts relative to the rest of the page, however if there is not a lot of information (no vertical scroll bar) then it doesn't. If I'm reading that right it has nothing to do with my problem with the buttons themselves changing size on my website vs. the blog site. However, I've known about this issue for over a year now and can't find a solution, so if your expertise can help that'd be AWESOME!

I would agree with you that I need to fix my buttons and I will try to figure that out... It's just another 4 hours (or days) before I can figure it out... No biggie :-)

If you do get chance to play I'd appreciate the help.

David

Originally Posted by exactexposure If I'm reading that right it has nothing to do with my problem with the buttons themselves changing size on my website vs. the blog site. However, I've known about this issue for over a year now and can't find a solution, so if your expertise can help that'd be AWESOME!

David,

I only took a quick look, but I'm pretty sure the problem has to do with your "header-wrapper" being inside of blogger's outer-wrapper. The outer-wrapper is set to 90% width and each of your navcontainer's list items have relative valued padding using "em" size. So I think the padding is adjusting between smugmug's 100% width and blogger's 90% width.

Try putting your header above the outer-wrapper div, change the outer-wraper width to 100%, or use static padding set in px.

Hope that helps!

Originally Posted by aaronbrown David, I only took a quick look, but I'm pretty sure the problem has to do with your "header-wrapper" being inside of blogger's outer-wrapper. The outer-wrapper is set to 90% width and each of your navcontainer's list items have relative valued padding using "em" size. So I think the padding is adjusting between smugmug's 100% width and blogger's 90% width. Try putting your header above the outer-wrapper div, change the outer-wraper width to 100%, or use static padding set in px. Hope that helps!

That is GREAT. Thanks for the feedback, knew it was probably something "simple". Of course now I'll spend all day trying to figure it out, but a starting point is 75% of the problem I suppose. I guess I need to set my buttons with a "static" value. My header is 800X126 px, So the buttons should all the the same size too if reference to that... Then it shouldn't matter where I place the header or what browser I use.

Not sure about the "header-wrapper" being inside of blogger's outer-wrapper... CSS and HTML talk is not very intuitive to me... But I'll mess around and see what happens.

THANK YOU,
David

UPDATE... Spent 2 hrs trying to center my buttons (they should be "static" now) and can't seem to do it? The are always left justified and I can't find the code to center the buttons in relation to the logo above?

UPDATE 2... Apparently "Static" buttons can not be centered? They can be positioned either Left or Right, but not under the logo? Very strange. So I put code back the way it was in Smugmug and will try to play with blogger code.

UPDATE 3... I've cut/pasted code all around in Blogger, nothing! I changed the 90 % to 100% and no change (other than my body text goes to each side of the screen). But 100% didn't do anything for the buttons. I've wasted and entire day at this and nothing :-(

Basically, I'm trying to figure out why does IE goof things up, but Firefox and Safari not-so-much? If it was a universal problem then I could understand why the buttons are wider on my blogger site, but it isn't. Yugh!

Originally Posted by exactexposure Not sure about the "header-wrapper" being inside of blogger's outer-wrapper... CSS and HTML talk is not very intuitive to me... But I'll mess around and see what happens.

Go into Blogger. Choose Layout>>Edit HTML.

1. Back up your code.

2. Now, look towards the bottom. You're looking for these HTML tags

<div id="header-wrapper">

<div id="navcontainer">

You need to move these entire HTML tags above this tag

<div id="outer-wrapper">

Cut each of those, from opening div tag to closing div tag, and paste them in order on top of the outer-wrapper tag. That way the header comes first, the navagation comes second, and then the blogger HTML comes 3rd. This **SHOULD** fix things.

3. It'll then look something like this:

<body>
     <div id="header-wrapper">
          the millionaire and his wife...
     </div>
     <div id="navcontainer">
          a movie star...
     </div>
     <div id="outer-wrapper">
          and the rest!
     </div>
</body>
</html>

Originally Posted by aaronbrown Go into Blogger. Choose Layout>>Edit HTML. 1. Back up your code. 2. Now, look towards the bottom. You're looking for these HTML tags <div id="header-wrapper"> <div id="navcontainer"> You need to move these entire HTML tags above this tag <div id="outer-wrapper"> Cut each of those, from opening div tag to closing div tag, and paste them in order on top of the outer-wrapper tag. That way the header comes first, the navagation comes second, and then the blogger HTML comes 3rd. This **SHOULD** fix things. 3. It'll then look something like this: <body> <div id="header-wrapper"> the millionaire and his wife... </div> <div id="navcontainer"> a movie star... </div> <div id="outer-wrapper"> and the rest! </div> </body> </html>

Thanks for clarifying that for me! It took me a little messing around to figure it out (and to undo some goofy code I input to make the font 88% to match website buttons), but I got it. BIG THANK YOU!!!!

I still need to figure out why IE browser is barely "cutting off" the top of my nav buttons (Firefox, Safari, Chrome do not) and how to make buttons with no spaces between them, but those are small nitpicky things vs. what I just accomplished (with your help of course ).


Joy!

David

Edit: I finally figured out how to get my header and nav bar onto my blogger page, although not 100% exact. I'll have to tweak as time goes on, but I'm happy with it turned out for now.

I found that using the "classic" blogspot template is easiest to configure. The other templates have specific header wrappers that make it difficult (at least for me) to set up.


I am trying to match my blogger site with my smug page, but I'm having trouble. I read through the guides but I'm having issues figuring exactly what code I should be copying over from my SM homepage to Blogger.

First, in Blogger HTML, I should copy and paste the relevant SM header and nav code here, correct?
<div id='header-wrapper'> </div>

Am I supposed to also supposed to insert code into another part of Blogger's HTML template section too?

Then, what code from my SM homepage should I be copying into the Blogger HTML? My nav bar is created by "Easy Customizer" so its hard for me to follow Denise's 1st page instructions. I tried copying and pasting various bits of code (viewed by going into "Page Source" in IE) into the header-wrapper section but it doesn't work.

Thanks in advance for any help!

-Al

Making progress in adding my blog to my smug mug site. I need a bit of help to finish the job.

What I've done is add the navbar to my blog. It does link to my smug mug page, but it doesn't look the same. The links are vertical, not side by side, and don't have a blue box to separate them.

Also, do I need to add a gallery called "Blog" first? And if so, how do I link it to the blogger page?

The pages in question are:

www.servianphotography.com
http://www.servianphotography.blogspot.com/

Just going for a seamless blend of the two. It's ok if the blog doesn't look exactly the same, but I'd like
the functionality to work right.

Thanks in advance.

George

Originally Posted by canon_shooter Making progress in adding my blog to my smug mug site. I need a bit of help to finish the job. What I've done is add the navbar to my blog. It does link to my smug mug page, but it doesn't look the same. The links are vertical, not side by side, and don't have a blue box to separate them. Also, do I need to add a gallery called "Blog" first? And if so, how do I link it to the blogger page? The pages in question are: www.servianphotography.com http://www.servianphotography.blogspot.com/ Just going for a seamless blend of the two. It's ok if the blog doesn't look exactly the same, but I'd like the functionality to work right. Thanks in advance. George

**********************************************

Ok, I did get the navbar look right. I'd like to add a space between the navbar and the rest of the blog.
Also, still not sure what to add to the main smug mug site to link to the blog.

George.

Originally Posted by canon_shooter ********************************************** Ok, I did get the navbar look right. I'd like to add a space between the navbar and the rest of the blog. Also, still not sure what to add to the main smug mug site to link to the blog. George.

***************

Found an important (and missing) step buried deep in the posts. I'm good now.

G