I decided to make a tutorial on how to use blogger as a news update, it's sort of like cutenews etc. but I've never used Cutenews so I couldn't really tell you. It's extremely easy and I love it.
It's awesome when you are traveling a lot because you can hop on any computer and update.
I also believe there's a number of skate website that use this (Lakai, The Story Store) and I'm sure many more.
This is only a quick, brief outline on what to do. The possibilities and options are endless
Step 1: Make an account, duh.
Step 2: Make an iframe with your blogger name in it.
Example: <iframe src="http://cloudshatelife.blogspot.com" width="524px" height="457px"></iframe>
Step 3: You'll see that when you go into your website, the blogger looks very standard and everything is set to default.
Well Blogger created this option where you can design the layout to however you want HTML style, thanks Blogger!
Log in and go to Mange: Template
Here, you can see that it's just like a regular website or a MySpace layout. This is where you can make all your adjustments to make your layout look how you want it.
Step 4: GETTING RID OF THAT STUPID NAV BAR ON THE TOP!
Copy and paste this bad boy at the begining of your head.
<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>
Step 5: I think that's just about it
Let's discuss this just in case I forgot to cover something
I can also send my entire code layout as a base if people are having a hard time following how to do it.
Full Version: Blogger Tutorial
so how do you put videos on it without hosting it or something, like how do u get a quicktime player video thing in the blog? and whats the iframe part andd where do u enter it in and whats taht do?
Obviously you still need a host. Go to the website/design section and figure out how a website works first.
im using blogger.com
you can access cute news from any computer as well to update new posts and it seems alot easier except for downloaded all the stuff and uploading them on your server but after thats all said and done its easy to use from anywhere
QUOTE(inkoso @ Sep 8 2007, 10:32 AM) 
im using blogger.com
No, he means a web host. Here's a free one if you already have purchased a domain: http://forums.digitalpoint.com/showthread.php?t=420539
Alright, here's my code. It'll start you off. Please change the font color and link color so we all don't have the exact same update box hahaha
<html>
<head>
<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style><style type="text/css">
<!--
body {
background-color:black;
font-family:arial;
font-size:10px;
color:#FFFFFF;
}
a:hover {color:#000000; background-color:#990000};
a {
font-size: 10px;
color: #FFFFFF;
font-family: arial;
font-weight: none;
}
a:link {
color: #990000;
text-decoration: none;
}
a:visited {
color: #990000;
text-decoration: none;
}
a:hover {
color: #ffffff;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
body,td,th {
font-family: arial;
color: #336699;
font-size: 10px;
}
body {
background-color: #FFFFFF;
}
-->
</style>
<title><$BlogPageTitle$></title>
<style type="text/css" media="screen">
h1 {border-bottom:dotted 0px #000000;margin-bottom:0px;}
h2 {margin-bottom:0px;}
h2#archives { padding-top:10px;margin-top:10px;border-top:dotted 0px #999999;}
h3 {padding-top:10px;color:#000000;padding-bottom:0px;margin-bottom:0px;}
body {font-family:arial,Serif;font-size:10px;margin:1%;padding:0px;background:#ffffff;color:#336699;}
div.blogPost {padding-left:5%;padding-right:5%;}
div.byline {color:#000000;}
p#bloggerBug {padding-top:10px;}
.blogComments {padding-top:10px;color:#555555;padding-bottom:0px;margin-bottom:0px;font-weight:bold}
.blogComments .byline {font-size:10px;font-weight:normal;color:#555555;margin-right:10px;display:inline}
.blogComment {font-size:1em;margin:3%;color:#000000;font-weight:normal}
.deleted-comment {font-style:italic;color:gray;}
#blogfeeds { }
#postfeeds { }
</style>
<$BlogMetaData$>
</head>
<body>
<!-- To aid with the Blogger NavBar -->
<div id="wrap4">
<!-- Header -->
<!-- Blog Posts -->
<Blogger>
<BlogDateHeader>
<h3><$BlogDateHeaderDate$></h3>
</BlogDateHeader>
<a name="<$BlogItemNumber$>"> </a>
<div class="blogPost">
<$BlogItemBody$><br />
<div class="byline"><$I18NPostedByAuthorNickname$> <a href="<$BlogItemPermalinkURL$>" title="permanent link"></a><MainOrArchivePage>
</a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$> </div>
</div>
<ItemPage>
<div class="blogComments">
<BlogItemCommentsEnabled><a name="comments"></a>
<$I18NComments$>:
<BlogItemComments>
<div class="blogComment">
<a name="<$BlogCommentNumber$>"></a> <$BlogCommentBody$><br />
<div class="byline"><a href="<$BlogCommentPermalinkURL$>" title="permanent link">#</a> <$I18NPostedByCommentAuthor$> : <$BlogCommentDateTime$></div>
<$BlogCommentDeleteIcon$>
</div>
</BlogItemComments>
<$BlogItemCreate$>
<p id="postfeeds"><$BlogItemFeedLinks$></p>
</BlogItemCommentsEnabled>
<br /> <br />
<BlogItemBacklinksEnabled>
<a name="links"></a>
<$I18NLinksToThisPost$>:
<BlogItemBacklinks>
<div class="blogComment">
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a>
<$BlogBacklinkDeleteIcon$>
<br />
<$BlogBacklinkSnippet$><br />
<div class="byline">
<span class="comment-poster">
<em><$I18NPostedByBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</div>
</div>
</BlogItemBacklinks>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>
<br /> <br />
<a href="<$BlogURL$>"><< <$I18NHome$></a>
</div>
</ItemPage>
</Blogger>
<!-- Archive Links -->
<h2 id="archives"><$I18NArchives$></h2>
<p><BloggerArchives>
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</BloggerArchives>
<script type="text/javascript" language="Javascript">if (location.href.indexOf("archive")!=-1) document.write("<strong><a href=\"<$BlogURL$>\">Current Posts</a></strong>");</script></p>
</div>
</body>
</html>
<html>
<head>
<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style><style type="text/css">
<!--
body {
background-color:black;
font-family:arial;
font-size:10px;
color:#FFFFFF;
}
a:hover {color:#000000; background-color:#990000};
a {
font-size: 10px;
color: #FFFFFF;
font-family: arial;
font-weight: none;
}
a:link {
color: #990000;
text-decoration: none;
}
a:visited {
color: #990000;
text-decoration: none;
}
a:hover {
color: #ffffff;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
body,td,th {
font-family: arial;
color: #336699;
font-size: 10px;
}
body {
background-color: #FFFFFF;
}
-->
</style>
<title><$BlogPageTitle$></title>
<style type="text/css" media="screen">
h1 {border-bottom:dotted 0px #000000;margin-bottom:0px;}
h2 {margin-bottom:0px;}
h2#archives { padding-top:10px;margin-top:10px;border-top:dotted 0px #999999;}
h3 {padding-top:10px;color:#000000;padding-bottom:0px;margin-bottom:0px;}
body {font-family:arial,Serif;font-size:10px;margin:1%;padding:0px;background:#ffffff;color:#336699;}
div.blogPost {padding-left:5%;padding-right:5%;}
div.byline {color:#000000;}
p#bloggerBug {padding-top:10px;}
.blogComments {padding-top:10px;color:#555555;padding-bottom:0px;margin-bottom:0px;font-weight:bold}
.blogComments .byline {font-size:10px;font-weight:normal;color:#555555;margin-right:10px;display:inline}
.blogComment {font-size:1em;margin:3%;color:#000000;font-weight:normal}
.deleted-comment {font-style:italic;color:gray;}
#blogfeeds { }
#postfeeds { }
</style>
<$BlogMetaData$>
</head>
<body>
<!-- To aid with the Blogger NavBar -->
<div id="wrap4">
<!-- Header -->
<!-- Blog Posts -->
<Blogger>
<BlogDateHeader>
<h3><$BlogDateHeaderDate$></h3>
</BlogDateHeader>
<a name="<$BlogItemNumber$>"> </a>
<div class="blogPost">
<$BlogItemBody$><br />
<div class="byline"><$I18NPostedByAuthorNickname$> <a href="<$BlogItemPermalinkURL$>" title="permanent link"></a><MainOrArchivePage>
</a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$> </div>
</div>
<ItemPage>
<div class="blogComments">
<BlogItemCommentsEnabled><a name="comments"></a>
<$I18NComments$>:
<BlogItemComments>
<div class="blogComment">
<a name="<$BlogCommentNumber$>"></a> <$BlogCommentBody$><br />
<div class="byline"><a href="<$BlogCommentPermalinkURL$>" title="permanent link">#</a> <$I18NPostedByCommentAuthor$> : <$BlogCommentDateTime$></div>
<$BlogCommentDeleteIcon$>
</div>
</BlogItemComments>
<$BlogItemCreate$>
<p id="postfeeds"><$BlogItemFeedLinks$></p>
</BlogItemCommentsEnabled>
<br /> <br />
<BlogItemBacklinksEnabled>
<a name="links"></a>
<$I18NLinksToThisPost$>:
<BlogItemBacklinks>
<div class="blogComment">
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a>
<$BlogBacklinkDeleteIcon$>
<br />
<$BlogBacklinkSnippet$><br />
<div class="byline">
<span class="comment-poster">
<em><$I18NPostedByBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</div>
</div>
</BlogItemBacklinks>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>
<br /> <br />
<a href="<$BlogURL$>"><< <$I18NHome$></a>
</div>
</ItemPage>
</Blogger>
<!-- Archive Links -->
<h2 id="archives"><$I18NArchives$></h2>
<p><BloggerArchives>
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</BloggerArchives>
<script type="text/javascript" language="Javascript">if (location.href.indexOf("archive")!=-1) document.write("<strong><a href=\"<$BlogURL$>\">Current Posts</a></strong>");</script></p>
</div>
</body>
</html>
Right, this doesn't really have a lot to do with your tutorial, but i need some help with Blogger.
Well, my blog is separated into the days that i have posted on. The last post i posted was on September 9th, but then the older post i have done are on a different page at the bottom under Achieves then September Achieves.
Do you know how to get every post i have done onto the same page so i can display it all on my website, kind of like how you have done it. But it still does it even when using your template code.
EDIT: Don't worry, i think i have fixed it.
Well, my blog is separated into the days that i have posted on. The last post i posted was on September 9th, but then the older post i have done are on a different page at the bottom under Achieves then September Achieves.
Do you know how to get every post i have done onto the same page so i can display it all on my website, kind of like how you have done it. But it still does it even when using your template code.
EDIT: Don't worry, i think i have fixed it.
i cant get rid of the nav bar. when i copy and past that into my html code, it says
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The markup in the document following the root element must be well-formed.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The markup in the document following the root element must be well-formed.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.