Getting smugmug navbar and header into blogger

kgphotos · March 10, 2014

Hi. So I set up a blog on blogger today. It's just a test to see how it looks. I have a few questions…

1. If you go to my site http://www.karengrantphotography.com and click on the blog it will take you to my blog. The thing is how do my viewers get back to my smug site. There is no nav bar! I would really love to add my navbar and header to match, but I can't seem to do it. UGH! I am ripping my hair out! I tried following the instructions Denise provided on this forum, but I am not great at CSS/HTML. I was wondering if someone here could help me match it. Maybe get my codes for me and tell me where to place it on blogger? I have a Mac with Safari. I tried going into the page source in Safari to get the info that I need from my smug site to copy but I can't find it. i Also downloaded Chrome and got the Web Dav extension, but again I am horrible at this. These are the codes that I need from my smug site:

CSS for my banner
CSS for my navbar
HTML for my banner (probably in the Header box)
HTML for my navbar (also likely to be found in the Header box)
color codes for items within your CSS (text color, hover color if specified, etc.)

2. I'd like to use the same fonts on my smug site which is Diadict Gothic. How do I add this to my blogger site? This I know to go to google fonts and grab the link which is html and then I have to add CSS but again where do I add this stuff? Under the header when I am in the HTML box? And where exactly does the CSS go?

Please help me. I know I may have to tweak things.

-Karen

my website… http://www.karengrantphotography.com

swatty · March 11, 2014

Hi Karen,

just looked at your blog and got back quite easy to your smuggy site. Simply clicked on photo of dandelion. Not sure if this is any help to you but thought I would let you know.

Grant

http://gswatty.smugmug.com

denisegoldberg · March 11, 2014

kgphotos wrote: »

Hi. So I set up a blog on blogger today. It's just a test to see how it looks. I have a few questions…

1. If you go to my site http://www.karengrantphotography.com and click on the blog it will take you to my blog. The thing is how do my viewers get back to my smug site.

Hi Karen -
I'm going to continue the conversation we started via PM here. That way if I'm not around and you have questions you might be able to get an answer here. And it might help someone else who is attempting the same thing.

First, we discussed using blogger widgets instead of matching your smug header. This will allow you to customize your site without knowing code. It will also allow you to change the look of your smugmug site without needing to change your blog as well. If you ever decide you want to go for a full match you can change later.

Yes, I did match my smug site and my blog - but I initially did that a number of years ago, before smug built the header for you. I had the CSS and HTML I used for my smugmug site and I just used the same on my blog. When I upgraded to new smug last summer I made some changes in the header, but it was easy for me to just tweak my existing blog header to match. Starting from scratch today, I probably would choose to make the sites similar but not matching.

I don't know how much you've experimented with blogger. There are a couple of areas that I think you'll want to experiment with.

To control the fonts and colors:
> Click Template (once you are in blogger and in your blog).

> Click the Customize Button

> Click Advanced. This will take you into the Blogger Template Designer

Scroll through the entries in the top left of that page. Adjust the font sizes, font styles, sizes, and colors as desired.

Click Apply to Blog, then Back to Blogger when you are done.

Next click Layout. This will take you to a layout page where you can add gadgets. The screen shot below shows the layout page from my blog.

This page is where you can add blogger gadgets. Click "Add a gadget" and select from the list of available gadgets.

For links to your smug site you will probably want to use a Link List gadget.

I only use a couple of gadget types on my blog, mainly HTML/Javascript but there are a few other types as well. In case some examples might help... if you look at my blog, here are the types I used for the gadgets on the right side:

Thumbnail photo of me plus text: HTML/Javascript. I used HTML to place the photo (you can grab the HTML from your smug site, Share... Get a link... Embeddable Links, Blogs. I used a custom size for the photo, see http://help.smugmug.com/customer/portal/articles/93264-can-i-make-custom-display-sizes-. For reference, that thumb is a custom size, 175x175.
A bit of a ramble: HTML/Javascript because I wanted to control the font and size. You could also use a simple Text gadget
Links to my world: HTML/Javascript. Again, I wanted control over the look and spacing. It would be easier to use a Link List gadget.
google+: a Google+ badge
Blog updates: HTML/Javascript that was supplied by http://feedburner.google.com/
Glimpses, wandering...: HTML/Javascript pulled from my smug site. I used a combination of an <a href= and an <img src= statement. The image was pulled using the code from this dgrin post.
Blog archive: as named, used the blogger archive gadget
Labels: as named, used the blogger labels gadget. This allows me to tag my posts with labels and have them referenceable. I use this when I travel so I can point someone to all of the posts from a trip.
Copyright statement was done with a simple Text gadget.

I hope this is enough as a starting point. If you have questions, just post them in this thread.

--- Denise

ko04 · March 20, 2014

Denise,
Currently I have a custom navbar for my smugmug site and blog that match.. I'm always having issues with my custom navbar and so with the new design I am now currently working on I am going to get ride of that navbar and just use smugmug's navbar instead. I see that you suggested to this person to use widgets though I am curious if it is possible to use the actual code of the smugmug navbar in the blogger. I think it is because I'm pretty sure thats what you did but I could be wrong.

denisegoldberg · March 20, 2014

ko04 wrote: »

Currently I have a custom navbar for my smugmug site and blog that match.. I'm always having issues with my custom navbar and so with the new design I am now currently working on I am going to get ride of that navbar and just use smugmug's navbar instead. I see that you suggested to this person to use widgets though I am curious if it is possible to use the actual code of the smugmug navbar in the blogger.

I suggested to the OP that she not use her smug navbar because she does not know HTML and CSS.

While there are folks here who will happily grab the necessary HTML and CSS and provide it to those who are looking for help I have a concern about helping someone build a site that they will not be able to maintain on their own. I'm probably in the minority in that respect, but...

You can certainly use your smug navbar in your blogger (as long as you are comfortable with copying and tweaking code, and I know that you are). I actually didn't copy the code from smug for my blog - I already had code in my blog that was similar to my new smug site so I just tweaked that code that I had. I didn't feel the need to copy all of the new (and somewhat funky) smug CSS names, just wasn't necessary.

--- Denise

ko04 · March 20, 2014

denisegoldberg wrote: »

I suggested to the OP that she not use her smug navbar because she does not know HTML and CSS.
While there are folks here who will happily grab the necessary HTML and CSS and provide it to those who are looking for help I have a concern about helping someone build a site that they will not be able to maintain on their own. I'm probably in the minority in that respect, but...
You can certainly use your smug navbar in your blogger (as long as you are comfortable with copying and tweaking code, and I know that you are). I actually didn't copy the code from smug for my blog - I already had code in my blog that was similar to my new smug site so I just tweaked that code that I had. I didn't feel the need to copy all of the new (and somewhat funky) smug CSS names, just wasn't necessary.

--- Denise

Alright good to know. So would you suggest maybe using firefox to find the code? Because I tried to see if I could find it in google chrome I'm sure its there but it didn't look anything like what I aspected it to look like. Granted I'm not a wise at code as you probably know by now but I am willing to learn and willing to be taught anything when it comes to making my site and blog looking the way I want it to look.

Hikin' Mike · March 20, 2014

ko04 wrote: »

Alright good to know. So would you suggest maybe using firefox to find the code? Because I tried to see if I could find it in google chrome I'm sure its there but it didn't look anything like what I aspected it to look like. Granted I'm not a wise at code as you probably know by now but I am willing to learn and willing to be taught anything when it comes to making my site and blog looking the way I want it to look.

You can also just look at the source code (ctrl+U). Copy the Nav HTML section.

denisegoldberg · March 20, 2014

Hikin' Mike wrote: »

You can also just look at the source code (ctrl+U). Copy the Nav HTML section.

Really? I just looked at source for my home page and I didn't come up with any reasonable nav html.

Not a problem for me since I just tweaked the CSS and HTML that I already had on my blog.

--- Denise

Hikin' Mike · March 20, 2014

denisegoldberg wrote: »

Really? I just looked at source for my home page and I didn't come up with any reasonable nav html.

Not a problem for me since I just tweaked the CSS and HTML that I already had on my blog.

--- Denise

I think Smugmug minifys the code. It's all there, just hard to look at without copying it into a text editor (Notepad++) and "breaking it down" so you can see it.

Not familiar with Blogger, but that's what I did on my Wordpress site. I copied my WP nav and changed it to fit SM.

denisegoldberg · March 20, 2014

Hikin' Mike wrote: »

I think Smugmug minifys the code. It's all there, just hard to look at without copying it into a text editor (Notepad++) and "breaking it down" so you can see it.

Not familiar with Blogger, but that's what I did on my Wordpress site. I copied my WP nav and changed it to fit SM.

I kept the overall look of my logo and nav when I moved from legacy to new smug. I built the menu / nav in new smug but instead of trying to find and copy the code I used my existing code in blogger and just tweaked it. It worked for me...

--- Denise

ko04 · March 21, 2014

Ok so I tried looking at the CSS code on your site Denise just to get an idea what I am going to have to look for and this is some of what I found for navbars:

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:visited {
    color: #26439a;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:hover,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:active {
    color: #26439a;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-emphasized a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-emphasized a:visited,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-emphasized a:hover,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-emphasized a:active {
    color: #26439a;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:visited {
    color: #26439a;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:hover,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:active {
    color: #26439a;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-accent a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-accent a:visited,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-accent a:hover,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-accent a:active {
    color: #00D1B8;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal.sm-page-widget-nav-toplinks-separator .sm-page-widget-nav-toplink {
    border-right-color: #E6E6E6;
    border-right-color: rgba(26,26,26, 0.1);
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-vertical.sm-page-widget-nav-toplinks-separator .sm-page-widget-nav-toplink {
    border-bottom-color: #E6E6E6;
    border-bottom-color: rgba(26,26,26, 0.1);
}

am I anywhere close to what I'll be looking for when I use smugmug's navbar on my site? Maybe this is hard to do without just publishing my new design I don't know and I should just come back to this when I am all published and ready to make the change on my blogger.

denisegoldberg · March 21, 2014

ko04 wrote: »

am I anywhere close to what I'll be looking for when I use smugmug's navbar on my site? Maybe this is hard to do without just publishing my new design I don't know and I should just come back to this when I am all published and ready to make the change on my blogger.

Sorry, I don't know. It looks like you just picked up the colors and not the placement of the elements or the creation of the menu items.

As I said before, I didn't use smug's CSS and HTML for my blog - I built it myself, but with the same characteristics I specified when I built my smug site.

In case it helps, here is the CSS and HTML I used for my blog header:

CSS:

#navContainer {
    height: 60px;
    width: auto;
    text-align: center;
    padding: 0px 0px 10px 0px;
    margin: 0px 0px 20px 0px;  /* top right bottom left */
/* not used, keep as comment for reference
background: transparent url(http://denise.smugmug.com/photos/1320946962_9scbFGD-O.jpg) repeat-x;
   end not used  
*/
}

.navRight {
    float: right;
    text-decoration: none;
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 125%;
    font-weight: normal;  
}

.navRight ul {
    margin: 26px 20px 10px 10px; /* top right bottom left */
    padding: 0;
}

.navRight ul li {
    display: inline;
}

.navRight ul li a {
    text-decoration: none; 
    padding: 0px 7px;
}
.navRight a:hover { text-decoration: overline !important; }

.navLeft{
    float: left;
    height: 60px;
    margin: 20px 0px 0px 20px; /* top right bottom left */
    text-decoration: none;
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 185%;
    font-weight: normal;  

}

.navLeft ul {
    margin: 15px 20px 10px 10px; /* top right bottom left */
    padding: 0;
}

.navLeft ul li {
    display: inline;
}

.navLeft ul li a {
    text-decoration: none;
    padding: 0px 7px;
}

HTML:

<div id='navContainer'>
<div class='navLeft'>
<a href='http://www.denisegoldberg.com' title='click here for home page'>Denise Goldberg Photography</a></div>
<div class='navRight'>
<ul>
<li><a href='http://www.denisegoldberg.com/Kaleidoscope' title='Ever changing, highlights'>kaleidoscope</a></li>
<li><a href='http://www.denisegoldberg.com/Gallery'>gallery</a></li>
<li><a href='http://www.denisegoldberg.com/About'>about</a></li>
<li><a href='http://denisegoldberg.blogspot.com'>blog</a></li>
<li><a href='https://plus.google.com/+DeniseGoldberg/posts' title='google+'>g+</a></li>
<li><a href='http://www.denisegoldberg.com' title='click 2x for contact form'>contact</a></li>
</ul>
</div></div>

It's not the same code that smug created based on my definitions but it does the same thing.

--- Denise

ko04 · March 26, 2014

Denise,
i guess I miss-read your response sorry about that. Maybe I need to think about making a new navbar that isnt as complicated as the one I currently have. I'll have to find a pure css dropdown menu that i didnt get off a navbar generator website because finding the smugmug navbar is harder than I thought it would be.

rbrt · April 4, 2014

denisegoldberg wrote: »

I hope this is enough as a starting point. If you have questions, just post them in this thread.

--- Denise

Thanks for this. Helped tremendously!

Getting smugmug navbar and header into blogger

Comments