Adding a Blogger page to a Zenfolio website

This is some work around code one can use to embed the blog into a Custom Page in Zenfolio. It is an iframe and where it says yourblogURL, please insert your URL.

You can adjust the widths and heights to suit yourself.


iFrame Code for Zenfolio page


What this does, is puts that page, inside of an “iFrame” (has nothing to do with iAnything else) – basically it’s a FRAME – meaning you’re putting an entire external website inside of a smaller area on your own page.  This can lead to some unexpected problems however.  Read on!


Editing the Blogger page to look/fit better

Getting RID of the NavBar –


How to Remove Blogger NAV Bar

To Turn Off the Blogger Navigation BarJust copy the Navbar1 code below and paste it anywhere inside your blog XML file as a CSS code after the /* Variable definitions section. If you’re not sure what this means, follow these steps:

#Navbar1 {

margin: 0;

padding: 0;

display: none;

visibility: hidden;


1. Login to your blog and click the Edit HTML tab inside the Template tab.

2. Inside the file, locate the section body { ..... } and paste the Navbar1 code below this section, after the closing bracket.


4. That’s it. You’re done.

Getting RID of the Header/Title/Logo – 

How to Remove Blogger Header

Howto Remove Blogger Header. Maybe you already removed the navbar and maybe customizing the header by removing the border wasn’t enough, and you just want to remove it completely.

Go to ‘dashboard’ and select ‘layout’ and then ‘edit html’.

Scroll down until you get to the “#header-wrapper” section.


#header-wrapper { width:660px; margin:0 auto 0px; border:0px solid $bordercolor; }to

#header-wrapper { width:660px; margin:0 auto 0px; border:0px solid $bordercolor; display:none; / }

and save.


Small Caveat

I discovered that using the Link List Gadget in Blogger within the iFrame has some bad behaviour on certain browsers for an external links – as it will get stuck inside the iFrame as opposed to opening a new window or completely reloading the current one.

The gadget is at fault due to no functionality to specify at “Target”.  Editing the code on Blogger may fix this.  For now – I just removed all external links.  Built in and Custom ZF pages don’t seem to have the problems.  I can’t tell if the pages are loading in new windows or within the iFrame but they show no artifact of it.

Caveat 2

While testing this out in different browsers I discovered not only that link handling was unstable across different browsers – but the Blogger Gadgets are also unstable – some will work in one browser while sometimes they don’t in another.  Support for Blogger is really poor – and it’s really seemingly depreciated as a blogging tool with almost no updates since 5+ years ago.

Bottom line – if you have to use an iFrame – do not post any links from within your blog.  (That’s pretty limiting except for pure text and images. – Tumblr could work)

No links makes me reconsider the value of even using an iFrame now.  The Blog may absolutely need to be an independent website/external link.  Until Zenfolio provides an internal blog function – that’s probably just the way it will be most functional.

It is a band-aid after all.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: