Full Version: Mobile Version Of Blog
Is there a way to do a mobile version of a blog - so it shows entry titles in a list and then when the entry is clicked on it goes to a mobile version of that entry without having to build a seperate blog for this?
You can do this by creating a pda.html that contains something like:
Then you could set up a simple Individual Entries template that contains a stripped down version of your Individual Entry Archives page. You would add that to your Archive Mappings similarly to how it's done for these printer friendly pages:
http://www.learningmovabletype.com/archive...endly_pages.php
but your mapping would be:
Please let me know if you have any questions.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<title><$MTBlogName$> - portable version</title>
<style type="text/css">
<!--
body {
color:#333;
background-color:white;
margin:20px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
leftMargin=0
}
h1 {
font:bold 12px/12px verdana, arial, helvetica,
sans-serif;
margin:0px 0px 0px 0px;
padding:0px;
}
p {
font:11px verdana, arial, helvetica, sans-serif;
color:#333333;
margin:0px 0px 0px 0px;
padding:0px;
}
.Content>p {margin:0px;}
.Content>p+p {text-indent:0px;}
.tinyfont { font:8px verdana, arial, helvetica, sans-serif; }
.smallfont { font:9px verdana, arial, helvetica, sans-serif; }
.titlefont { font:14px verdana, arial, helvetica, sans-serif; }
a {
color:#000000;
font-family:verdana, arial, helvetica, sans-serif;
text-decoration:none;
}
A:link { color: #6699CC; text-decoration: none }
A:visited { color: #CCBB94; text-decoration: none }
A:active { text-decoration: none }
A:hover {
FONT-WEIGHT: normal;
FONT-STYLE: normal
BACKGROUND: #eee;
}
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
height:33px;
border-style:solid;
border-color:black;
border-width:1px 0px;
line-height:11px;
background-color:#EEEEEE;
voice-family: "\"}\"";
voice-family:inherit;
height:14px;
}
body>#Header {height:14px;}
.Content {
margin:5px 5px 5px 5px;
padding:2px;
}
.dateheader {
position:relative;
width:auto;
min-width:120px;
margin:0px 0px 0px 0px;
padding:5px;
z-index:3;
}
-->
</style>
</head>
<body>
<div id="Header"><$MTBlogName$> - portable version</div>
<div align="left">
<MTEntries lastn="10">
<MTDateHeader>
<div class="dateheader"><h1><$MTEntryDate format="%A, %B %e, %Y"$></h1></div>
</MTDateHeader>
<br>
<div class="content">
<span class="titlefont"><i><a href="<$MTBlogArchiveURL$><$MTEntryDate format="%Y/%m">/<$MTEntryBasename$>-pda.html"><$MTEntryTitle$></a></i> (<$MTEntryDate format="%I:%M%p"$>)</span>
<br />
<$MTEntryExcerpt$>
<p>Posted by <$MTEntryAuthorDisplayName$> at <$MTEntryDate format="%X"$> | <a class="permalink" href="<$MTEntryPermalink$>">Permalink</a>
<MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">Comments (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
<MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">TrackBacks (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive></p>
</div>
</MTEntries>
</div>
<hr width="75%">
<p class="tinyfont" align="center"><a href="http://www.movabletype.org">Powered by MovableType</a>
<br />
Template from <a href="http://www.meryl.net/articles/archives/001118.php">meryl.net</a>
<br />
Inspired by <a href="http://www.geekgrrl.com">Melissa</a></p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<title><$MTBlogName$> - portable version</title>
<style type="text/css">
<!--
body {
color:#333;
background-color:white;
margin:20px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
leftMargin=0
}
h1 {
font:bold 12px/12px verdana, arial, helvetica,
sans-serif;
margin:0px 0px 0px 0px;
padding:0px;
}
p {
font:11px verdana, arial, helvetica, sans-serif;
color:#333333;
margin:0px 0px 0px 0px;
padding:0px;
}
.Content>p {margin:0px;}
.Content>p+p {text-indent:0px;}
.tinyfont { font:8px verdana, arial, helvetica, sans-serif; }
.smallfont { font:9px verdana, arial, helvetica, sans-serif; }
.titlefont { font:14px verdana, arial, helvetica, sans-serif; }
a {
color:#000000;
font-family:verdana, arial, helvetica, sans-serif;
text-decoration:none;
}
A:link { color: #6699CC; text-decoration: none }
A:visited { color: #CCBB94; text-decoration: none }
A:active { text-decoration: none }
A:hover {
FONT-WEIGHT: normal;
FONT-STYLE: normal
BACKGROUND: #eee;
}
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
height:33px;
border-style:solid;
border-color:black;
border-width:1px 0px;
line-height:11px;
background-color:#EEEEEE;
voice-family: "\"}\"";
voice-family:inherit;
height:14px;
}
body>#Header {height:14px;}
.Content {
margin:5px 5px 5px 5px;
padding:2px;
}
.dateheader {
position:relative;
width:auto;
min-width:120px;
margin:0px 0px 0px 0px;
padding:5px;
z-index:3;
}
-->
</style>
</head>
<body>
<div id="Header"><$MTBlogName$> - portable version</div>
<div align="left">
<MTEntries lastn="10">
<MTDateHeader>
<div class="dateheader"><h1><$MTEntryDate format="%A, %B %e, %Y"$></h1></div>
</MTDateHeader>
<br>
<div class="content">
<span class="titlefont"><i><a href="<$MTBlogArchiveURL$><$MTEntryDate format="%Y/%m">/<$MTEntryBasename$>-pda.html"><$MTEntryTitle$></a></i> (<$MTEntryDate format="%I:%M%p"$>)</span>
<br />
<$MTEntryExcerpt$>
<p>Posted by <$MTEntryAuthorDisplayName$> at <$MTEntryDate format="%X"$> | <a class="permalink" href="<$MTEntryPermalink$>">Permalink</a>
<MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">Comments (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
<MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">TrackBacks (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive></p>
</div>
</MTEntries>
</div>
<hr width="75%">
<p class="tinyfont" align="center"><a href="http://www.movabletype.org">Powered by MovableType</a>
<br />
Template from <a href="http://www.meryl.net/articles/archives/001118.php">meryl.net</a>
<br />
Inspired by <a href="http://www.geekgrrl.com">Melissa</a></p>
</body>
</html>
Then you could set up a simple Individual Entries template that contains a stripped down version of your Individual Entry Archives page. You would add that to your Archive Mappings similarly to how it's done for these printer friendly pages:
http://www.learningmovabletype.com/archive...endly_pages.php
but your mapping would be:
CODE
%y/%m/<MTEntryBasename>-pda.html
Please let me know if you have any questions.
Lisa,
Thank you for your instructions.
Do you have any updated code for the new MT4.1? Do you know how I can point a new subdomain to that pda.html? Do you know if MT developers are working on a mobile version for MT 4.x?
Thanks.
Thank you for your instructions.
Do you have any updated code for the new MT4.1? Do you know how I can point a new subdomain to that pda.html? Do you know if MT developers are working on a mobile version for MT 4.x?
Thanks.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.