Linking Blogs and Websites

This article looks at the answers to a very common question on the Blogger help forum: "How do I link my blog on blogspot to my web site?"

Summary

There are many ways of linking blogs and websites.

The simplest is to give them mutual links, ie put a link to the blog onto the website, and a link to the website onto the blog.

The major advantage is simplicity - but there are disadvantages because you have to maintain two separate sites, your readers/customers may get confused or may miss the link, and it may not be good for attracting search traffic - although this  only matters if you are replying on search to bring visitors to your blog.

Another option is to use RSS feeds to display content from one site (blog, website) on the other.   These work better for displaying content from sites that keep getting new posts, rather than sites that have updates made to existing posts:  usually your blog is the site that gets new posts, so you may want to put an RSS feed from it onto your website.

Or you could display the content of one site (website or blog) right inside the other site:   <iframe> statements provide this option.

Mutual Links:

Putting a link to your blog onto your website

To do this, you will need to talk to whoever built your website, and probably pay them to change it:  you cannot control your website from inside your blog, unless your website was built with Blogger in the first place.

They will (should, anyway) ask you some questions about how you want it to work, for instance:

• Where should the "blog" link go on your website?
• What happens when someone clicks it - are they taken to your blog, or to a view of it that opens inside your website?
• Should it be a link at all, or do you just want a "feed" of blog posts to show up in a window inside your website?

Putting a link to your website onto your Blog:

You do this same way you'd do any other link.

If you want it in an individual Post, then write the post, choose the text where you want the link to be, and choose Link.  Then enter your website as the URL.

If you want it in the sidebar, header or footer, then:

• Follow the usual Add a Gadget procedure, 
• Choose which type of Gadget to use (eg a picture gadget), and enter your website's address (URL) as the "link to" or similar option.  (The options that are available depend on what sort of gadget you use).

If you want it to be a menu bar entry (similar to ones set up by the Pages feature) - then you will have to do some work in the menu.  There is more detail about this in Putting your Posts into Pages in Blogger.

RSS Feeds:

Put a feed from your blog inside your website

It is possible to build a RSS-feed from a Blogger blog.   The best way is to use Feedburner (http://feedburner.google.com), which gives you a range of options about how this feed should work.   You can even make several different feeds, each of which has slightly different features.

Therefore, provided your website is built in a tool that can display RSS feeds, the people who maintain it should be able to set it up to take a "feed" from your blog.

This means that you keep updating the blog within blogger, but that the words you write are taken into the website.   What is taken in probably does include the formatting you used (bold, italics, centering etc) and links that you used, but probably won't include

• the colour scheme 
• things that are in the sidebars, header and footer.   

And the overall layout will look a bit different to how it looks in your blog


Another option, especially if the people who built your website don't know very much about RSS feeds or Blogger, is to shift your blog onto some other system that is already integrated with your website or web-host (that you simply haven't been using up 'til now).   Under this option:

• You will need to learn how to use a new blogging system (which may not be quite as easy as Blogger)
• You may or may not be able to import the content of your current blog in blogger
• The new blog will look different, and will have different features to the ones you have in blogger.
• Your readers will need to be told where you new blog is

Shifting to a different blogging system may be cheaper initially (especially if your web-hosting-plan already includes a blogging feature that you're just not using).  It may not be cheaper in the long term (Blogger is free:  a blogging-tool inside web-hosting company may chaarge an extra annual fee like you already pay for your website).   Make sure that costs (initial and on-going) are discussed before you decide what to do.

Embedded Displays using iFrame statements:

I've seen a comment in the google help forums that you can insert a web-page using an iframe, like this:

<iframe
allowtransparency="true" scrolling="yes" frameborder="0" width="600" height="800"

src="YOUR BLOG URL, INCLUDING THE HTTP:/"
>
TITLE-FOR-THE-FRAME
</iframe>

I have yet to try this out, but if it works as well as I suspect, it could be a very powerful technique to displaying content either way (but not both ways at the same time - that would be an infinite loop).

This would put some Blogger functionality re leaving comments inside your website, so - I think - you would not be able to sell access to the website because that violates Blogger's Terms and Conditions about re-sale.

---

Related Articles:

Static Pages in Blogger

Putting your Posts into Pages in Blogger.

Setting up Google Analytics for your blog

Using your custom domain for something other than Blogger

Is search traffic relevant for your blog?

Removing the attribtion gadget by unlocking and then removing it.

This article documents removing the attribution gadget from Blogger by unlocking and then removing the gadget.  This method no longer works (last tested 20 Sept 2010 - the gadget is automatically re-added to the blog's footer section), but the technique may be useful in future.   

See the main article (removing the attribution gadget from blogs with Designer templates) for the most recent information about techniques that do work and for background information about the topic

WARNING:

---

I have not checked the Blogger Terms and Conditions to find out whether you are allowed to remove the Attribution.   Even if they don't mention it today, a requirement to keep the statement could be added tomorrow.   This advice does not mean that I, or Google/Blogger, are saying that you should/can/may/must remove the attribution statement.

---

Note:  the following instructions relate to the pre-Sept 2011 Blogger interface.   They will not be updated, because this method (generally) does not work.

How to remove the Attribution Gadget by unlocking and then removing it.

1  Go to Design > Edit HTML.

2  Take a backup:
Download a copy of your template:  this is a backup - save it somewhere safe, in case things go wrong.

3  Find this section in the template:

<!-- outside of the include in order to lock Attribution widget
      <b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section> -->

The simplest way to locate it is to use your browser's search function (Edit > Find in Firefox, similar commands in other tools), and look for "lock Attrib".


4  Change

locked = 'true' 

to

locked = 'false'

5  Preview the template change, to check that everything else is ok.  If not, fix the problem.  (The attribution will still be showing at this stage.)

6  Click Save Template


7  From the Design > Page Elements tab, edit the attribution gadget.  It will now have a Remove button on the left hand side.  Click this, to remove the gadget from your blog.

8  If you want to, add an an alternative attribution notice.

---

Related Articles: 



Removing the attribution gadget from blogs with Designer templates (current approach)

Giving your blog a credits statement

Types of templates in Blogger.

Template Designer now live in Blogger.

How the data in your Blogger blog is organised

Displaying a gadget only on the home page - or only on a specific page

This article is about how to set up a gadget / widget in Blogger so that it is only visible on the first place that a reader sees when they visit your blog (often called the "home page").  It is one of a series of articles about controlling what goes on the homepage of your blogspot blog.

Front Page Bob
By Paginator (Own work)
 [CC-BY-3.0], via Wikimedia Commons

There are a number of reasons why you might want to put a gadget only the screen that shows when a visitor first navigates to your blog's home page.

You may want to show a welcome message, or a topic-index page, or to give a view of your recent tweets or some other RSS feed.    

No matter what the reason, the process is very similar:

How to make a gadget only appear on the first page:

Note:  in Blogger, the words "gadget", "widget", and even "page-element" all mean the same thing.  I generally use "gadget", because the Page Elements tab currently says "Add a Gadget".  But they're absolutely the same.

1   Add the gadget:

Do this in the usual way.

2  Place the gadget

Drag-and-drop the gadget to the place where you want it.   It may be over or under your blog-posts gadget, or in a totoally different place.

A popular place for a gadget that is going to look like a "home page" would be in the Body section, just above the Blog Posts gadget, where "Test Gadget" is in this example:

3   Find the Gadget-ID  in the usual way.


4  Find the code for your gadget:

Edit your template  - and initially don't click expand widget templates.

Use your browser's text search tool (Edit / Find in Firefox, ctrl/F in Chrome) to look for the widget name that you noted in step 3.  Notice what comes after it.   In this example, it's the line for Blog1:

          <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Click on the Expand Widget Templates checkbox (so it's turned on)

After the expanded template has downloaded, find the widget name again.  This time it will look a bit longer (the exact details depend on what type of widget/gadget it is.)

 <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

5   Add conditional formatting:

You need to put conditional formatting code around the code for the gadget - makings sure that it doesn't go around the code for anything else!  (which is why you noted what comes afterwards in step 4)

And to avoid leaving blank space where the gadget would have gone, you need to update a "hide" instruction to apply it to the gadget-id you noted in step 3.

The code to use is this.   Put the gadget-id instead of the XXX.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

THE red CODE FOR YOUR GADGET GOES IN HERE 

<b:else/>

<style type='text/css'>
#XXXX {display:none;}/*remove blank space that the gadget leaves*/
</style>
</b:if>

The example above looks like this, when the code has been added:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>

<b:else/>

<style type='text/css'>
#Text1 {display:none;}/*remove blank space that the gadget leaves*/
</style>

</b:if>

</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

6  Check that it's worked

Preview your blog before you save the changes:  check that the the widget is visible.

Save the template changes, and look at your blog.  Check that

• The widget is on the first page
• The widget is not seen when you look at an older page (eg one from your archive)
• The other elements of your blog (other widgets, blog post titles, dates and contents) are all as you expect them - on the first screen, and on other screens too.

If anything is wrong with how your blog is working, go back to the template editor (Design > Edit HTML), and upload from the copy of your template that you made at the beginning of step 1.   This will let you blog work properly, while you figure out what went wrong.

How to display a gadget only on a specific post or page

Follow exactly the same approach as above.

But instead of  

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Make the conditional statement based on something else.

This can be a different condition, or a specific page URL.    For example to display a gadget only on a specific page, use this code, and put the address of the page instead of POST-URL:

<b:if cond='data:blog.url == "POST-URL"'>>

To display a gadget on every page except a specifc one, replace the double equals signs (==) with the HTML code for not, which is an exclamation mark followed by an equal sign (!=).   For example:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

---

Related Articles: 

Controlling what goes on the homepage

Adding a gadget / widget / page-element to your blog

Editing your blogger template

Putting a slideshow from Picasa onto your blog

Getting the HTML code to put a picture into your blog

Making a gadget that looks like a post

Changing the template-name and designer-name

This article is about changing the template-name and the template-designer-name associated with your Blogger template.

If your blog has a template from Google (and indeed from many third-party template providers too), the code has a documentation section at the top, which says the name of the template, and perhaps the date it was created and the name & website of the template designer.

You can see the header in your template by editing the template in the usual way - you don't need to expand the widgets.   Near the top of the code, just after   <b:skin><![CDATA[/*   there will be something like this:


In blogs with Designer templates:

/* -----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Josh Peterson
URL:      www.noaesthetic.com
----------------------------------------------- */  

In blogs with Layout templates:

/* -----------------------------------------------
Blogger Template Style
Name:     565
Date:     28 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

In blogs with Custom templates:

/* -----------------------------------------------
Blogger Template Style
Name:     Rounders 2
Date:     27 Feb 2004
----------------------------------------------- */

Notice that in each case, the code is between /*  and  */
These characters tell Blogger to treat the words between them as comments and not to show them when the blog-post is turned into a web-page for your readers.

If you make changes to your blog template, it's a very good idea to make some notes about this in the documentation section, so that people who look at it later on (including you!) know what you've done and why.  For example:

/* -----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Josh Peterson
URL:      www.noaesthetic.com
Updates:   August 2010:  removed shadow around outer body border - as per instuctions from XXX (because it looks ugly in IE)
----------------------------------------------- */

But as well as this, you can also make changes to the existing information, for example:

/* -----------------------------------------------

Blogger Template Style

Name:     Simple

Designer: Josh Peterson and Freda Frog

URL:      www.noaesthetic.com

----------------------------------------------- */  

Any elements in Blogger (eg the attribution gadget) that use the existing data will pick up the change you make.   In the example above, the attribution gadget becomes:

You can also change the template name, for example

/* -----------------------------------------------
Blogger Template Style
Name:     Not-quite-so-Simple
Designer: Josh Peterson and Freda Frog

URL:      www.noaesthetic.com
----------------------------------------------- */

Changing the template-name has two side effects:

• It makes it possible to successfully delete the attribution gadget (by either unlocking and removing it, or commenting out the code) and

• Your blog may not get any new features and bug-fixes that Blogger apply to existing templates (ref Disadvantages of editing your template).

---

Related Articles:

Deleting the attribution gadget

How to edit your blogger template

Disadvantages of editing your template.

Adding a new CSS (formatting) rule to your blog's template

This article is about how to add a new Cascading Style Sheet (CSS) rule to your blog's template, including its mobile template.

(It assumes that you know the CSS command for the rule you want to add:  check a CSS reference guide if you need help to write the command - I've found that Sitepoint's  HTML Utopia: Designing Without Tables Using CSS guide is very useful.)

What are CSS rules

CSS rules are a way to apply standard formatting to HTML:  you say what formatting rules are in the rule definition, and then just use the rule name everywhere else in the blog that you want to apply that particular format.

It's useful because it lets you change the formatting throughout your blog by making a change in only one place (the rule).

If your blog has a Designer or Dynamic template, then adding a CSS rule is very easy.   (Ref:  "What type of Blogger template do I have?")

If you're using a Layout or Custom template it's a little more complicated - and you should make sure you're aware of the disadvantages of changing your blog's template.

Adding a CSS rule to a Designer or Dynamic template

1  Log in to Blogger, and go to the Dashboard.


2  For the blog that you want to add the rule to, choose Design > Customize > Advanced


3  Scroll to the bottom of the list of options, and click Add CSS.    This this opens a panel on the right hand side of the screen.


4  Enter the new rule underneath any other rules that are already listed in the panel, or apply the change you want to the rules are already there.


5  If you want the rule to apply on your blog's mobile template as well as for desktop visitors, then enter a second version of the rule with ".mobile " at the beginning - AND see the note below about extra one-off steps for mobile rules.

Example, one of my blogs has these rule to format the lines in certain tables:

.table1stLine td {
padding-top: 10px;
}
.tableLastLine td {
border-collapse: collapse;
border-bottom: 1px solid green;
padding-bottom: 1em;
}

To get these rules to apply when visitors using smartphones or tablets look at my blog, I also needed to add these rules:

.mobile .table1stLine td {
padding-top: 10px;
}
.mobile .tableLastLine td {
border-collapse: collapse;
border-bottom: 1px solid green;
padding-bottom: 1em;
}

5  Click Apply to Blog (top right corner of the screen),

NB  The Add CSS window now shows you any rules that have been added to the template via the window previously.

One-off extra steps to make sure that the mobile rules are applied

If you have added one or more .mobile  rules, then to make sure that they are applied you also need to:

1   Apply a mobile template to your blog, and

2   Make sure that you have chosen the Custom option for it.  
(To start with, Blogger shows Default - you need to change this with the drop-down list)

Tip:  you can check that a mobile template has been turned on for this blog by editing your template and searching for this text:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

If the text is present, then you have enabled a mobile template.   If it's not there, then you need to apply a mobile template in the usual way:   do not try just adding that text.

Adding a CSS rule to a Layout template

1  Log in to Blogger, and go to the Dashboard.

2  Edit your template in the usual way.

3  Insert the new rule immediately before this text:

]]></b:skin>
  </head>

Note:  it's likely that there will be other rules already before the quoted text.  Make sure that you don't interrupt them, ie that your new rule is placed after the close-bracket } for the rule that's there already, and before the first ]

Adding a CSS rule to a Classic template

1  Log in to Blogger, and go to the Dashboard.

2  Edit your template in the usual way.

3  Insert the new rule immediately before this text:

  </head>

Note:  it's likely that there will be other rules already before the quoted text.  Make sure that you don't interrupt them, ie that your new rule is placed after the close-bracket } for the rule that's there already, and before the </head> statement.

---

Related Articles

Apply a mobile template to your blog

Advantages and disadvantages of changing your blog's template

What type of Blogger template do I have?

Remove underlining from menu-bar and post-title links

If you underline the links on your blog, then the page-links and post-titles are usually underlined too. But you can turn underlining OFF for these items, and adjust the spacing to make them stand out.

Underlining links

Recently, I made all the links on Blogger-Hints-and-Tisp blue, because "everybody" knows that real hyperlinks are "always" blue.

I also set them to be underlined because ProBlogger underlines his links, and I guess that he's done the research and knows it's a good thing to do.

 Also, I'm aware that colour-blind people sometimes find colour-only links difficult to distinguish.


Changing the links was easy: I just added some CSS rules to my template:

a:link {
text-decoration:underline;
}
a:visited {
text-decoration:underline;
}
a:hover {
text-decoration:underline;
}

The first rule underlines links that the reader hasn't visited yet.

The second does links that they have visited.

And the third says to keep the underlining showing even when someone hovers their mouse over it.

But adding these rules had one ugly side effect: underlinig the links also underlined post-titles, and the things in the menubar. This made the blog look "clunky", so I had to turn underlining off for certain links.

How to remove underlining from some hyperlinks

Horizontal Tab / Menu bar

To turn off the underlining for the items in the horizontal menu bar (where people usually put a Pages or Labels gadget), add this CSS style:

.tabs-inner .widget li a
{
text-decoration: none !important;
}

Notice the !important in that statement: roughly speaking, it says that even if a rule elsewhere in the blog says to underline links, this rule is more important than that one and so this rule should be followed.

Post titles

To turn off the underlining for the post titles, add this CSS rule:

h3.post-title a,
h3.post-title a:visited
{
text-decoration:none;
}

Note that this time I combined the instruction for both visited and un-visited links into the one CSS style rule. I didn't bother adding the !important (eg to make it "text-decoration:none !important);" - but I would have done if I'd found that the blog wasn't displaying correctly.

Using spacing to make post title stand out

Looking at the post titles, I realised that they were a bit cramped. So I added a bit of blank space to them by changing one piece of code, from:

h3.post-title{
font: $(post.title.font);
margin: 0 0 0;
text-align: left;
text-decoration: none;
}

to

h3.post-title{
font: $(post.title.font);
margin: 0 0 10px 0;
text-align: left;
text-decoration: none;
}

This time, instead of just adding a new rule, I made the change in the template myself. To do this, I:

• Went to Template > Edit HTML > Proceed
• Downloaded a backup copy of the template,
• Used the search-tool in my browser to find the code I wanted to change.

This wasn't quite as easy as adding CSS through the Template Designer > Advanced tool, but it means that the rules will be kept together and so easer to change in future.

This was just a few small change to the margin - but it made a big difference to the "look" of my posts.

---

Related Articles

Adding a new, or updated, CSS rule to your blog

Centering the post title in your blog

Removing "Powered by Blogger" from Designer-template blogs

Planning changes to your blog - in private

Dynamic views in Blogger: What are they? What should you do about them?

This article is an overview of Blogger's new "dynamic views", including advice about their immediate implications for our blogs.

Blogger and Dynamic Views:

In late April 2011, Blogger announced a new feature called Dynamic Views. There was a post about it in Blogger Buzz, Google's blog about Blogger.

As well, when people log into Blogger for the first time since the launch, they see an "over-the-top" window on the dashboard, placed so it has to be reacted to (either Dismiss or Learn more) before using most of the dashboard links.  

If you have multiple Google accounts, you will be shown the pop-up the next time you log into each one of them.

For a while, the Learn More link wasn't working:  it's been fixed now, but just in case, you can find the article for blog owners and authors here (at time of writing, anyway).  It links to another article for blog-readers, which explains how they can view blogs using dynamic views, without going into technical details.



What are Dynamic Views:

Basically, they are a totally different type of blog-template, that display posts from your blog's Feed (ie not the blog itself) in some new ways.  The designs look good - though most rely on your blog having an excellent picture for each post, and you can't (yet) control which picture is used.

Rather than trying to describe them, it's probably easiest if you take a look for yourself - these links take you to this blog (ie Blogger-HAT) in each  of the templates:

• Flipcard  
• Mosaic  
• Sidebar  
• Snapshot
• Timeslide

What are the consequences of this change

In the short term, no one (except possibly Google) is sure of the implications of dynamic templates.   You can't make them the default way to view your blog yet although for there is a simple way to give your readers the option to switch to a dynamic view.

But this comment, from the end of the Blogger Buzz announcement, is probably significant:

We’re previewing these templates early on so we can incorporate your feedback for a wider launch soon. At that time you’ll be able to customize these templates and select one for your blog. Please let us know what you think!

What we're seeing right now isn't the finished product.   (Which is just as well, because I have a lot of issues with the templates as they stand.  For starters: no statistics, no gadgets, search is limited to what's in your blog's feed, no comments, focus on pictures but no control over the main image for each post).  I expect these to be fixed - although I'm concerned about why they're limiting the view of blog to what's in the feed, unless it's part of the long-term plans.

For now, though, all you can do is either accept that some viewers will look at your blog using dynamic views and that this may mean you statistics aren't correct - or switch the dynamic templates off for your blog.


Turning off dynamic views for your blog:

To start with, dynamic views are enabled for all blogs.   But you can turn them off:

• Go to Settings > Formatting
• 2/3 of the way down the page, there is an option for Enable Dynamic Views
• Set it to Yes or No, depending on what you want to do.
• Press Save at the bottom left corner of the page (you need to scroll down to it). 

If you do this, then any visitor who trys to view your blog using a dynamic view is shown a message (complete with Blogger logo) saying:

Sorry, dynamic views aren't available for this blog.
You'll be redirected to the blog homepage [link to the home page] momentarily. Learn more

To turning off, or not?

Initially, I wasn't going to bother turning dynamic views off for my blogs, even ones where dynamic views don't make sense eg because the blog looks more like a regular website.

But a later announcement of the Chrome extension for Blogger says that:

will automatically detect [your reader is] viewing a Blogger blog, and then display a Blogger icon (the orange ‘B’!) in [their] address bar which lets [them] select and view the blog in one of the five new dynamic views.below.

In other words, this will tell people [who use it] that they are looking at a site made with Blogger, even if you have gone to a lot of trouble to hide the fact.

Given that, I will be busy for the next 15 minutes, changing the setting to "off" for all except two of my blogs.   

---

Related Articles: 



Letting your readers switch to your blog in a dynamic view.

Announcement about dynamic views in Blogger Buzz,

Dynamic views - information for blog readers

Dynamic views - information for blog authors, publishers and administrators

Chrome extension for Blogger dynamic views

Planning changes to your blog - in private