Blogs at Penn State Community

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

• ITS Training XHTML Resources
• Penn State Web Developer Guide

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.
   
4. Click the link for Create Widget Set in the upper left.
   
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 (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.