Log In · Register

 

Help Topic Rules & Requirements

For a list of all requirements and guidelines pertaining to posting a new Help topic, please click here.

This Month's Contests | Hosts Looking for Hostees | Hostees looking for Hosts | BigBookofResources

Submission Guidelines

Blogger made easy, css and codes
moorepocket
post Nov 15 2005, 09:22 AM
Post #1


Death is a promise given to us at birth
*******

Group: Official Designer
Posts: 4,757
Joined: Mar 2004
Member No: 7,459
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 2nekked's tutorial 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="">
  • bgcolor="#FFFFFF" - background color

  • topmargin="0" leftmargin="0" - tells you how much padding is at the top and left. Keep in mind, when change this properties it will also affect the bottom and right of your page. It's best to keep it at "0".

  • background="" style="" - if you want a background, put it here. The style is like "background-repeat, position.
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.
  • position:absolute; z-index:1; - always put it here when positioning objects, it keeps things the same.

  • top:100; - top margin

  • left:200; - left margin

  • width:400; - The width of your blog.

  • height:100% - you could also add height to your blog body. Only use this for frames.
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)



Example of what just being typed.

post question in blogger help.
 

Posts in this topic
moorepocket   Blogger made easy   Nov 15 2005, 09:22 AM
graffitiboi08   I USED THE CODE AND NOTHING CHANGED, HERE THE SCRI...   Feb 20 2006, 12:32 PM
moorepocket   you forgot to close one of the divs. (posted at......   Feb 20 2006, 01:45 PM
graffitiboi08   my codes didnt work QUOTE<body background =...   Mar 26 2006, 02:52 PM

« Next Oldest · Blogger Support · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic