Using OS Openspace Web Maps On

Using OS OpenSpace Web Maps on

Blogger

It is possible to use an OS OpenSpace Web Map on Blogger, however a few alterations are required for it to work optimally. In this tutorial, a step-by-step procedure will be given on how to make these necessary alterations to the global blogger CSS file and how to insert an OS OpenSpace Web Map into a post.

The first step requires you going to log into your blogger account and go to your blogger home page. Once here, you can access the template settings by clicking on the drop down options list found near the top of the page and selecting “template”:

Another way of accessing the template page is to go to your BlogSpot address, and access “Design” located at the top of the page, left of the “Sign Out” button.

Once on the Template page for your blog, click on the “Edit HTML” button that is beneath the “Live on Blog” image:

This will take you to the page where the CSS for your blogger is stored. To prevent issues with the OS OpenSpace Web Map, two CSS areas will need to be removed.

To quickly navigate to the code that needs to be altered, you can use the “find” function which is built into most browsers. To use this function, click inside of the area that contains the code for the blog. Press “Ctrl + F” for Chrome, Firefox and Internet Explorer, or “Cmd + F” if using Safari on a Mac, for the search box to appear.

In the search box that appears, type:

.post-body img, .post-body .tr-caption-container

If you wish to manually navigate to the code, it can be found starting on line 388.

Please note that the “Revert changes” and “Revert widget templates to default” options will not undo the following alteration. It is therefore recommended that you make a backup of your template before proceeding.

Highlight the code from lines 388 to 402 inclusive and delete the code. Below is the code that needs to be removed:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {

padding: $(image.border.small.size);

background: $(image.background.color);

border: 1px solid $(image.border.color);

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

}

.post-body img, .post-body .tr-caption-container {

padding: $(image.border.large.size);

}

Once this code has been removed, click on “Save template” that is located above the code container. The template for your blog is now ready for OS OpenSpace Web Maps.

Go back to your blogger home page and click the “Create new post” button:

This will take you to the “Create post” page. From here, enter in the “Compose” text editor any information that you want to be contained in the post prior to showing the OS OpenSpace Web Map. Where you wish for the OS OpenSpace Web Map to be shown, type in a string that will be a unique string within the post e.g. !UNIQUE!. This string is temporary and serves as a marker for where the OS OpenSpace Web Map will be placed.

Once the post is ready to be published, switch to the HTML text editor. Use the browsers find function to locate your unique string, as used previously in the tutorial. Highlight the string from the opening <div> to the closing </div> e.g.:

!UNIQUE!</div>

Copy the entire output code from the OS OpenSpace Web Map Builder and paste the code to replace the unique string. Remember to insert your API key into the OS OpenSpace Web Map code where it requests it.

Your OS OpenSpace Web Map is now inserted into your post.

Please be aware that due to existing limits with OS OpenSpace Web Maps, only one map is able to be displayed per page.