Web Basics: css

Showing posts with label css. Show all posts

2007-12-12

Menu Bar with CSS Definitions

(Related Topic: Adding a Menu Bar)
Menu bars are the basic navigation tools of a website. Menu bars allow the visitors or users of a website to conveniently navigate from one page to another. Without the menu bar or any other navigation links, all the contents of a website have to be placed on the front page. This would be tantamount to printing a whole book as a long scroll rather than the more practical leaf-page format. The menu bar is comparable to the index or table of contents of a book. It allows the readers to find the particular page or contents that they want. Thus, the need for scanning the whole book is eliminated.

Even blogsites may need menu bars for easy navigation. For instance, this blogsite features a simple menu bar located at the top portion of the header area. This menu bar leads to the different resources and information found on this blogsite. Since each blog post is located on a unique page, you can link the important pages to the items of your menu bar. For instance, I have included the following items in my menu bar:

HOME||CHAT||GAMES||SLIDES||BLOGROLL||ABOUT||CONTENTS

The menu bar of this blogsite was created using simple text links. There is another way of creating a Blogger/Blogspot menu bar using CSS definitions. CSS adds text effects to the menu bar. In my previous post on this topic I have discussed the simple method that I have used for this blogsite without using CSS definitions. In this post I will discuss the method that utilizes CSS definitions. (For an example of Blogger menu bar with CSS definitions, visit this site: Much Ado About Nothing.)

Here are the steps that you should follow to create a menu bar for your Blogger/Blogspot site:

Step1: Create a new header page element. To do this, please refer to this post: New Header and Crosscol Elements.

Step2: Find the HTML section that is shown below and add the red-higlighted codes.

<div id='header-wrapper'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Beautiful Beta (Header)' type='Header'/>
</b:section>
</div>

Step3: In the style sheet section of your template, add these CSS codes:

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}

#menubar a:hover {
background-color: $headerCornersColor;
}

Step4: Save your template and go to the Page Elements tab. You will notice that a new page element box has been added above the header title. Click the Add a Page Element link and choose Link List as the new page element. You can now start linking pages from your blogsite posts or from other sites.

Please continue reading...

2007-12-08

Understanding Style Sheets (CSS)

HOME||CONTENTS

There are actually different types of style sheets that can be integrated with HTML documents. However, the most commonly used type of style sheet is the Cascading Style Sheet or CSS. As the name implies, this style sheet is a layered style sheet. This means that different formats can be implemented using different attributes. CSS is an extension of the HTML language. CSS allows generalized formatting of a web document without the need for individually tagging each element. Basically, CSS provides the general formatting for the texts, graphics and layout a HTML document or web page.

You can consider CSS as some sort of generic formatting tool that is much similar to the formatting tools of word processors. CSS tells the browser how a particular type of page element will be displayed. For instance, the post titles (header texts) of this blogsite are displayed as left aligned, blue color, and black during mouse hover. All of these characteristics are declared in the style sheet. Without the style sheet, the individual titles need to be tagged separately.

CSS codes are placed inside the <head> tags of a HTML document. These CSS codes, are further nested inside the <style> tags. In Blogger/Blogspot templates, the style sheets are found between the <b:skin> tags. If HTML tags are easily identifiable because of the arrow brackets (< and >), CSS codes are easily identifiable because of the curly brackets ({ and }) CSS codes or attributes are enclosed within these brackets.

Below is an example of CSS codes. These CSS codes provide the background image for this blogsite. Tweaking these codes in my template will change the attributes of the background image.

<style type='text/css'>
body
{
background-image:
url('http://www.quiltingbb.com/images/wood_tile.jpg');
background-repeat: repeat;
background-attachment:
fixed
}
</style>

Unlike HTML tags, CSS codes do not necessarily need to be grouped in hierachical order. However, for the sake of convenience, the CSS codes are grouped according to the particular HTML elements they format. For instance, in the Blogger templates, the CSS codes for the header elements are grouped together. CSS codes have similar attributes to HTML tags. Some of the most common attributes of CSS codes are width, alignment, height, color, and text effect. Hence, if you are very familiar with HTML tags, you can easily learn how to format CSS codes. In my successive posts, I will discuss specific CSS formatting codes that can be used in Blogger/Blogspot templates.

If you want to learn more about CSS, you can visit this site: W3.ORG

Please continue reading...

2007-11-27

Collapsible Posts (Dropdown Posts)

HOME||CONTENTS

If you like your blog posts to be truncated without actually eliminating a single word, then the "collapsible post" option is the best option for you. This option allows your blog post to be partially displayed on the main page of your blogsite. In this manner, only the first paragraph or selected paragraphs will be displayed. Some blog readers do not have the patience to scroll down on your blog posts to find the articles that are interesting to them. The collapsible option allows your readers to conveniently scan your main blog posts. Your readers will be able to read the rest of the post by simply clicking the "Read More..." link at the bottom of each article post. In my Much Ado About Nothing blogsite, I have used the "More Blasphemy..." link. You can actually customize this link by editing the corresponding texts in the HTML codes.

However, the collapsible option is not readily available in Blogger/Blogspot. You first need to implement some CSS and HTML codes in the template of your blogsite. Here are the steps that you should follow to include the collapsible option in your Blogger/Blogspot template:

Step1: Backup your template. Just in case something goes wrong, you can always go back to your original template.

Step2: Open the HTML editor of your template and locate the closing </head> tag. Just before this tag, add these codes:

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

If the codes above do not work, go to this link and copy all the codes: Codes.

Step3: Save your template and locate this section in the HTML document:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> 
</div>

Add the red-highlighted codes as shown above. If the codes above do not work properly, visit this link: Codes2.

Step4: Save your template and go to the Settings-Formatting tab.

Step5: Locate the Post Template box and paste these codes as shown in the illustration:

Type your summary here
<span id="fullpost">
Type rest of the post here
</span>

Now you are done. Save your template and view your blog. You will notice that there are actually no changes in your blog posts. You must first edit the old blog posts and include the post template codes to implement the "collapsible post" option. However, every time you make a new post, the template codes that you have added will appear in the "Edit HTML" tab of the post editor. Hence, it is better to first type your blog post using the Edit HTML tab of the post editor to assure that the texts are properly coded. Simply inlcude the texts or portion of your post that you want to be hidden within the <span> codes.

NOTE: If you find it difficult to directly edit your HTML template, refer to this post: Editing Templates.

Please continue reading...

2007-11-16

Hiding the Navigation Bar

HOME||CONTENTS

Have you noticed the bar on top of your Blogger/Blogspot site? It is called the navigation bar. It contains the search box and other links that can be conveniently used when you are editing your blogs. However, some bloggers would prefer to dispense of the said navigation bar. There are many reasons why you might like to remove the said bar. One reason would be for aesthetic purposes. You might want your blogsite layout to have a more professional feel. On the other hand, you might simply want to add other functionalities on your layout. Whatever the reasons might be, it is still not advisable to permanently remove the said bar. You might end up having difficulty navigating and editing your blogsite if the navigation bar is permanently removed. One solution to this is to simply hide the navigation bar by adding a CSS code on the template of your blogsite.

To hide the navigation bar, first find the "credits section" on the template of your blogsite. The credits section contains the name of the template designer. This section resembles the sample below. For the sake of illustration, I have used the credits section of this blogsite's template.

<b:skin><![CDATA[/*

-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
Modified by: Homar Murillo
----------------------------------------------- */

The aforementioned section is located on the upper part of your blogsite template. Hence, it is very easyto find. Immediately under it, add this CSS code:

#navbar-iframe {
display: none !important;
}

Now you are done. It is as simple as that. Save your template and view your blog. If you want to restore the navigation bar, simply remove the aforementioned CSS code.

Please continue reading...

2007-11-14

Scrollbars Inside Blog Posts

HOME||CONTENTS

If you intend to include very long text contents in your blog posts but you want to save space, you may use the scrolling text or scroll bar definitions in your style sheets. For instance, I have posted here the template of this blogsite. However, since the template has very long text contents, I opted to use the scrolling text style. I have used the codes below for the CSS scroll bar definitions within my blog posts. You may directly copy-paste the codes in the style sheet of your blog template or you may modify them first, depending on your preferences. The size (width and height), background color, and border definitions can all be modified.

.scrollingtext {
height:200px;
width:465px;
background:#FFFFFF;
border:2px solid #b47b10;
overflow:auto;
}

Scrollbars are ideal for long text contents such as the template codes of this blog site. To include selected texts inside the scrollbars, you must enclose the texts within these codes: <div class="scrollingtext">TEXT</div>. By the way, these codes should only be used within the text editor of the blog post and not on the template editor, as illustrated below.

Web Basics Template

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<b:include data='blog' name='all-head-content'/>

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name: Minima

Original Design By: Douglas Bowman

URL: www.stopdesign.com

Updated By: Blogger Team

Modified By: Homar Murillo

----------------------------------------------- */

/* Variable definitions

====================

<Variable name="bgcolor" description="Page Background Color"

type="color" default="#fff" value="#ffffff">

<Variable name="textcolor" description="Text Color"

type="color" default="#333" value="#000000">

<Variable name="linkcolor" description="Link Color"

type="color" default="#58a" value="#a9501b">

<Variable name="pagetitlecolor" description="Blog Title Color"

type="color" default="#666" value="#b47b10">

<Variable name="descriptioncolor" description="Blog Description Color"

type="color" default="#999" value="#b47b10">

<Variable name="titlecolor" description="Post Title Color"

type="color" default="#c60" value="#b47b10">

<Variable name="bordercolor" description="Border Color"

type="color" default="#ccc" value="#b47b10">

<Variable name="sidebarcolor" description="Sidebar Title Color"

type="color" default="#999" value="#b47b10">

<Variable name="sidebartextcolor" description="Sidebar Text Color"

type="color" default="#666" value="#000000">

<Variable name="visitedlinkcolor" description="Visited Link Color"

type="color" default="#999" value="#a9501b">

<Variable name="bodyfont" description="Text Font"

type="font" default="normal normal 100% Georgia, Serif" value="normal normal 96% Georgia, Times, serif">

<Variable name="headerfont" description="Sidebar Title Font"

type="font"

default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

<Variable name="pagetitlefont" description="Blog Title Font"

type="font"

default="normal normal 200% Georgia, Serif" value="normal bold 339% Georgia, Times, serif">

<Variable name="descriptionfont" description="Blog Description Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="italic normal 116% Georgia, Times, serif">

<Variable name="postfooterfont" description="Post Footer Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">

/* Use this with templates/template-twocol.html */

body {

background:$bgcolor;

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

a:link {

color:$linkcolor;

text-decoration:none;

}

a:visited {

color:$visitedlinkcolor;

text-decoration:none;

}

a:hover {

color:$titlecolor;

text-decoration:underline;

}

a img {

border-width:0;

}

/* Header

-----------------------------------------------

#header-wrapper {

width:960px;

background: none;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

#header-inner {

background-position: left;

margin-left: auto;

margin-right: auto;

}

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

#header a {

color:$pagetitlecolor;

text-decoration:none;

}

#header a:hover {

color:$pagetitlecolor;

}

#header .description {

margin:0 auto;

padding:0 20px 15px;

max-width:700px;

text-transform:uppercase;

letter-spacing:.2em;

line-height: 1.4em;

font: $descriptionfont;

color: $descriptioncolor;

}

#header img {

margin-left: 0;

margin-right: 0;

}

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 960px;

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}

#main-wrapper {

width: 470px;

float: left;

padding:10px;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#right-sidebar-wrapper {

width: 200px;

float: right;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

/* Headings

----------------------------------------------- */

h2 {

margin:1.5em 0 .75em;

font:$headerfont;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color:$sidebarcolor;

}

/* Posts

-----------------------------------------------

h2.date-header {

margin:1.5em 0 .5em;

}

.scrollingtext {

height:200px;

background:#FFFFFF;

width:465px;

border:2px solid $bordercolor;

overflow:auto;

}

.post {

margin:.5em 0 1.5em;

border-bottom:3px solid $bordercolor;

padding-bottom:1.5em;

}

{ border-bottom: thick none transparent url('http://img.photobucket.com/albums/v333/dianeskie/2dhh1d1.jpg') }

.post h3 {

margin:.25em 0 0;

padding:0 0 4px;

font-size:140%;

font-weight:normal;

line-height:1.4em;

color:$titlecolor;

}

.post h3 a, .post h3 a:visited, .post h3 strong {

display:block;

text-decoration:none;

color:$titlecolor;

font-weight:normal;

}

.post h3 strong, .post h3 a:hover {

color:$textcolor;

}

.post p {

margin:0 0 .75em;

line-height:1.6em;

}

.post-footer {

margin: .75em 0;

color:$sidebarcolor;

text-transform:uppercase;

letter-spacing:.1em;

font: $postfooterfont;

line-height: 1.4em;

}

.comment-link {

margin-left:.6em;

}

.post img {

padding:4px;

border:1px solid $bordercolor;

}

.post blockquote {

margin:1em 20px;

}

.post blockquote p {

margin:.75em 0;

}

.dropcaps { float:left; color: $#C68E17; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

/* Comments

----------------------------------------------- */

#comments h4 {

margin:1em 0;

font-weight: bold;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color: $sidebarcolor;

}

#comments-block {

margin:1em 0 1.5em;

line-height:1.6em;

}

#comments-block .comment-author {

margin:.5em 0;

}

#comments-block .comment-body {

margin:.25em 0 0;

}

#comments-block .comment-footer {

margin:-.25em 0 2em;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.1em;

}

#comments-block .comment-body p {

margin:0 0 .75em;

}

.deleted-comment {

font-style:italic;

color:gray;

}

#blog-pager-newer-link {

float: left;

}

#blog-pager-older-link {

float: right;

}

#blog-pager {

text-align: center;

}

.feed-links {

clear: both;

line-height: 2.5em;

}

#left-sidebar-wrapper {

width: 200px;

float: left;

word-wrap: break-word;

overflow: hidden;

}

/* Sidebar Content

----------------------------------------------- */

.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

}

.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.sidebar li {

margin:0;

padding:0 0 .25em 15px;

text-indent:-15px;

line-height:1.5em;

}

.sidebar .widget, .main .widget {

border-bottom:0px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}

.main .Blog {

border-bottom-width: 0;

}

/* Profile

----------------------------------------------- */

.profile-img {

float: left;

margin: 0 5px 5px 0;

padding: 4px;

border: 1px solid $bordercolor;

}

.profile-data {

margin:0;

text-transform:uppercase;

letter-spacing:.1em;

font: $postfooterfont;

color: $sidebarcolor;

font-weight: bold;

line-height: 1.6em;

}

.profile-datablock {

margin:.5em 0 .5em;

}

.profile-textblock {

margin: 0.5em 0;

line-height: 1.6em;

}

.profile-link {

font: $postfooterfont;

text-transform: uppercase;

letter-spacing: .1em;

}

/* Footer

----------------------------------------------- */

#footer {

width:100%;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

/** Page structure tweaks for layout editor wireframe */

body#layout #header {

margin-left: 0px;

margin-right: 0px;

}

]]></b:skin>

body

{

background-image:

url('http://www.quiltingbb.com/images/wood_tile.jpg');

background-repeat: repeat;

background-attachment:

fixed

}

</style>

</head>

<body>

<a href='#main'>skip to main </a> |

<a href='#sidebar'>skip to sidebar</a>

</span>

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>

<b:widget id='Text2' locked='false' title='' type='Text'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='Header1' locked='true' title='Web Basics (Header)' type='Header'>

<b:includable id='main'>

<b:if cond='data:useImage'>

<b:if cond='data:imagePlacement == "REPLACE"'>

</a>

</div>

<b:else/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<data:title/>

<b:else/>

</b:if>

</h1>

</div>

</div>

</b:if>

<b:else/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<data:title/>

<b:else/>

</b:if>

</h1>

</div>

</div>

</b:if>

</b:includable>

</b:widget>

<b:widget id='Text4' locked='false' title='' type='Text'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

</b:section>

</div>

<b:section class='sidebar' id='left-sidebar' preferred='yes'>

<b:widget id='HTML6' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML9' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML8' locked='false' title='PayPerPost, Inc' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML11' locked='false' title='Subscribe Now' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML7' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='AdSense2' locked='false' title='' type='AdSense'>

<b:includable id='main'>

<data:adCode/>

</div>

</b:includable>

</b:widget>

<b:widget id='Image4' locked='false' title='' type='Image'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<br/>

<b:if cond='data:caption != ""'>

</b:if>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='Image2' locked='false' title='' type='Image'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<br/>

<b:if cond='data:caption != ""'>

</b:if>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='Image3' locked='false' title='' type='Image'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<br/>

<b:if cond='data:caption != ""'>

</b:if>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML5' locked='false' title='blog listing' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='LinkList2' locked='false' title='web resources' type='LinkList'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<ul>

<b:loop values='data:links' var='link'>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

<b:widget id='LinkList1' locked='false' title='Web Pals' type='LinkList'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<ul>

<b:loop values='data:links' var='link'>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'>

<b:includable id='main'>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>

<b:section class='main' id='main' showaddelement='yes'>

<b:widget id='HTML4' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

<b:includable id='nextprev'>

<b:if cond='data:newerPageUrl'>

</span>

</b:if>

<b:if cond='data:olderPageUrl'>

</span>

</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:else/>

<b:if cond='data:newerPageUrl'>

</b:if>

</div>

</b:includable>

<b:includable id='backlinks' var='post'>

<b:if cond='data:post.numBacklinks != 0'>

<b:loop values='data:post.backlinks' var='backlink'>

<b:include data='backlink' name='backlinkDeleteIcon'/>

</dt>

<data:backlink.snippet/>

</dd>

</dd>

</div>

</b:loop>

</dl>

</b:if>

</p>

</b:includable>

<b:includable id='post' var='post'>

<b:if cond='data:post.title'>

<b:if cond='data:post.link'>

<b:else/>

<b:if cond='data:post.url'>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

</div>

<div><script type='text/javascript'>addthis_url='<data:post.url/>'; addthis_title='<data:post.title/>'; addthis_pub='homar';</script><script src='http://s7.addthis.com/js/addthis_widget.php?v=12' type='text/javascript'/></div>

<b:if cond='data:top.showAuthor'>

<data:top.authorLabel/>

</b:if>

</span> <span class='post-timestamp'>

<b:if cond='data:top.showTimestamp'>

<data:top.timestampLabel/>

<b:if cond='data:post.url'>

</b:if>

</span> <span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>

</b:if>

</span> <span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>

</a>

</span>

</b:if>

<b:include data='post' name='postQuickEdit'/>

</span> <span class='post-backlinks post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.showBacklinks'>

</b:if>

</span> </p>

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

</b:loop>

</b:if>

</span> </p>

</div>

</b:includable>

<b:includable id='commentDeleteIcon' var='comment'>

</a>

</span>

</b:includable>

<b:includable id='status-message'>

<b:if cond='data:navMessage'>

<data:navMessage/>

</div>

</div>

</b:if>

</b:includable>

<b:includable id='feedLinks'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:feedLinks'>

<b:include data='feedLinks' name='feedLinksBody'/>

</div>

</b:if>

<b:else/>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.allowComments'>

<b:if cond='data:post.feedLinks'>

<b:include data='post.feedLinks' name='feedLinksBody'/>

</b:if>

</b:loop>

</div>

</b:if>

</b:includable>

<b:includable id='backlinkDeleteIcon' var='backlink'>

</a>

</span>

</b:includable>

<b:includable id='feedLinksBody' var='links'>

<data:feedLinksMsg/>

<b:loop values='data:links' var='f'>

</b:loop>

</div>

</b:includable>

<b:includable id='postQuickEdit' var='post'>

<b:if cond='data:post.editUrl'>

</a>

</span>

</b:if>

</b:includable>

<b:includable id='comments' var='post'>

<b:if cond='data:post.allowComments'>

<h4>

<b:if cond='data:post.numComments == 1'>

1 <data:commentLabel/>:

<b:else/>

<data:post.numComments/> <data:commentLabelPlural/>:

</b:if>

</h4>

<b:loop values='data:post.comments' var='comment'>

<b:if cond='data:comment.authorUrl'>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

<b:if cond='data:comment.isDeleted'>

<b:else/>

</b:if>

</dd>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

</p>

</b:if>

<b:if cond='data:post.showBacklinks'>

<b:include data='post' name='backlinks'/>

</b:if>

</div>

</b:includable>

<b:includable id='main' var='top'>

<b:include data='top' name='status-message'/>

<data:adStart/>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.dateHeader'>

</b:if>

<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == "item"'>

<b:include data='post' name='comments'/>

</b:if>

<b:if cond='data:post.includeAd'>

<data:adEnd/>

<data:adCode/>

<data:adStart/>

</b:if>

</b:loop>

<data:adEnd/>

</div>

<b:include name='nextprev'/>

<b:include name='feedLinks'/>

</b:includable>

</b:widget>

</b:section>

</div>

<b:section class='sidebar' id='right-sidebar' preferred='yes'>

<b:widget id='Image1' locked='false' title='' type='Image'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<br/>

<b:if cond='data:caption != ""'>

</b:if>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='Text1' locked='false' title='My Son' type='Text'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML3' locked='false' title='My Web Pet' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML2' locked='false' title='Please Leave Your Message' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML1' locked='false' title='Passers-by' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='Text3' locked='false' title='My sites' type='Text'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<b:if cond='data:team == "true"'>

<ul>

<b:loop values='data:authors' var='i'>

</b:loop>

</ul>

<b:else/>

<b:if cond='data:photo.url != ""'>

</b:if>

<b:if cond='data:showlocation == "true"'>

</b:if>

<b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>

</dl>

</b:if>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>

<b:includable id='main'>

<b:if cond='data:title'>

</b:if>

<b:if cond='data:style == "HIERARCHY"'>

<b:include data='data' name='interval'/>

</b:if>

<b:if cond='data:style == "FLAT"'>

<b:include data='data' name='flat'/>

</b:if>

<b:if cond='data:style == "MENU"'>

<b:include data='data' name='menu'/>

</b:if>

</div>

<b:include name='quickedit'/>

</div>

</b:includable>

<b:includable id='flat' var='data'>

<ul>

<b:loop values='data:data' var='i'>

<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)

</li>

</b:loop>

</ul>

</b:includable>

<b:includable id='menu' var='data'>

<b:loop values='data:data' var='i'>

</b:loop>

</select>

</b:includable>

<b:includable id='interval' var='intervalData'>

<b:loop values='data:intervalData' var='i'>

<ul>

<b:include data='i' name='toggle'/>

(<span class='post-count'><data:i.post-count/></span>)

<b:if cond='data:i.data'>

<b:include data='i.data' name='interval'/>

</b:if>

<b:if cond='data:i.posts'>

<b:include data='i.posts' name='posts'/>

</b:if>

</li>

</ul>

</b:loop>

</b:includable>

<b:includable id='toggle' var='interval'>

<b:if cond='data:interval.toggleId'>

<b:if cond='data:interval.expclass == "expanded"'>

</a>

<b:else/>

</a>

</b:if>

</b:includable>

<b:includable id='posts' var='posts'>

<b:loop values='data:posts' var='i'>

</b:loop>

</ul>

</b:includable>

</b:widget>

</b:section>

</div>

</div>

<b:section class='footer' id='footer'>

<b:widget id='HTML12' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

</b:section>

</div>

</div></div>

</body>

</html>

Please continue reading...

Web Basics

Google Search

Blog Archive

2007-12-12

Menu Bar with CSS Definitions

2007-12-08

Understanding Style Sheets (CSS)

2007-11-27

Collapsible Posts (Dropdown Posts)

2007-11-16

Hiding the Navigation Bar

2007-11-14

Scrollbars Inside Blog Posts

Message Board

Bitty Browser Window

Passers-by