Printable Version of Topic

Click here to view this topic in its original format

Forums _ Blogger Support _ Blogger made easy

Posted by: moorepocket Nov 15 2005, 09:22 AM

All right, since there are lot of questions, about how to make blogger layout. I took the time to give you an example of what it like.

First, blogger is just the same as xanga. But blogger you can do more. Please refer to http://www.createblog.com/forums/index.php?showtopic=10373 for more informations.

I suggest that you know about stylesheet, and know how to make a layout. They are properties, class, and attributes to what your page will looks like. You can use css (cascading stylesheet) to change the outlook of your page w/o manually change every think.

Here is mine blogger css.

CODE
<style>
/* css by Ryan (moorepocket) */
/* http://moorepocket.blogspot.com */

body, xmp, div, p {
/* Body, div, and p properties */
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFFa;
text-align : justify;
font-family : arial, tahoma;
color : #000000;
font-size : 11px; }

table, tr, td, th {
/* Table properties */
text-align : justify;
font-family : arial, tahoma;
color : #000000;
font-size : 11px; }

/* Links
----------------------------------------------- */

a:link, a:visited, a:active {
text-decoration : underline;
font-size : 11px;
color : #FFFFFF;
font-family : arial, tahoma; }

a:hover {
background-color: #000000a;
text-decoration : none;  
font-size : 11px;
color : #FFFFFF;
font-family : arial, tahoma; }

/* Header, Footer
----------------------------------------------- */
.head {
background-color: #000000;
font-family : arial, tahoma;
color : #FFFFFF;
font-weight : bold;
font-size : 11px;
text-align : left;
text-transform : uppercase;
border-bottom : 1px dashed #d5fbfd; }
.post-body {text-align : justify; }

.footer {
background-color: #000000;
font-family : arial, tahoma;
color : #FFFFFF;
font-weight : normal;
font-size : 10px;
text-align : center;
text-transform : lowercase;
border-top : 1px dashed #000000a; }

/* Others
----------------------------------------------- */
#border {border: 5px solid #FFFFFF;}
#table {
text-align: justify;
background-color: #FFFFFF;
width: 100%; padding:2px;}

b, strong, u, i, em, s {
font-size : 11px; font-weight: bold;
font-family : arial, tahoma;
color : #000000;}

input, select, textarea, iframe.htmleditor, .textfield, .button {
text-align : center;
background-color : transparent;
border : 1px solid #000000;
font-size : 11px;
font-family : arial, tahoma; }
</style>

and here is the entire layout coding w/ css incorporate.
CODE
<html>
<head>
<title>YOUR TITLE GO HERE</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style>
/* css by Ryan (moorepocket) */
/* http://moorepocket.blogspot.com */

body, xmp, div, p {
/* Body, div, and p properties */
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFFa;
text-align : justify;
font-family : arial, tahoma;
color : #000000;
font-size : 11px; }

table, tr, td, th {
/* Table properties */
text-align : justify;
font-family : arial, tahoma;
color : #000000;
font-size : 11px; }

/* Links
----------------------------------------------- */

a:link, a:visited, a:active {
text-decoration : underline;
font-size : 11px;
color : #FFFFFF;
font-family : arial, tahoma; }

a:hover {
background-color: #000000a;
text-decoration : none;  
font-size : 11px;
color : #FFFFFF;
font-family : arial, tahoma; }

/* Header, Footer
----------------------------------------------- */
.head {
background-color: #000000;
font-family : arial, tahoma;
color : #FFFFFF;
font-weight : bold;
font-size : 11px;
text-align : left;
text-transform : uppercase;
border-bottom : 1px dashed #d5fbfd; }
.post-body {text-align : justify; }

.footer {
background-color: #000000;
font-family : arial, tahoma;
color : #FFFFFF;
font-weight : normal;
font-size : 10px;
text-align : center;
text-transform : lowercase;
border-top : 1px dashed #000000a; }

/* Others
----------------------------------------------- */
#border {border: 5px solid #FFFFFF;}
#table {
text-align: justify;
background-color: #FFFFFF;
width: 100%; padding:2px;}

b, strong, u, i, em, s {
font-size : 11px; font-weight: bold;
font-family : arial, tahoma;
color : #000000;}

input, select, textarea, iframe.htmleditor, .textfield, .button {
text-align : center;
background-color : transparent;
border : 1px solid #000000;
font-size : 11px;
font-family : arial, tahoma; }
</style>
</head>

<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" background="" style="">

<div id="body" style="position:absolute; z-index:1; top:100; left:200; width:400;">
<!-------------------------------------------------
 BEGIN BLOGGER CODE
--------------------------------------------------- >

<Blogger>
<!------ DATES ------>
    <BlogDateHeader>
 <div class="head"><$BlogDateHeaderDate$>
    </BlogDateHeader>

<a name="<$BlogItemNumber$>"></a>
<br>
<!------ SUBJECT ------>
    <BlogItemTitle>
 Subject: <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
 <$BlogItemTitle$>
 <BlogItemUrl></a></BlogItemUrl>
    </BlogItemTitle>
 </div>
<!------ POST BODY ------>
    <div class="post-body">
     <$BlogItemBody$>
    </div>

<!------ COMMENT FOOTER ------->
<div class="footer">posted by <a href="mailto:phuong236797@yahoo.com"><$BlogItemAuthorNickname$></a> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>&nbsp;|&nbsp;
      <MainOrArchivePage><BlogItemCommentsEnabled>
        <a href="<$BlogItemPermalinkURL$>#comments"><$BlogItemCommentCount$> comments</a>
     </BlogItemCommentsEnabled></MainOrArchivePage> <$BlogItemControl$>
    </div>

<Br>

<!------- COMMENT -------->
<ItemPage>
<div id="comments">

    <BlogItemCommentsEnabled><a name="comments"></a>
       <div class="head"><$BlogItemCommentCount$> Comments:</div>

       <p>
     <BlogItemComments>
     <dt id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>

       <div class="head" style="width:100%"><$BlogCommentAuthor$> said...</div>

     </dt>

     <div class="post-body">
       <$BlogCommentBody$>
     </div>

     <div class="footer"><a href="#c<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
  <$BlogCommentDeleteIcon$>
     </div>
    <p>
     </BlogItemComments>

   </p>
 <p class="footer">
   <$BlogItemCreate$>
   </BlogItemCommentsEnabled>
    <br />
    <a href="<$BlogURL$>">&lt;&lt; Home</a>
   </p>

   </p>
   </div>

</ItemPage>
</Blogger>
</div>
</body>
</html>

I left comments through out the code to explains what's what. There is nothing to go more indepth.

Look at this part of the code (after the head).
QUOTE
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" background="" style="">
And another part is this:
QUOTE
<div id="body" style="position:absolute; z-index:1; top:100; left:200; width:400;">

If you want padding, use this. Plus this will set the body of your blog, telling you big you want, and when it starts.If you use Div tag, make sure you close it at the end of your page.
QUOTE
</Blogger>
</div>
</body>
</html>

Make sure your blogger codings begin with
QUOTE
<Blogger>

and end with
QUOTE
</Blogger>

If not, your page will mess up.
Don't change anything if you're not sure or don't know how to edit.


I used this codings for some of my blogger layouts.
http://www.createblog.com/skins/download.php?id=5783
http://www.createblog.com/skins/download.php?id=5438
http://www.createblog.com/skins/download.php?id=5018
http://www.createblog.com/skins/download.php?id=6161 (You can apply the same settings here)



http://moorepocket.cbstaff.com/layout/tut.html

post question in blogger help.

Posted by: graffitiboi08 Feb 20 2006, 12:32 PM

I USED THE CODE AND NOTHING CHANGED, HERE THE SCRIPT FOR MY http://www.southerncommenting.blogspot.com


QUOTE
<!-- begin code provided by createblog.com -->
<style>
/* css by Ryan (moorepocket) */
/* http://moorepocket.blogspot.com */

body, xmp, div, p {
/* Body, div, and p properties */
scrollbar-arrow-color:#BDB8B1;
scrollbar-track-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#BDB8B1;
scrollbar-darkshadow-color:#000000;
scrollbar-3dlight-color:#000000;
text-align : justify;
font-family : century gothic;
color : #BDB8B1;
font-size : 12px; }

table, tr, td, th {
/* Table properties */
text-align : justify;
font-family : century gothic;
color : #BDB8B1;
font-size : 12px; }

/* Links
----------------------------------------------- */

a:link, a:visited, a:active {
text-decoration : none;
font-size : 12px;
color : #0D8E13;
font-family : century gothic; }

a:hover {
background-color: #000000;
text-decoration : none;
font-size : 12px;
color : #EBB600;
font-family : century gothic; }

/* Header, Footer
----------------------------------------------- */
.dateheader {
background-color: #OD8E13;
font-family : century gothic;
color : #EBB600;
font-weight : bold;
font-size : 12px;
text-align : right;
text-transform : uppercase;
border-bottom : 1px dashed #0D8E13; }
.post-body {text-align : justify; }

.footer {
background-color: #0D8E13;
font-family : century gothic;
color : #EBB600;
font-weight : normal;
font-size : 12px;
text-align : center;
text-transform : lowercase;
border-top : 1px dashed #EBB600; }


</style>
<!-- end code provided by createblog.com -->

<img src="http://www3.filehost.to/files/2006-02-19_01/001434_syte.gif"></img>

<div id="Layer1" style="position:absolute; left:15px; top:483px; width:505px; height:1120px; z-index:1">

<blogger>


<BlogDateHeader><div align="right">
<$BlogDateHeaderDate$></div>
</BlogDateHeader>

<BlogItemTitle><$BlogItemTitle$><a
name="<$BlogItemNumber$>"> </a></BlogItemTitle>

<div class="blogPost">
<$BlogItemBody$>

<a href="<$BlogItemPermalinkURL$>"

title="permanent
link">#</a> posted by <a
href="mailto:insert email here"><$BlogItemAuthorNickname$></a> |
<$BlogItemDateTime$> | <a

href="java script:HaloScan('<$BlogItemNumber$>');"

target="_self"><script

type="text/javascript">postCount('<$BlogItemNumber$>');

</script></a>div>
</div>


</Blogger>

</div>


<div id="Layer1" style="position:absolute; left:552px; top:483px; width:265px; height:1120px; z-index:1">

fgdfhgfgfgfg

</div>

<div id="Layer1" style="position:absolute; left:837px; top:483px; width:193px; height:1120px; z-index:1">

<MainPage>
<h2 class="sidebar-title">Recent Comments</h2>
<ul>
<Blogger>
<BlogItemCommentsEnabled>
<BlogItemComments>

<li><$BlogCommentAuthor$> //
<a href="<$BlogCommentPermalinkURL$>">
<$BlogCommentDateTime$></a></li>

</BlogItemComments>
</BlogItemCommentsEnabled>
</Blogger>
</ul>
</MainPage>


<BloggerPreviousItems>
<a href="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$>
</a><br />
</BloggerPreviousItems>

<select name="archivemenu" onchange=
"document.location.href=this.options[this.selectedIndex].value;">

<option selected>- Archives -</option>

<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>

</select>



</div>

Posted by: moorepocket Feb 20 2006, 01:45 PM

you forgot to close one of the divs. (posted at....)

QUOTE
</script></a>div>



btw, this tutorial is letting you know how to know css, and set up margin.

Posted by: graffitiboi08 Mar 26 2006, 02:52 PM

my codes didnt work

QUOTE
<body background ="http://www3.filehost.to/files/2006-03-26_03/175559_Untitled-232.gif" bgproperties="absolute">

<!-- begin code provided by createblog.com -->
<style>
/* css by Ryan (moorepocket) */
/* http://moorepocket.blogspot.com */

body, xmp, div, p {
/* Body, div, and p properties */
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#2c7707;
scrollbar-shadow-color:#2c7707;
scrollbar-face-color:#2c7707;
scrollbar-highlight-color:#FFFFFF;
scrollbar-darkshadow-color:#2c7707;
scrollbar-3dlight-color:#2c7707;
text-align : left;
font-family : century gothic;
color : #000000;
font-size : 10px; }

table, tr, td, th {
/* Table properties */
text-align : justify;
font-family : century gothic;
color : #000000;
font-size : 10px; }

/* Links
----------------------------------------------- */

a:link, a:visited, a:active {
text-decoration : none;
font-size : 10px;
color : #2c7707;
font-family : century gothic; }

a:hover {
background-color: #ffffff;
text-decoration : none;
font-size : 10px;
color : #ffd100;
font-family : century gothic; }

/* Header, Footer
----------------------------------------------- */
.head {
background-color: #2c7707;
font-family : century gothic;
color : #ffd100;
font-weight : normal;
font-size : 12px;
text-align : left;
text-transform : uppercase;
border-bottom : 1px dashed #ffd100; }
.post-body {text-align : justify; }

.footer {
background-color: #ffd100;
font-family : century gothic;
color : #2c7707;
font-weight : normal;
font-size : 10px;
text-align : center;
text-transform : lowercase;
border-top : 1px dashed #2c7707; }

/* Others
----------------------------------------------- */
#border {border: 5px solid #FFFFFF;}
#table {
text-align: justify;
background-color: #FFFFFF;
width: 100%; padding:2px;}

b, strong, u, i, em, s {
font-size : 10px; font-weight: normal;
font-family : century gothic;
color : #000000;}

input, select, textarea, iframe.htmleditor, .textfield, .button {
text-align : center;
background-color : transparent;
border : 1px solid #000000;
font-size : 10px;
font-family : century gothic; }
</style>
<!-- end code provided by createblog.com -->

<div id="Layer1" style="position:absolute; left:228px; top:378px; width:154px; height:1227px; z-index:1">

<h2 class="sidebar-title">Previous Posts</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>


<h2 class="sidebar-title">Archives</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>

</ul>

<!-- BEGIN CBOX - http://www.cbox.ws -->
<table border="0" cellpadding="0" cellspacing="0" summary="cbox tagboard" align="center">
<tr><td align="center">
<iframe frameborder="0" width="160" height="305" src="http://www2.cbox.ws/box/?boxid=1100415&amp;boxtag=1506&amp;sec=main" marginheight="2" marginwidth="2" scrolling="yes" allowtransparency="yes" name="cboxmain" style="border: #ababab 1px solid;" id="cboxmain"></iframe>
</td></tr><tr><td align="center">
<iframe frameborder="0" width="160" height="75" src="http://www2.cbox.ws/box/?boxid=1100415&amp;boxtag=1506&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border: #ababab 1px solid; border-top: 0px;" id="cboxform"></iframe>
</td></tr>
</table>
<!-- END CBOX -->

<h2 class="sidebar-title">Links</h2>
<ul>
<a href="http://cakeandice-cream.blogspot.com/">Cake and Ice Cream</a><br>
<a href="http://fourfour.typepad.com/">FourFour</a><br>
<a href="http://www.nahright.com/news/">Nah Right</a><br>
<a href="http://www.byroncrawford.com/">Byron Crawford</a><br>
<a href="http://ybf.blogspot.com/">Young, Black, & Fabulous</a><br>
<a href="http://www.concreteloop.com/">Concrete Loop</a><br>
<a href="http://toyasworld.blogdrive.com/">Toya's World</a><br>
<a href="http://seanshangout.blogdrive.com/">Seans Hangout</a><br>
<a href="http://crunktastical.blogspot.com/">Crunk/Disorderly</a><br>
<a href="http://nepbaland.blogdrive.com//">Nepbaland</a>

</ul>

<h2 class="sidebar-title">Directories</h2>

<center><a href="http://www.six24.com/beta/index.cfm?method=blog_aggregate"
target="_blank" title="This Blog Is Featured At Six24.com"><img
src="http://www.six24.com/beta/six24_blog_button.gif" border="0"
alt="This Blog Is Featured At Six24.com" width="113" height="37" /></a>

<a href="http://www.blogrankings.com"><img src="images/blogrankings.gif" width="84" height="15" border="0"></a>

<a target="_blank" href="http://www.link2blogs.com">
<img style="margin-bottom: 9px" border=0 src="http://www.link2blogs.com/images/L2B_Bar_Header140.gif"></a>
<script src="http://www.link2blogs.com/bar.php?idPlayer=12569"></script>
<a target="_blank" href="http://www.link2blogs.com/registration.php?Referral=bHlmZTI1NTc1NEBnbWFpbC5jb20=">
<img style="margin-top: 9px;" border=0 src="http://www.link2blogs.com/images/L2B_Bar_Footer140.gif"></a>

<a href="http://www.blogtopsites.com/music/"><img border="0" src="http://www.blogtopsites.com/tracker.php?do=in&id=11989" alt="Music Blog Top Sites" /></a>

<!-- BlogRankers.com -->

<a href="http://www.blogrankers.com/index.php?do=votes&id=661"><img border="0" src="http://www.blogrankers.com/tracker.php?do=in&id=661/" alt="BlogRankers.com" /></a>

<!-- /BlogRankers.com -->

<a href="http://www.top100bloggers.com/index.php?do=votes&id=1335"><img src="http://static.flickr.com/34/104883319_6e3e3e9572_o.gif" width="88" height="31" alt="tracker.php" /></a>
</center>

</div>
</div>

</div>

<div id="Layer1" style="position:absolute; left:399px; top:378px; width:355px; height:1227px; z-index:1">

<!-- begin code provided by createblog.com -->
<!-- begin code provided by createblog.com -->

<blogger>
<!-- end code provided by createblog.com -->
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<!-- begin code provided by createblog.com -->
<BlogDateHeader><div align="right">
<$BlogDateHeaderDate$></div>
</BlogDateHeader>
<!-- end code provided by createblog.com -->
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<!-- begin code provided by createblog.com -->

<BlogItemTitle><$BlogItemTitle$><a
name="<$BlogItemNumber$>"> </a></BlogItemTitle>
<!-- end code provided by createblog.com -->
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<!-- begin code provided by createblog.com -->
<div class="blogPost">
<$BlogItemBody$>
<!-- end code provided by createblog.com -->
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<!-- begin code provided by createblog.com -->

<a href="<$BlogItemPermalinkURL$>"

title="permanent
link">#</a> posted by <a
href="mailto:insert email here"><$BlogItemAuthorNickname$></a> |
<$BlogItemDateTime$> | <a

href="java script:HaloScan('<$BlogItemNumber$>');"

target="_self"><script

type="text/javascript">postCount('<$BlogItemNumber$>');

</script></a>div>
</div>
<!-- end code provided by createblog.com -->
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<!-- begin code provided by createblog.com -->
</Blogger>
<!-- end code provided by createblog.com -->
<!-- end code provided by createblog.com -->

</div>