Advanced Blog Documentation

Use these techniques only if you are comfortable working with HTML code and CSS style sheets.

Adding Additional Editors

Add Editors and Commentors [BETA]

This version of the blogging tool allows you to add users with Penn State Access Account userids as editors or commenters to your blog.
Note: This tool is still in beta mode and has not been tied in to any Penn State directory or blog-internal searches.

Potential Editors Must Login

In order for you to add a Penn State person as an editor to your blog, you must ask that person to log in to http://blogs.psu.edu and create a blog.

Add an Editor

  1. Login and enter your blog.
  2. Click Manage in the top links then select Users.
  3. Click the link Add a user to this blog.
  4. Navigate through the list to add a user (the list may be ordered by when a person created a blog). You will have to click through each page in the list to find the appropriate user. If you do not see the appropriate user, contact that person and ask him or her to log in to http://blogs.psu.edu.
    Note: The search option is not functional at this time.
  5. Check the entry for the appropriate user then click Continue.
  6. Check the appropriate role name then click Confirm. Names and descriptions of selected roles are given below:
    • Blog Administrator – full rights to edit the blog
    • Editor – Can write and edit entries, change categories and upload files.
    • Author – can write an edit entries and upload files, but change categories
    • Contributor – can write and edit entries, but not upload files
    • Moderator – can approve and edit comments from others
    • Commenter – approved commenter
    • Design – Can edit templates only
    • Webmaster – Can only publish pages and edit templates

Delete an Editor

  1. Login and enter your blog.
  2. Click Manage in the top links then select Users. You will see a list of users with different access permissions.
  3. Place a check for any user you wish to remove, then click the Remove button above the list.

Change Permissions for an Editor

At this time you must delete a user, then add the individual again with the updated permissions.

Reset ACLs (Blogs Directory Permissions)

For a small percentage of users, the ACLs (permissions) for the /blogs/ directory must be reset in order for the Blogs at Penn State to post entries properly. You will only need to do this if you have activated your Penn State Personal Web space, but receive a directory permissions error.

To Reset ACLs

  1. Login to https://www.work.psu.edu
  2. Click the Reset PASS Permissions to default (ACL Reset) link in the left menu. You will be asked to log in again.
  3. Click the Proceed button in the next window.

This will change all settings for all directories back to the default settings. Please allow 15-30 minutes for processing.

If you need to to set custom ACLs, please post a message to blogs@psu.edu

If the above steps do not fix your problem you may need to recreate your www folder. Please see http://kb.its.psu.edu/psu-all/hd/deletedwwwfolder for steps to take. Note that between steps 1 and 2 you'll also need to create a folder called "blogs" within the www folder.

Linking to Blog Headlines in ANGEL

The following options are available to instructors using both the ANGEL Course Mangement System and the Blogs at Penn State who wish to create links between the two tools.

Option 1 - Link to Blog in ANGEL

The easiest option is to create a Link in ANGEL to your blog in either the Lessons Tab or the Communicate Tab to your Blog. See the ANGEL Help & Information Page for more detailed instructions.
Note: Cookies are required to view dymanic ANGEL Help Documents.

Option 2 - Create Headline Feed in ANGEL

You can use the Feed2JS utility hosted at Penn State Education Technology Services to create JavaScript Code which will display the contents of your blog news feed within ANGEL

Find Subscription Feed

  1. Open the public version of your blog.
  2. Look for the Subscribe to this blog's feed link in one your sidebars.
  3. Right click on the link and copy the link location or URL.
    Note: Make sure the link ends with a .xml extension.

Create JavaScript Code

  1. In a new browser window, open http://ets.tlt.psu.edu/feeds/build.php
  2. Paste the feed link in the URL field.
  3. Select appropriate display options for the Show Channel field.
  4. To display all entries, leave Number of Items to Display set to "0". Change the number only if you want only the first few entries.
  5. Select appropriate options for Show/Hide Item descriptions.
  6. Select Yes for Use HTML in item display. This will preserve the formatting of your blog entry.
  7. Select appropriate option for Show Item posting date?
  8. Leave Time Zone Offset set to "feed" or some other appropriate value.
    Note: For Pennsylvania, the value is -5 for Daylight Standard and -4 for Daylight Savings.
  9. Select appropriate setting for Target links in the new window.
  10. Check the option for use UTF-8 Character encoding. This will ensure that "exotic characters" are correctly displayed.
  11. Check Yes for Podcast Enclosures.
  12. Scroll to the top of the page and click the Generate JavaScript button. This will open a new window.
  13. Copy the JavaScript code into a Word or text document. It begins with a <script> tag and ends with a </noscript> tag. See example code below.
    <script language="JavaScript" src="http://ets.tlt.psu.edu/feeds/feed2js.php?src=http%3A%2F%2Fwww.personal.psu.edu%2Fxyz123%2Fblogs%2Fmyblog%2Findex.xml&amp;chan=y&amp;date=y&amp;utf=y&amp;html=a" type="text/javascript"></script>
    

    <noscript>
    
  <a href="http://ets.tlt.psu.edu/feeds/feed2js.php?src=http%3A%2F%2Fwww.personal.psu.edu%2Fxyz123%2Fblogs%2Fmyblog%2Findex.xml&amp;chan=y&amp;date=y&amp;utf=y&amp;html=y">View RSS feed</a>
    </noscript>

Feeding Headlines into ANGEL

Headlines can be posted in any tool which allows you to switch between Smart Text and HTML formats including Announcements, the Syllabus Editor and pages in the Lessons Tab. This demo will use the ANGEL Page tool.

  1. Create an Announcement in ANGEL under the Communicate Tab. See the ANGEL Help & Information Guide for full documentation.
  2. Paste the JavaScript code generated in the step above into the Announcement field.
  3. Change the Format menu from Smart Text to HTML Text.
  4. Set the End Date for some date after the semester ends or else the announcement will disappear.
  5. Save the announcement. When the students view the announcement, the headlines will be displayed. The headlines will update themselves as you add entries to your blog.

Headlines will be displayed in the Announcements area for the course and in the My Announcements nugget in each students personal profile.

Create Custom Sidebar Widgets (About Me & External Links)

Widgets are snippets of code which allow you to add different types of content to the sidebar of your blog. Movable Type allows you to create custom widgets of your own.
Note: The following documentation assumes familiarity with HTML. Information about HTML can be found at

Create A Custom "About Me" Widget

  1. Log on to http://blogs.psu.edu and enter your blog.
  2. Click Design in the top menu then select Widget Sets.
  3. Click Edit Widget Templates in the lower right. A list of available sidebar widgets are displayed.
    Edit Widget Templates
  4. Click the link for Create Widget Set in the upper left.
    List of widgets
  5. Name the item About Me.
  6. Place the following code in the Module Body field.

    <div class="widget-archives widget">
    <h3 class="widget-header">About Me</h3>
          <div class="widget-content">
          Your Text Here
          </div>
    </div>

  7. Click Save, then then click Design and Widget Sets again to exit the widget editor.
  8. Click First Widget Manager at the bottom to add the widget to your sidebar.
  9. Click Publish Publish button(the circle arrow button) to implement the widget, then View Site to view changes.

Create an External Links Sidebar Widget

  1. Follow Steps #1-3 for creating an “About Me” widget.
  2. Create a new widget and name it My Links.
  3. Place the following code in the Module Body field. Create as many LI items for as many links as you need.

    <div class="widget-categories widget">
        <h3 class="widget-header">HEADER TITLE HERE</h3>
        <div class="widget-content">

         <ul class="widget-list">
              <li class="widget-list-item"><a href="URL HERE">LINK TITLE HERE</a></li>
              <li class="widget-list-item"><a href="URL 2 HERE">LINK 2 TITLE HERE</a></li>
         </ul>

         </div>
    </div>

  4. Enter in a URL (e.g. http://www.psu.edu) in the "URL HERE" section. Enter a Link Title (e.g. "Penn State Home Page" where indicated.
  5. Click Save, then then click Design and Widget Sets again to exit the widget editor.
  6. Click First Widget Manager at the bottom to add the widget to your sidebar.
  7. Click Publish to implement the widget, then View Site to view changes.

Edit a Widget

You can tweak existing widget or borrow code for your own widgets. To edit a widget:

  1. Log in an enter your blog.
  2. Click Design in the top menu then select Widget Sets.
  3. Click Edit Widget Templates in the lower right. A list of available sidebar widgets are displayed.
  4. Click the name of the widget to view HTML tags.
  5. Edit widget as needed, then click the Publish Site (circle arrow) button in the top links to implement the widget, then View Site to view changes.

Redirect Your Personal Homepage to Your Blog

In the current blog configuration, if you want your blog to be your Penn State Personal Homepage, you will need to create a redirect page.

  1. Find the URL of your blog by clicking View Site button or link.
  2. Create a blank HTML document called index.html (the homepage). Make sure you are in the view HTML code window.
  3. Insert the following HTML code into your document

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Refresh" content="0; url=BLOG URL HERE" />
    </head>

    <body>
    </body>
    </html>

  4. After the url=tag, copy and paste the URL of your blog.
  5. Download and archive your old home page, then upload the new index.html into your www directory via SFTP or the Penn State Portal Pass Explorer (http://www.psu.edu/portalproject/passexplorer/).

    When users go to your homepage (e.g. http://www.personal.psu.edu/xyz123), they will be redirected to your blogs.

See A Guide for Penn State Web Developers for more information on posting static HTML pages.

Create a Home Page for Multiple Blogs

If you create multiple blogs, the page /blogs/index.html on your Web site may be a folder listing.

To hide the directory list, upload a custom static index.html web page into your blogs directory. Static pages will not interfere with other blog pages.

See A Guide for Penn State Web Developers for more information on posting static HTML pages.

Add a Custom Header Image to a Professional Web Site

1) Create or select an image that is 905 x 170 pixels. If it is bigger then just the first 905x170 pixels will show on the Web page.

2) On your dashboard, select Upload File under the Create tab. Click Browse to select your file and then click Upload.

3) When the File Options screen appears deselect “Create a new entry using this uploaded file” and then click Finish.

4) Select Assets under the Manage tab. Find the image you want to use and click on its title. Then, under the picture, click the Embed Asset link. This will reveal a text box where you copy the image URL from.

5) Next click Templates in the Design tab. Click on “Stylesheet – Main” to view the styles.css. Add this line at the end:

#homepage-image { background-image: url(http://path/to/your/image.jpg) !important; }

6) Replace http://path/to/your/image with the URL you copied in Step 4.

6) Click Save & Publish

Add Custom Blog Theme CSS

You can use code generated by the Stylecatcher to customize your own blog CSS theme file.
Note: The following documentation assumes familiarity with Cascading Style Sheets (CSS). Information on CSS files can be found at

Note on Older Movable Type Styles

The new version of Movable Type includes styles not found in the previous versions of the blogs, so older themes may not work perfectly.

Find and Copy CSS Template

  1. Login and enter your blog.
  2. Click Design in the top menu then select Styles.
  3. You should see a list of available preformatted styles. Click the option for MT 4 Style Library in the left to see all available styles.
    Note: There may be a delay before all styles are displayed.
  4. Find a style that most closely approximates the style you want then highlight it. A larger version will be displayed in the right.
  5. Click the CSS File link beneath the larger image of the theme.

  6. Copy the CSS and paste it into a .css text file.
  7. Change the CSS specifications as needed
  8. Insert the following code at the top of your CSS file.
        /*
         name: Your Theme Name
         designer: Your name and name of original theme
         */

Key Divs

Below are a list of key DIVs used in Movable Type 4. Many include an -inner div as well.

  • <div id="container"> is the main body of the blog excluding background images. The width of this DIV should always be a minimum of 940px.
  • <div id="header"> is the top header of the blog. This can be changed as needed, although $MT variables should be left intact. This DIV also contains <div id=”header-inner”> which contains <div id=”header-content”>
  • <div id=”content”> is the main page below the header.
  • This div also contains <div id=”alpha”> which represents the large column with blog entries.
  • <div id=”entry"> is an individual entry. Entry DIVs contain Asset DIVs
  • <div id="beta"> is the sidebar which contains the <div id=”beta inner”> and various widget DIVs.
  • <div id=”footer”> is the footer (bottom

Apply Custom Theme in Blog with Templates

  1. Login to the Blogs system and enter a blog
  2. Click Design in the top menu then select Templates.
  3. Click link for Stylesheet – Main (styles.css).
  4. Make sure the first line begins with “@import url(base_theme.css);”
  5. Replace the rest of the CSS with your CSS markup.
  6. Click Save and Publish, then click the View Site (page icon button at top) to test.
  7. In the browser, click Shift+Control+R (Win) or Shift+Command+R (Mac) to make sure the updated style is loaded.

Uploading Style Images

If your CSS relies on images, then you may upload them into your blog in the Assets area. To upload images.

  1. In the top menu click Create, then Upload File.
  2. Select file to upload, but do not select a destination. Click the Upload button at the bottom. Files will be uploaded into the same directory as the style sheet.

Apply Custom Theme in Blog

  1. Login to the Blogs system and enter a blog
    Note: You can click the white Main Menu link to return to the main blogs menu.
  2. Click Select a Design using Stylecatcher in the lower right.
  3. Enter the URL of your CSS file in the Theme or Repository URL field, then click Find Style.
  4. Your theme CSS will be imported with the name in the /* name: */ description. Highlight it and click Apply Selected Design.
  5. If you wish to include a background image, upload it to a directory, then use an absolute link in your CSS file (e.g. http://www.psu.edu/graphics/yourimage).
  6. To test the site, click Main Menu in the right, enter the blog,
  7. Within the blog, click View Site. If necessary, Shift Reload the page in your browser to verify that the new CSS has been applied.
  8. If you need to revise your theme, then edit and re-upload your file, then re-import the theme following steps #1-6 in this section.

Apply Design with Style Catcher

These steps will allow you to create a Stylecather preview. The disadvantage is that if you update the CSS file, you will need to reapply the style each time.

  1. Insert the following metadata at the top of your CSS file.
        /*
         name: Your Theme Name
         designer: Your name and name of original theme
         designer_url: this is optional
         developer: this is optional
         developer_url: this is optional
         desciption: Describe theme here (this is optional)
         layouts: layout-wtt, layout-twt, layout-wt, layout-tw
         */
  2. Create a folder for your theme in PASS space (the folder can be in your /blogs directory)
  3. Upload your CSS file and any images used in your style to the folder.
  4. If you want a thumbnail displayed in the Style Catcher, then take large and small screen capture of your blog and name the files thumbnail.gif (ca 150 px wide) and thumbail-large.gif (ca 400 px wide) respectively. Load these images in the same directory as the CSS file.
  5. Determine the URL to your theme (e.g. http://www.personal.psu.edu/xyz123/blogs/mytheme/theme.css).
  6. Login and enter your blog.
  7. Click Design in the top menu then select Styles.
  8. Click the plus button next to the Saved Styles text above the style preview grid.
  9. Copy and paste the URL of your style into the pop-up window and click OK. The style preview will appear in the preview area.
  10. Highlight style and click Apply Design in the lower right.

Modify Blog Header with Templates

You can change your blog header or add favicons by modifying the HTML code of main index template

  1. Login to the Blogs system and enter a blog.
  2. Click Design in the top menu then select Templates.
  3. Click the link for Main Index (also called "index.html").The HTML displays a set of MT variables in orange and blue.
    Template window with HTML
  4. To modify the header, click the Header link under the Includes and Widgets category on the right. The HTML for the header will be displayed.
    Widgets and Includes menu
  5. To change the header, change code within the <div id="header-content"> class.
    Note: Tags beginning with $MT are pulled from Movable Type and should not be changed unless there is a specific reasonClick Save then click the Publish button in the top links.
    Note: Just licking Save saves the changes, but does not publish them to the blog. to.
  6. Click Save then click the Publish button in the top links.
    Note: Just licking Save saves the changes, but does not publish them to the blog.
  7. To test the file, click the View Site button in the top links. Hit Shift+Control+R (Win) or Command+Shift+R (Mac) to refresh the blog in your browser.

Identifying Key Divs in the Header

The HTML Includes the following divisions (which refer to the CSS stylesheet)

  • <div id="container"> is the main body of the blog excluding background images
  • <div id="header"> is the top header of the blog. This can be changed as needed, althouggh $MT variables should be left intact.

Undo Template Changes

If you find a serious flaw in a new template, then open it up and select Refresh from the More Actions menu in the lower right. This will restore the template to the previous version.

Modifying other Parts of the Template

Caution should be used when modifying other parts of the template since many involve the use of MovableType variables.

  1. Login to the Blogs system and enter a blog.
  2. Click Design in the top menu then select Templates.
    • For the main body with entries, select Main Index. This opens to the HTML for an individual entry.
    • For information beneath each entry, click Entry Summary in in the Includes and Widgets menu.
    • For the footer, click Footer in the Includes and Widgets menu.
    • For the header, click Header in the Includes and Widgets menu.
    • For the sidebar, click Footer, then click Sidebar.
      Note: It is usually recommended that you use the Widget Manager to edit the sidebar.
  3. The Insert menu in the template allows you to insert different variables.

Switch Blog Home Page to a Static Page

By default the Blogs at Penn State assumes that the blog is the main home page of that directory. However in some cases, you may want to you the Blogs at Penn State to create a set of informational pages with a blog as just one of the features. The instructions below will show you how to promote a static page to the main page of the directory and link to your blog.

You can view the video screen cast or read the text below.

View Flash Video

Change Blog URL

  1. Login to the Blogs system and enter a blog.
  2. Click Design in the top menu then select Templates.
  3. Click the link for Main Index (also called "index.html"). A page displaying HTML code opens.
  4. Below the code textarea box, change the name in the Output File field from "index.html" to something like "blog.html."

    Template window with HTML Output field is at bottom
  5. Click the Save and Publish button then the Publish button. The URL of your blog page will change from .../index.html to.../blog.html

Replace Home Page

The blog will act as your homepage until you replace it with a new index.html page. Here are two options.

Option 1 - Create A Page in Movable Type

  1. Click Create in the top links then select Page. A form similar to that for a blog entry will appear.
  2. Write appropriate text in the text area.
  3. Include a link to your blog (e.g. <a href="blog.html>View my blog</a>) in either a custom widget or by using the Link (chain) tool.
    Note: Double check your link in the HTML Mode source code window (Black A button), The software may "autocorrect" your URL.
  4. In the Publishing section, set your Status to Published.
  5. In the Filename field at the bottom, change the URL option to "index".
    Page Settings at bottom with File name set to index
  6. Click Save then click the Publish button.
  7. Click the View Blog button to verify that this page is has replaced the blog as the home page and that the link to the blog is functional.

Option 2 - Create your own page from scratch

You can also create your own page in a tool such as Dreamweaver or other HTML editor and post to the appropriate directory either via the Penn State PASS Explorer or SFTP.

Adding Google Analytics to a Blog

Google Analytics is an external Web service from Google which allows users to generate reports on Web usage.

Create Google Analytics Account

A Google Analytics account for your blog URL can be created at https://www.google.com/analytics/. Please follow the latest instructions posted at that Web site. A custom code will be generated which can be incorporated into your Web space.

Copy code into blog

These instructions were written February 25, 2008. Details may change as the Google interface is developed. You can read the text below or watch the video screencast.

View Flash Video
  1. Log in to your Google Analytics account at https://www.google.com/analytics/
  2. Click the Edit link to view your Google Analytics code.
  3. Click the Check Status link.
  4. Click the tab for New Tracking Code. Copy the Javascript tags within that window. The code begins with a <script> tag an ends with a </script> tag.
  5. Log in to http://blogs.psu.edu and enter your blog.
  6. Go to the Design menu on top and select Templates.
  7. In the Quickfilters menu to the right, click Template Modules.
    QuickFilters menu to right
  8. Click Footer in the expanded list of Templates.
    Note: Most users have a shorter list of templates than the list seen in the video.
  9. In the HTML code, scroll to the bottom of the footer template and place your cursor immediately above the </body> tag and below the outermost </div> tag.
  10. Paste the Google Anayltics Javascript code (see steps #1-4 above) immediately before the </body> tag.
  11. Click the Save button at the bottom.
  12. Publish your blog by clicking the circle arrow button in the top menu.
  13. Log on to https://www.google.com/analytics/ to access reports.