Blogs->Template
Current:
This is where you can customize your blog's template. Note that editing your template requires that you already have some knowledge of HTML, including style sheets (CSS). Learning these basics is beyond the scope of this manual, but we have collected some links for you, if you'd like to learn how to tinker with your template:
If you are conversant with these standards, just enter your code into the textarea window and click "Save changes". Remember, however, that apart from the basic html and CSS code, you must understand the mo'time-specific Blogger tags to take full command of the customization of your blog! Those are found in the Tags section, described below.
We also have group blog dedicated to template issues. If you have questions, suggestion or want to participate as a helper, please visit the template blog and have a look around.
Blogs->Template->New:
If you would like to simply change templates by choosing a new one from the mo'time gallery, click the New button in this section.
Blogs->Template->Tags:
The key section of a blog template is made of up special "Blogger" tags, each of which takes data from your database and imports directly into your blog. These tags are "case-sensitive", meaning you must never hange a capital "B" into a small "b", for example. Doing so will render the tag invalid; it won't work anymore!
The following tags may be place anywhere in your template:
<$BlogTitle$>
Places the title of your blog
<$BlogDescription$>
Places your blog description
<$BlogLinkOut$>
Places your links list
<$BlogCounter$>
Places your blogs page view counter
<$BlogArchive$>
Places your archive menu
<$BlogCategories$>
Places your archive menu sorted by category
<$BlogSubscribeButton$>
Places the old-style mo'time subscribe button
NEW<$BlogPhotoAlbum$>
Places a photo album on your blog (not yet activated!); it must be placed immediately before the tag: <Blogger> Note: you must also place specific styles in the CSS section of your blog to support this tag. See examples below.
NEW <$BlogRecentPhotos$>
Places the last 3 photos from your album in your blog's menu (not yet activated!)
Note: you must also place specific styles in the CSS section of your blog to support this tag. See examples below.
<$BlogPager$>
Places page-numbering navigation links (this is mandatory for blogs that use categories and photo albums).
Note: you must also place specific styles in the CSS section of your blog to support this tag. See examples below.
NEW <$BlogFeeds$>
Places a RSS/Atom news feed on your blog
Note: you must also place specific styles in the CSS section of your blog to support this tag. See examples below.<
The following tags MUST be place in between: <Blogger> ... </Blogger>:
NEW <$BlogNavigation$>
Places a post navigation bar (previous - home - next) when viewing single posts or comments
Note: you must also place specific styles in the CSS section of your blog to support this tag. See examples below.
<BlogDateHeaderDate><$BlogDateHeaderDate$></BlogDateHeaderDate>
Must not be changed! Places the date on your post
<$BlogItemTitle$>
Places post titles
<$BlogItemBody$>
Places the post itself
Note: you must also place specific styles in the CSS section of your blog to support this tag. See examples below.
<$BlogItemAuthorNickname$>
Places your username (usually in the signature of the post)
<$BlogItemAuthorURL$>
Places the URL of your main blog
<$BlogItemCategories$>
Places the name of the category of your post (usually in the signature of the post)
<$BlogItemDateTime$>
Places the date and time of your post (usually in the signature of the post)
NEW <$BlogItemPermalink$>
Places the "permalink" at the bottom of your post, technically generated as: http://myblog.motime.com/post/1234
NEW <$BlogItemCommentList$>
Places the comments below your post on the same page (replaces the old-style commednt pop-up window) as your post, including a text area for writing the comments
Note: you must also place specific styles in the CSS section of your blog to support this tag. See examples below.
NEW <$BlogItemCommentLink$>
Generates a direct link to the comment
NEW These are examples of the kinds of styles that you need to add to the CSS section of your blog, found in between <Style> ... </Style>; you can modify these styles as you wish:
/* ******************************** */
/* Classes for the tag: <*$BlogItemBody$> */
#read-more {
font: normal .76em Verdana, Arial, Helvetica, sans-serif;
padding:0px 10px;
text-align: right;
}
/* ******************************** */
/* Classes for the tag: <*$BlogItemCommentList$> */
.comment {
font-family: Verdana, Arial, Helvetica, sans-serif;
border-bottom: 1px solid #003399;
padding: .5em;
margin-top: 1em;
background:transparent;
width: 395px;
}
.comment-body {
text-align: left;
padding: .2em .0em .9em .0em ;
font-style:normal; font-variant:normal; font-weight:normal;
color:#000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:.75em;
}
.comment-tips {
background:transparent ;
text-align: left;
padding-left: .5em;
font-style:normal; font-variant:normal; font-weight:normal;
color:#555555;
font-size:.68em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.comment-form-title {
background:#003399;
color: white;
font: .8em "Courier New", Courier, mono;
letter-spacing: 0.09em;
font-weight:bold;
padding: .2em .5em .2em .5em;
}
.comment-form-user {
background:transparent ;
text-align: left;
font-size:.65em;
font-style:normal; font-variant:normal; font-weight:normal;
color:#555555;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.3em;
padding-left: .5em;
}
.comment-top {
background:transparent ;
text-align: right;
padding-bottom:.7em;
font-style:normal; font-variant:normal; font-weight:normal;
font-size:.65em;
color: #003399;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.comment-bottom {
background:transparent ;
text-align: left;
padding-top:.7em;
font-style:normal; font-variant:normal; font-weight:normal;
font-size:.65em;
color: #003399;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
/* ******************************** */
/* Classes for the tag: <*$BlogNavigation$> */
.navigation {
background: #FFFACD;
border: 1px solid #666666;
color: #000000;
font: 9pt/11pt Georgia, "Times New Roman", serif;
margin-bottom: 6px;
margin-top: 4px;
padding-bottom: 1px;
padding-left: 4px;
padding-right: 2px;
text-align: center;
}
.prev {
float: left;
text-align: left;
width: 45%;
}
.next {
float: right;
text-align: right;
width: 45%;
}
.home {
text-align: center;
}
/* ******************************** */
/* Classes for the tag: <*$BlogPager$> */
.blog-pager div {
padding: 1px;
font-weight: normal;
display: inline;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 0.83em;
}
.blog-pager a {
text-decoration: underline;
display: inline;
margin: 3px;
}
<
/* ******************************** */
/* Classes for the tag: <*$BlogPhotoAlbum$> */
#album {
background: transparent;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-decoration: underline;
text-align: left;
}
#album img {
padding: 4px;
background: #DDDDDD;
border: 1px solid #BBBBBB;
}
#album td {
text-align: left;
vertical-align: top;
}
#album table {
text-align: left;
vertical-align: top;
}
#album .title {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
padding-top: 4px;
padding-bottom: 10px;
}
/* ******************************** */
/* Classes for the tag: <*$BlogRecentPhotos$> */
#recent-photos {
background: transparent;
text-align: center;
padding: 10px 0px 15px 0px;
}
#recent-photos img {
background: #DDDDDD;
padding: 4px;
border: 1px solid #BBBBBB;
}
/* same font and size as section titles */
#recent-photos .album-link {
font: bold .8em "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
color: #003399;
background: transparent;
text-align: center;
margin:0px 10px;
text-decoration: underline;
}
#recent-photos .title {
color: #FF6633;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
width: auto;
padding: 5px;
text-align: center;
}
#album-link {
vertical-align:top;
}
#album-link a:link {
vertical-align:top;
}
/* ******************************** */
/* Classes for the tag: <$BlogFeeds$> */
#blog-feeds {
line-height:0.2;
padding-left: 15px;
}
Most of these tags can be found in our prepared templates, but you can modify them to suit your needs.
If you have modified your template in any way, we strongly recommend that you copy the code from the edit window, and paste it into a text document on your computer. Save the file so that if you ever make further changes or accidentally corrupt your code, you can always just paste your good copy into the textarea to start over again!
We hope that this brief introduction to our blogging platform will enable you to play with your template so that you can make it look just the way you'd like it to, using your preferred fonts, colors and layouts. If you have other questions or would simply like to give us your feedback, please visit our template blog. Our staff carefully monitors all comments, criticisms and, well, even compliments! Happy Blogging...
Last modified 18 Nov 2002 - 01:45
This is where you can customize your blog's template. Note that editing your template requires that you already have some knowledge of HTML, including style sheets (CSS). Learning these basics is beyond the scope of this manual, but we have collected some links for you, if you'd like to learn how to tinker with your template:
Beginner's HTML
HTML Basics
HTML Validator
CSS Level 1
CSS template tool
CSS template tool2
CSS Validator
If you are conversant with these standards, just enter your code into the textarea window and click "Save changes". Remember, however, that apart from the basic html and CSS code, you must understand the mo'time-specific Blogger tags to take full command of the customization of your blog! Those are found in the Tags section, described below.
We also have group blog dedicated to template issues. If you have questions, suggestion or want to participate as a helper, please visit the template blog and have a look around.
Blogs->Template->New:
If you would like to simply change templates by choosing a new one from the mo'time gallery, click the New button in this section.
Blogs->Template->Tags:
The key section of a blog template is made of up special "Blogger" tags, each of which takes data from your database and imports directly into your blog. These tags are "case-sensitive", meaning you must never hange a capital "B" into a small "b", for example. Doing so will render the tag invalid; it won't work anymore!
The following tags may be place anywhere in your template:
<$BlogTitle$>
Places the title of your blog
<$BlogDescription$>
Places your blog description
<$BlogLinkOut$>
Places your links list
<$BlogCounter$>
Places your blogs page view counter
<$BlogArchive$>
Places your archive menu
<$BlogCategories$>
Places your archive menu sorted by category
<$BlogSubscribeButton$>
Places the old-style mo'time subscribe button
NEW<$BlogPhotoAlbum$>
Places a photo album on your blog (not yet activated!); it must be placed immediately before the tag: <Blogger> Note: you must also place specific styles in the CSS section of your blog to support this tag. See examples below.
NEW <$BlogRecentPhotos$>
Places the last 3 photos from your album in your blog's menu (not yet activated!)
Note: you must also place specific styles in the CSS section of your blog to support this tag. See examples below.
<$BlogPager$>
Places page-numbering navigation links (this is mandatory for blogs that use categories and photo albums).
Note: you must also place specific styles in the CSS section of your blog to support this tag. See examples below.
NEW <$BlogFeeds$>
Places a RSS/Atom news feed on your blog
Note: you must also place specific styles in the CSS section of your blog to support this tag. See examples below.<
The following tags MUST be place in between: <Blogger> ... </Blogger>:
NEW <$BlogNavigation$>
Places a post navigation bar (previous - home - next) when viewing single posts or comments
Note: you must also place specific styles in the CSS section of your blog to support this tag. See examples below.
<BlogDateHeaderDate><$BlogDateHeaderDate$></BlogDateHeaderDate>
Must not be changed! Places the date on your post
<$BlogItemTitle$>
Places post titles
<$BlogItemBody$>
Places the post itself
Note: you must also place specific styles in the CSS section of your blog to support this tag. See examples below.
<$BlogItemAuthorNickname$>
Places your username (usually in the signature of the post)
<$BlogItemAuthorURL$>
Places the URL of your main blog
<$BlogItemCategories$>
Places the name of the category of your post (usually in the signature of the post)
<$BlogItemDateTime$>
Places the date and time of your post (usually in the signature of the post)
NEW <$BlogItemPermalink$>
Places the "permalink" at the bottom of your post, technically generated as: http://myblog.motime.com/post/1234
NEW <$BlogItemCommentList$>
Places the comments below your post on the same page (replaces the old-style commednt pop-up window) as your post, including a text area for writing the comments
Note: you must also place specific styles in the CSS section of your blog to support this tag. See examples below.
NEW <$BlogItemCommentLink$>
Generates a direct link to the comment
NEW These are examples of the kinds of styles that you need to add to the CSS section of your blog, found in between <Style> ... </Style>; you can modify these styles as you wish:
/* ******************************** */
/* Classes for the tag: <*$BlogItemBody$> */
#read-more {
font: normal .76em Verdana, Arial, Helvetica, sans-serif;
padding:0px 10px;
text-align: right;
}
/* ******************************** */
/* Classes for the tag: <*$BlogItemCommentList$> */
.comment {
font-family: Verdana, Arial, Helvetica, sans-serif;
border-bottom: 1px solid #003399;
padding: .5em;
margin-top: 1em;
background:transparent;
width: 395px;
}
.comment-body {
text-align: left;
padding: .2em .0em .9em .0em ;
font-style:normal; font-variant:normal; font-weight:normal;
color:#000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:.75em;
}
.comment-tips {
background:transparent ;
text-align: left;
padding-left: .5em;
font-style:normal; font-variant:normal; font-weight:normal;
color:#555555;
font-size:.68em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.comment-form-title {
background:#003399;
color: white;
font: .8em "Courier New", Courier, mono;
letter-spacing: 0.09em;
font-weight:bold;
padding: .2em .5em .2em .5em;
}
.comment-form-user {
background:transparent ;
text-align: left;
font-size:.65em;
font-style:normal; font-variant:normal; font-weight:normal;
color:#555555;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.3em;
padding-left: .5em;
}
.comment-top {
background:transparent ;
text-align: right;
padding-bottom:.7em;
font-style:normal; font-variant:normal; font-weight:normal;
font-size:.65em;
color: #003399;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.comment-bottom {
background:transparent ;
text-align: left;
padding-top:.7em;
font-style:normal; font-variant:normal; font-weight:normal;
font-size:.65em;
color: #003399;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
/* ******************************** */
/* Classes for the tag: <*$BlogNavigation$> */
.navigation {
background: #FFFACD;
border: 1px solid #666666;
color: #000000;
font: 9pt/11pt Georgia, "Times New Roman", serif;
margin-bottom: 6px;
margin-top: 4px;
padding-bottom: 1px;
padding-left: 4px;
padding-right: 2px;
text-align: center;
}
.prev {
float: left;
text-align: left;
width: 45%;
}
.next {
float: right;
text-align: right;
width: 45%;
}
.home {
text-align: center;
}
/* ******************************** */
/* Classes for the tag: <*$BlogPager$> */
.blog-pager div {
padding: 1px;
font-weight: normal;
display: inline;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 0.83em;
}
.blog-pager a {
text-decoration: underline;
display: inline;
margin: 3px;
}
<
/* ******************************** */
/* Classes for the tag: <*$BlogPhotoAlbum$> */
#album {
background: transparent;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-decoration: underline;
text-align: left;
}
#album img {
padding: 4px;
background: #DDDDDD;
border: 1px solid #BBBBBB;
}
#album td {
text-align: left;
vertical-align: top;
}
#album table {
text-align: left;
vertical-align: top;
}
#album .title {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
padding-top: 4px;
padding-bottom: 10px;
}
/* ******************************** */
/* Classes for the tag: <*$BlogRecentPhotos$> */
#recent-photos {
background: transparent;
text-align: center;
padding: 10px 0px 15px 0px;
}
#recent-photos img {
background: #DDDDDD;
padding: 4px;
border: 1px solid #BBBBBB;
}
/* same font and size as section titles */
#recent-photos .album-link {
font: bold .8em "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
color: #003399;
background: transparent;
text-align: center;
margin:0px 10px;
text-decoration: underline;
}
#recent-photos .title {
color: #FF6633;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
width: auto;
padding: 5px;
text-align: center;
}
#album-link {
vertical-align:top;
}
#album-link a:link {
vertical-align:top;
}
/* ******************************** */
/* Classes for the tag: <$BlogFeeds$> */
#blog-feeds {
line-height:0.2;
padding-left: 15px;
}
Most of these tags can be found in our prepared templates, but you can modify them to suit your needs.
If you have modified your template in any way, we strongly recommend that you copy the code from the edit window, and paste it into a text document on your computer. Save the file so that if you ever make further changes or accidentally corrupt your code, you can always just paste your good copy into the textarea to start over again!
We hope that this brief introduction to our blogging platform will enable you to play with your template so that you can make it look just the way you'd like it to, using your preferred fonts, colors and layouts. If you have other questions or would simply like to give us your feedback, please visit our template blog. Our staff carefully monitors all comments, criticisms and, well, even compliments! Happy Blogging...