Matching Blogger to Use With Smugmug

Darter02 · August 7, 2013

Ok, after my work around for embedding iframes for Google Maps & Calendar blew up yesterday, that thread is here, I have to admit I was pretty miffed. I even vowed to leave this forum and my site for a few days. Not to mention shopping around for other services.

I've since slept on it, literally, and am trying to find another solution that would work for me. I used Blogger to feed my map & calendar onto the site in the above mentioned link. It seemed natural that perhaps I should try to use that tool, but not to embed a feed, just to act as a page unto itself. On my legacy site I had used a direct link to a specific post on Blogger to describe my wedding services. I had modified my Blogger to look similar to my Smugmug.

Why not do it again? Well, it's been a few years, so my brain is litterally sizzling right now from editing the HTML, CSS codes in my Blogger template.

Here's a screen of how my new vs. old Blog Post with my Calendar are looking right now. Things are far from completed. The New is on the left.

I cannot seem to sort out how to move my logo around. It needs to come in & down a tad. Also, I can't seem to get my logo background color to extend down below the nav menu. The spacing between the nav menu links is also giving me fits as I can't sort out yet how to widen the spaces. I'm going to stop for today though, my brain HURTS!

BTW: The SM site is really acting up today. I uploaded these two screencaps and it gave me 3x copies of each. Also things are S L O W...

Darter02 · August 7, 2013

Ouch, my brains hurts and my eyes are sore...

I spent some time today editing my HTML code located in the template of my Blogger account. Thankfully I'd tried it before, so a lot of the legacy Smugstuff was in their to be modified. I have things looking close to where I can accept them. I've just two issues I can't for the life of me sort out. I even just read through the 93 posts in the HOW TO match your blog to your smug site (blogger-specific) as it related to the old SM site. No luck.

Here's what I have so far:

All I really want to do now is get my logo background color to go below the menu bar, OR have a background color placed behind the menu bar that matches. I also can't seem to get my Menu links to space out more. They're all crunched in.

#customLogo { background-color: #393c33; background-image: url(http://www.ronlutzii-photographer.com/photos/i-Ptr2j6T/0/X3/i-Ptr2j6T-X3.png); background-repeat: no-repeat; background-position: top left; cursor: pointer; }

I'm so tired I just now realized I took the time to post a screencap, and all I needed to do is post a link!

The links there will not work as they are to my new site.

Darter02 · August 7, 2013

Holy smokes! I just sorted out how to extend that color down. I added background-color: #393c33; to

#customNavContainer { background-color: #393c33; text-align: Right; }

Now to sort out the spacing, and see if I can move things around a bit.

jasonscottphoto · August 8, 2013

I've got our blogger site matching our new SM site (almost - no drop down menus) - I used the old directions you referenced above and just tweaked my colors, spacing, etc to make it look like the new site.

I have our wufoo contact form on a "page" on the blogger site, not a blog post. Also some other info pages which I also have duplicated on SmugMug. I link back and forth between the two sites as much as I can and let me tell you, it has done WONDERS for our SEO. For example, the drop down menu "Information" on SmugMug references mostly pages on the blogger site. The menu on blogger references mostly SM pages. Blog posts are picked up by Google quickly and all the cross linking helps get the SM pages picked up quicker too.

Darter02 · August 8, 2013

jasonscottphoto wrote: »

I link back and forth between the two sites as much as I can and let me tell you, it has done WONDERS for our SEO. For example, the drop down menu "Information" on SmugMug references mostly pages on the blogger site. The menu on blogger references mostly SM pages. Blog posts are picked up by Google quickly and all the cross linking helps get the SM pages picked up quicker too.

I've found this helps as well. I'm actually going to start linking to specific blog post in certain galleries. For instance, I'll often write a blogpost about a trip we've taken. In the gallery description on SM I'm going to start linking to those posts.

I took a look at your integration. Nicely done. I'm going to get mine close, but I don't expect it to be EXACTLY the same. I'm not sure I can get the link icons I have up on my SM onto Blogger.

Darter02 · August 10, 2013

I wanted to use the same fonts on Blogger as I do on SM. The ones I used are not available on the stock Blogger, so I tried this tutorial to get them there. When I include step three the size of my post title shinks way down, and it's still the original font. Nothing I do seems to work. I am stumped.

Is there anyone here who knows how to do this?

denisegoldberg · August 11, 2013

Darter02 wrote: »

I wanted to use the same fonts on Blogger as I do on SM. The ones I used are not available on the stock Blogger, so I tried this tutorial to get them there. When I include step three the size of my post title shinks way down, and it's still the original font. Nothing I do seems to work. I am stumped.

Is there anyone here who knows how to do this?

I added the link to the google fonts I chose just after the head tag in the HTML for my blog. I then changed the font family in the CSS for my header / navbar to use the Google fonts. I also found that I needed to experiment with the font-size to match (or closely match) the size in my smug site. I used percentages to to that.

Here are some snippets from my blog template:

<head>
    <link href='http://fonts.googleapis.com/css?family=Merriweather+Sans|Open+Sans' rel='stylesheet' type='text/css'>	     </link>
...
...
/*  font-family: 'Merriweather Sans', sans-serif; font-family: 'Open Sans', sans-serif; */

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

}

denisegoldberg · August 11, 2013

Darter02 wrote: »

I even just read through the 93 posts in the HOW TO match your blog to your smug site (blogger-specific) as it related to the old SM site. No luck.

If anyone else is looking at that thread - I'd recommend only reading the first post and the posts linked to from within the first post. There is no reason to read through the answers to other poster's specific questions relating to their blog.

That recommendation is made in the first post of the thread, with this:

Important: DO NOT READ THIS ENTIRE THREAD. All of the information you need is in this first post or is linked to from this post.

--- Denise

Darter02 · August 11, 2013

Thanks! I honestly have no idea what I am doing. It's like trying to read hieroglyphics. I'll use your code as a Rosetta Stone, and maybe I can sort out what I'll have to do. I think I can do it.

Darter02 · August 11, 2013

denisegoldberg wrote: »

If anyone else is looking at that thread - I'd recommend only reading the first post and the posts linked to from within the first post. There is no reason to read through the answers to other poster's specific questions relating to their blog.

That recommendation is made in the first post of the thread, with this:

--- Denise

At the time I did that my site was still only in Preview Mode, so I couldn't seem to use a lot of the basic steps. I just fiddled with the template directly. I'd read, well, more like scanned, the thread looking for similar problems I was having.

Darter02 · August 12, 2013

Just a heads up for anyone else struggling with this. I worked for a couple of hours yesterday, changing parameters over and over, trying different codes, etc. I'd hit preview in Blogger and while I saw my body text change, I couldn't get the menu fonts to do so. Eventually I just quit.

Today I opened my site in Fire Fox & IE 10. My menu fonts were correct! I opened Chrome, which is what I use on my day to day, and they were not.

So, I have no idea why, and the spacing looks very different between browsers, but I am done. In this instance, close enough works...

Darter02 · August 29, 2013

Just a heads up to anyone else doing this. After I manually changed my CSS directly in the template HTML editor, and got it all looking the way I wanted, I then connected my blogger account to my G+ account. Now when I go into the templates HTML editor all I see are the HTML lines of code. I can no longer edit my CSS directly in that editor. I am assuming it has something to do with me linking Blogger to G+.

Just a heads up...

Now to figure out what to do as I want to shorten my header color bar there.

denisegoldberg · August 29, 2013

Darter02 wrote: »

Just a heads up to anyone else doing this. After I manually changed my CSS directly in the template HTML editor, and got it all looking the way I wanted, I then connected my blogger account to my G+ account. Now when I go into the templates HTML editor all I see are the HTML lines of code. I can no longer edit my CSS directly in that editor. I am assuming it has something to do with me linking Blogger to G+.

Just a heads up...

Now to figure out what to do as I want to shorten my header color bar there.

The change wasn't related to your connecting blogger to G+, it was a change in the template interface.

I think you're still OK. When the editor initially opens the CSS is collapsed. There should be an arrow (ok, a triangle) along the left side to expand it. If you don't see that scrolling down usually makes the full template available - including the CSS.

I was hit by that too, took me a few minutes to settle down and figure out how to access my code.

--- Denise

Darter02 · August 29, 2013

! You ROCK! I totally didn't see that arrow down to open the CSS codes. THANK YOU!!!!!!!!!!!!

Matching Blogger to Use With Smugmug

Comments