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

 
 Closed TopicStart new topic
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.
 
graffitiboi08
post Feb 20 2006, 12:32 PM
Post #2


Member
**

Group: Member
Posts: 12
Joined: Jun 2005
Member No: 150,168
I USED THE CODE AND NOTHING CHANGED, HERE THE SCRIPT FOR MY SYTE


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>
 
moorepocket
post Feb 20 2006, 01:45 PM
Post #3


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

Group: Official Designer
Posts: 4,757
Joined: Mar 2004
Member No: 7,459
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.
 
graffitiboi08
post Mar 26 2006, 02:52 PM
Post #4


Member
**

Group: Member
Posts: 12
Joined: Jun 2005
Member No: 150,168
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>
 
« 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: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic