July 27, 2012

Set Sidebar Module To Display Only On Set Page

With script added to the Embed Your Own HTML module, you can add content to your blog's sidebar which will only display on a designated page of your site. You may want to use the code if an advertiser on your site only wants an ad to display on the front page or category index pages.

First, we'll highlight how to display content on a specific page of your site. If you want to display a sidebar module with a specific category, jump to the next section.

The code you will need to force the content to only display on a specific page is:

<div id="displayAdDiv" style="display:none;">

INSERT SIDEBAR MODULE CONTENT HERE

</div>

<script language="javascript">
var AdDiv = document.getElementById("displayAdDiv");
if ( window.location == "http://example.typepad.com/blog/" )
{
AdDiv.style.display="block";
} else {
AdDiv.style.display="none";
}
</script>

Within the above code, you will need to replace two sections:

INSERT SIDEBAR MODULE CONTENT HERE: Replace this text with the text or code for the module.

http://example.typepad.com/blog/: Replace the URL with the URL of the page where you want the content to display.

If you prefer to display a sidebar module on all the index pages for a specific category, the code needed is different than a single page:

<div id="adCategoryDiv" style="display:none;">

INSERT SIDEBAR MODULE CONTENT HERE

</div>

<script language="javascript">
var pathis = window.location.pathname;
new_array = pathis.split('/');
subdirectory = new_array[2];

var CategoryDiv = document.getElementById("adCategoryDiv");
if ( subdirectory == "category-folder-name" )
{
CategoryDiv.style.display="block";
} else {
CategoryDiv.style.display="none";
}
</script>

To display the added content on all index pages for a specific category, you will need to replace several sections of the above code:

INSERT SIDEBAR MODULE CONTENT HERE: Replace this text with the text or code for the module.

Category: All 5 instances of the Category text in the code will need to be replaced with the category name. If the category name is more than one word, use one distinctive word to represent that category.

category-folder-name: For category-folder-name, you'll want to go to your blog, click the category link, and copy the folder name of the category. For example, if you want to use the category Music, the folder is most likely /music/ and you'd add "music" to replace category-folder-name. If you want to use the category The Rolling Stones, however, the folder is most likely /the-rolling-stones/ and you'd add "the-rolling-stones" to replace category-folder-name.

Once you have the code for the module, go to Design > Content, select the Embed Your Own HTML, and click Add This Module. In the pop-up box, paste in the code you configured for the module and click OK. After rearranging the module to where you want it to appear in the sidebar, click Save Changes.


Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Typepad Services badge