Blogger.com Template - UW Stout, Wisconsin's Polytechnic University

This page provides information about using a UW-Stout styled template with Blogger.com.

Getting Started

If you don't already have a Blogger account, go to Blogger.com and create a blog using your UW-Stout username(e-mail) and password. Then skip down to the rest of the directions.

If you currently do have a Blogger account, you may need to update your settings after logging into Blogger.

Setting up the Stout FTP

Before setting up the UW-Stout styled template, you may want to set your blog to the Stout FTP utilizing the Stout Web server. Doing this will allow your blog to have a UW-Stout web address (http://www.uwstout.edu/). If you choose this method some additional steps will be necessary.

If you are a first time user you must have the correct permissions on the Stout web server. Schedule a meeting with the web cordinator Barbara Button (buttonb@uwstout.edu) to make sure you have adaquite permissions on your account.
Log into Blogger.com
After your logged into blogger dashboard, click Create a Blog to create a new blog. If you are a first time user, upon login blogger will have you create a blog immediately.
Click on Advanced Blog Setup (About 3/4 down the page) - Fill in all information (See below)

Blog Title - What you want the blog to be called
FTP Server - www.uwstout.edu and Select FTP radio button
FTP Path - This depends on where the blog will be stored on the server. It may follow the convention: /static/subsite/blog/
Blog Filename - index.shtml
Blog URL - This depends on where it is stored on the server. It may follow the convention above as: http://www.uwstout.edu/static/subsite/blog/
FTP Username - uwstout-mail/username Meaning uwstout-mail/+ Your Campus Username
FTP Password - Your uwstout password.
Type the characters in the picture, and click continue

Choose any of the custom templates and click continue
Click Start Blogging

Setting Blogger to a Stout Template

Below is the HTML code that works with the Blogger template system to produce the code that approximates the UW-Stout look. There are a few quick steps to embed this code as a template for your Blogger.com blog.

Copy the code
Perform some quick modifications/customizations to it
Insert it into Blogger.com

Step 1 - Copy the Code

Select the code in the text box and copy it to your clipboard (CTRL-C or Right Click > Copy). Or download the code in a text file here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>  <title><$BlogPageTitle$></title>    <$BlogMetaData$>    <style type="text/css">      </style>  </head>      <div id="container">    <div id="header">    <h1 id="blog-title"> 	<$BlogTitle$>  </h1>  </div>    <div id="nav">      <! -- IMPORTANT - THIS PART MUST BE CUSTOMIZED TO YOUR INDIVIDUAL BLOG              Items that you must customize include:                  1.) The directory/path to the RSS Feed for your blog                  2.) Any links that you want to apear in your links section of the navigation.  	-->    <h2>Subscribe for Updates</h2>  <ul>                        <li><a href="PLACE%20RSS%20URL%20HERE">Subscribe to RSS Feed</a></li> </ul>        	<MainOrArchivePage>  <h2 class="sidebar-title">Links</h2>    <ul>    	<li><a href="http://www.uwstout.edu/">University of Wisconsin-Stout</a></li>                                                              	</ul>  </MainOrArchivePage>      <h2 class="sidebar-title">Previous Posts</h2>      <ul id="recently">      <BloggerPreviousItems>        <li><a href="%3C$BlogItemPermalinkURL$">"><$BlogPreviousItemTitle$></a></li> 	</BloggerPreviousItems>  </ul>      <MainOrArchivePage>  <h2 class="sidebar-title">Archives</h2>      <ul class="archive-list">    	  <BloggerArchives>    	<li><a href="%3C$BlogArchiveURL$">"><$BlogArchiveName$></a></li>  	  </BloggerArchives>      <ArchivePage><li><a href="%3C$BlogURL$">">Current Posts</a></li></ArchivePage>  </ul>  </MainOrArchivePage>    <p id="powered-by"><a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" /></a><p></p>      </div>      <div id="content">  <Blogger>      <BlogDateHeader>  <h2 class="date-header"><$BlogDateHeaderDate$></h2>    </BlogDateHeader>        <a name="<$BlogItemNumber$>"></a>      <BlogItemTitle>  	 <BlogItemUrl><a href="%3C$BlogItemUrl$">" title="external link" class="title-link"></BlogItemUrl>    <h3 class="post-title"> 	 <$BlogItemTitle$>      </h3> 	 <BlogItemUrl></a></BlogItemUrl>    </BlogItemTitle>      <p>      <$BlogItemBody$>    <p></p>      <p class="post-footer">      <em>posted by the <$BlogItemAuthorNickname$> @ <a href="%3C$BlogItemPermalinkUrl$">" title="permanent link"><$BlogItemDateTime$></a></em>        <BlogItemCommentsEnabled>          <a class="comment-link" href="%3C$BlogItemCommentCreate$">"><$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>      </BlogItemCommentsEnabled>  <$BlogItemControl$>      <p></p>          <ItemPage>    <div id="comments">  	<BlogItemCommentsEnabled><a name="comments"></a>      <h4><$BlogItemCommentCount$> Comments:</h4>      <dl id="comments-block">        <BlogItemComments>      <dt class="comment-data" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>        At <a href="#c%3C$BlogCommentNumber$">" title="comment permalink"><$BlogCommentDateTime$></a>,        <$BlogCommentAuthor$> said...      </dt>        <dd class="comment-body">        <p><$BlogCommentBody$><p></p> 	  <$BlogCommentDeleteIcon$>      </dd> 	  </BlogItemComments>      </dl> 	 	<p class="comment-timestamp">    <$BlogItemCreate$>    <p></p>      </BlogItemCommentsEnabled> 	 	<p style="padding-left:20px;">  	<a href="%3C$BlogURL$">"><< Home</a>    <p></p>    </div>  </ItemPage>      </Blogger>  </div>      <div id="footer">  <address><a href="http://www.uwstout.edu/">University of Wisconsin-Stout</a>  712 South Broadway Menomonie, Wisconsin 54751 Phone: 715/232-1122 </address>  </div>    </div>    </body>  </html>

Step 2 - Modify the Code

After copying the code. Past the code into a word editing program such as notepad or wordpad to perform a quick edit.

The only edit that is required to make the template code function is to put the url of the RSS feed of your blog into the code.Search through the code until you find the text marked "PLACE RSS URL HERE" and replace that text with the full url to the RSS feed.The link to your RSS feed will be something along the lines of http://www.uwstout.edu/static/subsite/blog/rss.xml.

You can also add links to the right side navigation area if you are code savy. The place to add the hyperlinks is marked with comments in the code.

Once all modifications have been completed copy the code from the word editor.

Step 3 - Pasting the code into Blogger

After you're logged into Blogger, click the Template link under the Dashboard heading, as shown below.
Under the Template tab, click Edit HTML. Select the text in the text box (CTRL+A) and delete it.
Paste the text that you coppied and modified above into the text box.
Click Save Template Changes. Republish the blog when it prompts you.
Congradulations, now you can start posting.