Cut Copy Paste HOME

A New Guide is Here!

2010-10-01T21:41:00.000-07:00

I have started the full scale construction of a New HTML Codes Guide called: htmlwebsites.blogspot.com. This is a New Site based on old ideas that were originally developed on Cut Copy Paste. I have decided to start this New Guide in an attempt to fine tune the old lessons found here. The New Guide has Improved Features and a more organized layout. I believe it will be easier for Users to find the content they are looking for while encouraging interest in new material.

Come take a look, a New Design and Feel with the same Great Resources.

http://htmlwebsites.blogspot.com/

How do I remove the NAVBAR on Blogger?

2010-02-20T21:42:00.000-08:00

Want to see your blog completely free of any content that was not developed by you? Is that NAVBAR the only thing you cant seem to get rid of? I have a code for that. Here is the code:

Now, where to place it. Go to your Layout or Template in your blogs dashboard and then to "Edit HTML." Find the area of the HEAD of the script that looks like this:

Install the code from above and then preview. If you are looking at the Preview for your page and the NAVBAR at the top is gone, you're set. Go back to the editor and Save your Template. If in the event that this didn't remove the bar, DO NOT save, leave the editor and come back before trying again. This will eliminate the chance that you may have placed the code in the wrong way thereby creating errors in your script.

How do I add the Facebook Fan Box to my Blog?

2010-02-19T10:37:00.000-08:00

If you have already established a page for your blog on Facebook, you can now go to "Edit Page."

Then choose the Promote with a Fan Box link about half way down the page.

This will take you to an editor that will quickly add or remove any of the content you may want to display on your page.

You can add the Box as a widget by clicking the Blogger button and this will advance you through the widget app. If you want to take the script and place it as you see fit, read on.

The other method, the pro's choice method, is to click the "Other" tab and get the root code itself.

After you've chosen which items you want to appear in this box, go to your page editor that you use to alter your blog, for example; Dashboard/Template/Edit HTML.

Find the part of the script, just below the <Blogger> element and place the code you got from Facebook. NOTE: this is how you add to the OLD blogger template, keep reading for the Newer widget template.

There are two different Template editors now so, if you've upgraded to the newer Template, use this pic to reference the codes, the template that uses widgets is much more complicated, but here is the example:

Preview before you save is always recommended, and don't be afraid to mess with the width=100 attributes in any of the codes to get it to that perfect fit. Before you know it you will be an avid script editor!!!

How do I put an iFrame on my page?

2010-02-18T15:58:00.000-08:00

Example:

Dictionary | Phone Book, Click one of the links to change the iFrame

Think of an iFrame as a webpage within a webpage. You can use this element for any website, for example, you could have Google as an iFrame, and utilize the Google front page on your page. Having several different resources available on your front page not only makes your site useful to users, but useful to you!

Another awesome feature about this element is that not only does it display an external website on your page, you can also make links that "target" the iFrame instead of navigating away from the page. This works great when compiling different sources of media content such as news in one iFrame and weather in another.

The code that installs into the "body" of your document looks like this:

<IFRAME SRC="http://www.youraddress.com/" TITLE="IFRAME1" SCROLLING="auto" NAME="frame1" WIDTH="500" HEIGHT="150" ALIGN="center" FRAMEBORDER="yes">
</IFRAME>

This is the address you want to be default when you load the page.

Give each individual iFrame a title.

The name of the iFrame will become relevant if you are trying to make links on your page that navigate through the iFrame rather than navigating away from the page. When you make a link to navigate the iFrame, use the name of the frame you are triggering to change; target="frame1" Example:

<a href="http://www.youraddress.com/" target="frame1">Link Name</a>

Scrolling="auto" or "yes" or "no" controls whether or not there will be scrollbars visible in the iFrame.

Frameborder controls the border of the iFrame if you want one. You can also use the height and width attributes to control the size. Be sure to define with "align" how you want the iFrame to sit on the page; left, right or center. Ok go have fun!

How do I cut, copy and paste?

2010-02-17T11:36:00.000-08:00

I have been seeing this question come in many different forms while on the the statistics tracker, so I have decided to make this post and link it to the main page so that hopefully I'm making this a little easier on somebody to find. Something to keep in mind before we get started is that in Windows, there is what is refered to as a "Clipboard." When ever you make a body of text, you can drag a box over that text and manipulate it. If you right click your mouse on the text you've highlighted, a menu pops up with several options. Though there are many different things you can do from these right click menus, we are just covering these three. The following are the functions of each option, and alternate ways of executing the commands without right clicking, ya know so I can turn you into a true pro...

"Cut" remove the selected item but save to clipboard. Ctrl X

"Copy" the selected area to the clipboard, without removing from the document. Ctrl C

"Paste" the item you saved to the clipboard to the document you are editing. Ctrl V

When you cut and paste, where is it saved?

Note: each time you Copy or Cut something new, it automatically replaces the other data you had on the clipboard. This right clicking will become addictive, if you've not been used to it before, prepare to use the force. Try to right click on a picture and then "save the image." This is where it starts getting iffy. You should always make sure that the stuff that you are using is not used in a way that could be construed as Copyright Infringement. I am no medium on these rules and regulations so I won't even begin to sort what's ok, and what's not. It's not hard to figure out though, and if you know how to be original, you won't worry too much about these rules. There are so many more options when right clicking, but at least now that question is resolved.

Cheers!

Lesson 23: Custom Search Engine Script

2010-02-15T11:49:00.000-08:00

Narrow down the web pages you want to search when you install this Search Bar on your blog or website. You will of course have to alter the URL highlighted in red, change this to the URL you want your search to stay limited to. I have used a background image in the text box itself and altered the colors, these can be edited to your liking.

<form method="get" action="http://www.google.com/search">

<input type="text" style="background-image:url('http://i612.photobucket.com/albums/tt203/americaneagletowinginc/tablrbale2.jpg'); color: #cccccc; font-weight: bold; font-size: 10pt;" name="q" size="31"
maxlength="255" value="" />
<input type="submit" value="Google Search" />
<input type="radio" name="sitesearch" value="" />
The Web
<input type="radio" name="sitesearch"
value="http://htmlhelper.blogspot.com/" checked /> Ask PATCAM<br />

</form>

You can change the green highlighted letters to what ever suits your page theme. If you prefer another search provider, you can simply change the domain name to your favorite search engine. Google's the best though, so you won't need to change, right? Right!

Lesson 22: Display Contents On The Main Page Only

2010-02-12T00:07:00.000-08:00

You may have noticed how certain elements of your blog disappear when you navigate away from the main page. This is caused by a small attribute, and it can be utilized for other things. For example, if you want the big picture of the scenery you photographed while out nature hiking to be the primary focus to the viewers that load your home page, but you don't want it to be in the way when they navigate to other posts, simply add these tags around the content you want to be hidden when the viewer moves on from the home screen:

Content to be hidden and all coding for elements, etc. here

</MainOrArchivePage>

Note that anything that is wrapped in a table must be either inside these tags, or use the tags inside of the table, widget, etc.

Lesson 1: Starting your own web script

2007-10-23T09:28:00.000-07:00

This is the basic layout for a page written in HTML. It is probably the most common form of web script and very simple to manipulate. You can enter this text into your Webpage Editor, but please note that this code will not work in the "About Me" section of your MySPACE Profile Editor. (We reccomend an account at http://www.blogger.com/ In your blogger account you can alter the whole HTML code in the "Template" tab.)

Every HTML page has to have the following text, it has to be exact and without error as follows:

<html>
<head>
<title>
Your Page Name Here
</title>

</head>
</body bgcolor="white">

Main Content of Page Goes Here

</body>
</html>

These tags have various functions, and there is a tag to start and end each particular area. Usually, the same tag that opened an area will close an area, the only difference is the close tag will have a backslash / in it right before the tags name.

The "HTML" open and close tags simply define what type of document you are creating, these tags will always be at the beginning and end of the script.

The "HEAD" tags are a sort of background script area. Here you will place various codes that define to the computer how the page will operate between the script and the content. We will go over more about the HEAD area and what scripts you can put there that will make your page have some pretty neat effects.

The "TITLE" area is just as it says, the Title. The name of your page that will appear in the status bar at the very top of the window.

The "BODY" tags open and close the content area that will be visible on your website. There are structural elements that you can put in the body line to define things like a standard text color.

Example:
<body bgcolor="white" text="black" link="blue" vlink="purple">

In the highlighted text there are definitions there for the pages standard text color (black), the links will are defined as blue and the visited links (links you have been to before) will be purple. These are not necessary but if you use them, they need to go in the "BODY" tag

Using an image as a background:
This is easy, all you have to do is replace bgcolor="white" with background="http://www.yourpicturesaddress.com"
You simply paste in your images URL (web address) into the parenthesis and the image will be your background. If your image is smaller than the actual screen size, it will "tile" or appear multiple times, so try to use an image that's pretty large.

Section 1 - Establish Your Blogger

2007-05-23T09:34:00.000-07:00

Sign Up for a Blogger account and establish a blog address. Remember that the shorter your blog address is, the easier it is to add the URL (web pages address) to other material such as flyers, links or other means of advertising. To make things easier, I am recommending you use the "Minima" pre-made template. This layout is basic and comes in various pre-defined colors. Once you have selected your template, make a test post and publish to establish the feed to your blog.

Section 2 - Reverting the Template

2007-05-23T09:33:00.000-07:00

Go to your template and find an option that says "EDIT HTML." Then scroll to the bottom of that page and select "Revert To Classic Template"

Select this option before you start editing, because all the changes you make prior to reverting templates will not be applied to the Classic Editor. Make sure to save often. In the upcoming sections, I always recommend that you "preview" your work before saving, as some edits can be irreversible.

Section 3 - Changing the Background Elements

2007-05-23T09:32:00.000-07:00

The basic html structure codes to change the background attributes is usually found in the <body> tags. There is a code element, however in the blogger script that you must remove all together.

Note: If you are just wanting to use a solid color, all you have to do to is change the hexcode(#color). DRAAC's has a quick reference hexcode chart, and also a list of all acceptable colors. If you just use the name of a color, be sure to remove the # from the definition.

After removing the background element, scroll down to the <body> tag. To add a background image, you must upload the background to a photo hosting website somewhere, so that you can obtain the backgrounds URL (http://www.address.com/). If you use flicker, the edits to the tag would something look like this:

<body background="http://www.flickr.com/image1.jpg/">

The background image as a rule will scroll with content of your page and if it doesn't fit the entire width of your page it will "tile." If you have an image that is adequate in both height and width, it will have a more uniform look. You can add an element to the <body> tag and make it to where your background will stay stationary and the content of your blog will scroll over the background. The element changes the background properties to be "fixed" and looks like this once installed.

<body background="http://www.flickr.com/image1.jpg/" bgproperties="fixed">

Note: ***This script does not work in the FIREFOX internet browser!!!***
There are many other attributes that can go into the <body> tag, and I think you will find, that alot like the head area of a websites script, this is a very versatile part of the code.

Web 2.0 by Prof. Wesch

2007-05-16T12:20:00.000-07:00

MYSPACE Page Editor Code

2007-05-10T13:53:00.000-07:00

By Request: I am posting this code for you to enter into your ABOUT ME section. This code has many attributes that coincide with HTML. They are all easy pretty easy to edit, but if you have any questions, as always comments or emails are welcome...

MYSPACE EDIT SCRIPT

Enter the following into your ABOUT ME section in the MYSPACE Profile Editor:

<style type=text/css>
.pimp_my_profile { Generated By Pimp My Profile www.pimp-my-profile.com }
table, tr, td {
background-color:transparent;
border:none;
border-width:0px;
}

body {
background-image:url(http://farm1.static.flickr.com/208/504495212_ec8aba802c_o.jpg);
background-position:Center Center;
background-attachment:fixed;
background-repeat:repeat-x;
border-color:222266;
border-width:1px;
border-style:Double;
scrollbar-face-color:000000;
scrollbar-highlight-color:FFFF22;
scrollbar-3dlight-color:FFAA22;
scrollbar-shadow-color:2222FF;
scrollbar-darkshadow-color:FF2222;
scrollbar-arrow-color:AA2222;
scrollbar-track-color:444444;
cursor:crosshair;
}

table table {
border:0px;
}

table table table table {
border:0px;
background-image:none;
background-color:transparent;
}

table table table {
border-style:Double;
border-width:1px;
border-color:335577;
}

table table table td {
background-color:000000;
}

table, tr, td, li, p, div {
color:ffffff;
font-family:Lucida Console;
}

.btext {
color:FF2222;
font-family:Lucida Console;
}

.blacktext10 {
color:FF8822;
font-family:Lucida Console;
}

.blacktext12 {
color:6622FF;
font-family:Lucida Console;
}

.lightbluetext8 {
color:2222FF;
font-family:Lucida Console;
}

.orangetext15 {
color:557799;
font-family:Lucida Console;
}

.redtext {
color:dddddd;
font-family:Lucida Console;
}

.redbtext {
color:22FF22;
font-family:Verdana;
}

.text {
color:2222FF;
font-family:Lucida Console;
}

.whitetext12 {
color:dddddd;
font-family:Lucida Console;
}

a:active, a:visited, a:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:link {
color:CC2222;
cursor:pointer;cursor:hand;
font-family:Lucida Console;
}

a:hover, a.searchlinksmall:hover {
color:FF22FF;
font-family:Lucida Console;
}

a.navbar:active, a.navbar:visited, a.navbar:link {
color:2244FF;
font-family:Lucida Console;
}

a.navbar:hover {
color:FF22EE;
font-family:Lucida Console;
}

a.redlink:active, a.redlink:visited, a.redlink:link {
color:2222FF;
}

a.redlink:hover {
color:FF22FF;
font-family:Lucida Console;
}

.nametext {
color:bbbbbb;
font-family:Lucida Console;
}

img {
filter:none;
}

</style>

KEVIN THIS ONE'S FOR YOU!

2007-05-08T20:28:00.000-07:00

Using examples that I have taught again and again here, I have created my ultimate hang-out. The blogger that caters to even me, HA!

Combining The best of Stand Up Comedy, Music Videos and Random Goodies from YouTube, I created an awesome environment to search through various material showing off tricks that can be found on Cut Copy Paste.

Check it out, let me know how it looks, and if it loads ok on your browser. Thanks for visiting!

PATCAM VIDEO BLOG

Oh yeah and if you got some goods to put on that blog, please send it to me, I will post it.

Introducing:

2007-04-26T20:41:00.000-07:00

I have been busy as it seems for some time now. However the time has come to make new again this old hobby of mine. Here are a couple of my new designs that aren't yet complete but the layouts are looking good.

I see some genious at Blogger figured out how to override my code to get rid of that wretched NAVBAR at the top. Touche ole man.

Please critque my work, you have had no problem doing so before, I expect the same results, thats all...

SNUGGLECOVERS Project Launched last month...

Click here to [preview] the SNUGGLE COVERS Website.

Click here to [preview] the United Methodist Church of Kenya's Website.

Note: Before you get all happy on the crtiquing, I know they are the same color structure, etc. I made both out of the same background layouts. Ok, critique on!

Working On Projects For You

2006-07-07T19:07:00.000-07:00

If you don't see any posts, remember, I haven't forgot, I am probably just working on something New!

The PATCAM Graphics Library -Under Construction

This new Library will offer you Images to start your page out with. It will take quite some time to accumulate a good library, but for now, what's here is your's...

Independence Day

2006-07-04T14:23:00.000-07:00

Discovery's Launch from Cape Canaveral

Good Luck Fella's!

LESSON 20

2006-06-21T12:14:00.000-07:00

HOW TO CHANGE
THE MOUSE CURSOR

I FOUND THIS GUIDE ONLINE THAT HAS A WHOLE LIST OF DIFFERENT CURSOR TIPS. THERE IS ONE MAIN CODE TO INSTALL IN BETWEEN THE "HEAD" TAGS. AFTER THAT YOU CAN CHOOSE WHICH CURSOR IS RIGHT FOR YOU AND INSTALL THE NAME OF THE CURSOR IN YOUR NEW TAG. THERE IS ALSO AN OPTION THAT WILL ALLOW YOU TO CHOOSE DIFFERENT TIPS FOR LINKS THAT ARE ON YOUR PAGE. EITHER WAY CHANGES YOUR POINTER TO THE WAY YOU WANT IT TO LOOK ON YOUR SITE.

THE CURSOR ON THIS BLOG HAS BEEN CHANGED TO "CROSSHAIR"

CSS MOUSE POINTER CODES

PRESS PLAY TWICE TO WATCH THE VIDEO:

HTML 101 LESSON 1

2006-06-20T00:21:00.000-07:00

BASIC GUIDE TO THE PAGE LAYOUT

THIS SECTION IS GOING TO TAKE YOU THROUGH VARIOUS PARTS OF AN HTML DOCUMENT. IN AN HTML DOCUMENT YOU WILL FIND A TERM WE ARE GOING TO REFER TO AS "TAGS." THIS VIDEO WILL TAKE YOU THROUGH THE MOST BASIC TAGS AND SOME OF THEIR ATTRIBUTES. ATTRIBUTES WILL BE DISCUSSED WITH THEIR APPROPRIATE TAGS AND I WILL EXPLAIN WHAT EACH DOES AS THE VIDEO PROGRESSES. THE HTML SERIES OF THE CCP LESSONS IS GOING TO BE DIFFERENT THAN THAT OF THE GENERAL LESSONS IN THAT THEY SHOULD BE AIMED MORE TOWARD TEACHING HTML THAN THE USE OF BLOGGER.COM FEATURES. I HOPE YOU FIND THIS SECTION INSIGHTFUL AND AS ALWAYS COMMENTS ARE WELCOME AS ARE SUGGESTIONS ON HOW TO MAKE THIS SITE BETTER.

UPDATED FROM JUN 14, 2006

LESSON 14

2006-06-19T06:41:00.000-07:00

Marquee is a term used to define the scrolling text that slides across the screen. There is an example on the right side bar of this blog. Using the marquee is simple, place this in your script:

<marquee> Change this text </marquee>

You can use other commands to further enhance how your text moves. Try this:

marquee bgcolor="#00ffff"

This will change the line of background behind the text. I can give you a rough idea of what hexidecimal color in some geeky long winded example, but I am going to try to keep this relatively simple. Below is a the basic chart defining which color is what code, simply use the color code you want to show up. I cover how to change the font in another lesson you can see it here, but for now let's move on.

marquee scrollamount="3"

This defines how fast you want the text to slide.

marquee scrolldelay="2"

If you need it to go a lot slower try this delay instead.

marquee scrolldelay="500" scrollamount="400"

I have not tested this yet, but I am already itching to go play with it, by adding both of these attributes with the numbers slightly offset, this causes the text to blink.

marquee direction="right"

This can be used for left, right, up and down however you should define either height, width or both. Like this:
marquee direction="down" height="90" width="100"
This can be used to make a scrolling box with content moving and keep in mind that it's not just text you can scroll. You can use images, links and most other content. Try it, here's an example:

Testing Testing 123

MARQUEES Video

CLICK PLAY TWICE TO PLAY VIDEO

CLICK HERE TO GO TO THE ORIGINAL LESSON

LESSON 4 & 4b(REVISED) VIDEO VERSION

2006-06-18T22:45:00.000-07:00

USING AN IMAGE AS A LINK
CLICK SCREEN TWICE TO VIEW VIDEO

Previous Lesson Next Lesson

CLICK TO SEE THE ORIGINAL LESSON

LESSON 5 (REVISED) VIDEO VERSION

2006-06-17T06:45:00.000-07:00

MAKING AND USING IMAGES AS LINKS
CLICK THE SCREEN TO WATCH THE VIDEO

Previous Lesson Next Lesson

CLICK HERE TO GO TO THE ORIGINAL LESSON

Lesson 1 (revised) Video Version

2006-06-14T22:30:00.000-07:00

START THE BLOGGER ACCOUNT

CLICK THE SCREEN TWICE TO PLAY THE VIDEO

Next Lesson

CLICK HERE TO GO TO THE ORIGINAL LESSON

LESSON 2 (REVISED) VIDEO VERSION

2006-06-14T22:15:00.000-07:00

BORROW A LAYOUT

CLICK SCREEN TWICE TO PLAY VIDEO

Previous Lesson Next Lesson

CLICK HERE TO GO TO THE ORIGINAL LESSON

LESSON 3 (REVISED) VIDEO VERSION

2006-06-14T21:30:00.000-07:00

CREATE YOUR PHOTOHOSTING ACCOUNT
CLICK TWICE TO PLAY VIDEO

Previous Lesson Next Lesson

CLICK HERE TO GO TO THE ORIGINAL LESSON

HTML 101: LESSON 2

2006-06-14T21:15:00.000-07:00

BACKGROUND TAGS & ATTRIBUTES

CLICK SCREEN TWICE TO SEE VIDEO

Get this video and more at MySpace

Advertising!!!

2006-05-26T07:15:00.000-07:00

ALL ADVERTISING FOR COMMERCIAL (SHTUFF THAT YOU ARE SELLING FOR CASH) MUST ABSOLUTELY 100% NO EXCEPTIONS BE APPROVED PERSONALLY BY A MEMBER OF THE BOARD AND ULTIMATELY ME!

Email or Comment here for consideration, emails are more formal and more likely to be approved...

-PATCAM

Auto Maximize the window upon loading your page...

2005-10-23T10:18:00.000-07:00

Enter the highlighted text into the "HEAD" area of your HTML script:

<script language="JavaScript1.2">

</script>

This Javascript will cause the Explorer window to maximize automatically to the full size of the screen whenever some loads your page. This is helpfull if you want people to see as much of the pages content as possible.

Make your YouTube Video Autoplay

2005-10-22T14:49:00.000-07:00

To make your YouTube Video start automatically when you load the page, you only have to add a little code after the video URL in the script

Example:

this is the normal embed code:

Lesson 19: Frames

2005-08-04T07:25:00.000-07:00

Frames are an art all in themselves, basically a frame page is two or three webpages that all load at the same time on one screen. Frames are versatile because while a user is viewing a website like yahoo, they can see things that you would have them use on the left, the right or above, maybe even below. A good example of this type of page is Blog Explosions "Surf" feature. There is a command field inside a frame at all times at the top of the "Surf" page. To learn the structure tags and such for frames click below:

Frames Course

Just like with Lesson 18, I sometimes opt to just let a code generator create the code for me, and then alter it to my likings after I install it. For that I use:

Frames Code Generator

Learn it, love it, use it! Oh, and feel free to comment.

Lesson 18: Tables

2005-07-18T20:53:00.000-07:00

Tables are the "infrastructure" of any webpage. Tables allow you to create rows of information that can be compiled in a way that utilize the most amount of space for each item.

To get an idea of what the Table "tags" look like click below:

Draac's Table Course

Once you get the basic idea of which tags do what, you may opt to let Draac just make the code for you. He allows you to enter specific attributes to make each table the way you want it.

Click Here For the Table Maker 2

Tables are a little more advanced than "basic" html, so as always I recommend that you preview as many times as you can and especially before you save.

Lesson 17: Non Tiling Background

2005-07-15T18:55:00.000-07:00

I ran across this website that had a background made out of a picture of the mountains (how serene), anyways the picture was too small and it tiled which made it not look right. There is a code for this problem, if you happen to run into it. There's even a different solution that doesn't even require a code. One thing is just have a picture that is WAY oversized, I'm talkin 1200X960, focus more on the upper left part of whatever photo it is as being the main part of the background that you will see on your screen. Some people try to say that they don't care what other people see or whatever, but if you are a blogger, usually your goal is to have other people come by your site. That's why it's a good idea to try to "cater" to everyones settings.

If you do have a photo that is too small, there is a way to make it the center part of your page:

Click here to go to that code

Lesson 16: No Underline Links

2005-07-14T21:37:00.000-07:00

Want a more uniform look without all the links being underlined?

There is an easy code that installs right into the "head" tag of your Template.

Click Here to get the code

Lesson 15: Funky Special Letters

2005-07-13T07:24:00.000-07:00

There is an obsession over these funky letters in the website community where I build and searches for: 'funky letters for myspace.' Some people have spent countless hours putting these letters together to make pages worth of information written in purely funky letters.

▓▓▓▓▓▓▓▓. ⊙⊙ ☠

◄◄ REW ► PLAY ▌▌PAUSE █▌STOP ►► FF

█████ ◄╞,          ş ą ğ ♪

♥ ☺ ღ ๑ ♠ ۩ ▶Music♩♪♫♬ Volume: ▁ ▂ ▃ ▄ ▅

❒ Taken ❒ Single ✔

TO DO: ☑ A bit of tweeting, ☑ Lay around, ☑ Drink beer, ☑ Be Awesome.

There's so many, look.....

€
ƒ
…
†
‡
Œ
•
—
™
š
œ
Ÿ
¡
¢
£
¤
¥
¦
§
¨
©
ª
«
¬
®
¯
°
±
²
³
´
µ
¶
·

¹
º
»
¼
½
¾
¿
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ

To use any of these letters, simply drag a box over the text, right click and copy the letter. Then go to where you want to use the letter, right click and paste.

Ctrl X

"Cut" remove the selected item but save to clipboard.

Ctrl C

"Copy" the selected area to the clipboard, without removing.

Ctrl V

"Paste" the item you saved to the clipboard to the area you are editing.

Note: each time you Copy or Paste something new, it automatically replaces the other data you had on the clipboard. See How do I cut, copy and paste? for more on this subject.

Lesson 14: Ah, The Marquee

2005-07-09T14:53:00.000-07:00

I would NOT go overboard with this code, as too many marquees on one page will cause the page to load slower.

This is an example of a marquee in motion, you can change the attributes in the marquee tag to make this thing go faster or slower, or just add a background color to it...

Marquees can also go up and down and if you add a couple of Line Breaks with color, it looks like one of thoses news feed things...

Code Example:

Feel free to mix and alter attributes, as long as you put a space between each attribute. Comments are always welcome...

Lesson 13: Opens a link in a new window

2005-07-08T19:17:00.000-07:00

I thought this needed to be a lesson all it's own.

Blogging leads to needing links to show examples of whatever it is you may be blogging about. When a blogger clicks a link on your page, it's easier for them to see it in a new window, where they can roam around the other site for a second and then when they are done they close the window to reveal your page once again. This is especially useful for Blog Explosion Users.

The only difference in a regular link and a link that opens in a new window, is a very simple attribute. Here's an example:

The yellow text is the only thing different from a normal link.

Lesson 12: Border Attribute

2005-07-06T07:07:00.000-07:00

Ok, so I have shown you how to put the pictures on your webpage, but there are two more things you should know about placing your images.

First is that when you create an image on your page, there is automatically a highlight box (border) put around it. Two, is that you can remove or even increase the size of this border as you see fit.

To get rid of the border altogether make the code look like this:

I find this code useful if I am going to use a little image as a clickable link on my page.

To make the border larger, just add a number like border="1", and so on. If you have any questions leave them in the comment area.

Independence Day Is Almost Here!

2005-07-03T17:37:00.000-07:00

Template Anatomy 101: Section 2

2005-07-02T07:27:00.000-07:00

Remember, Template Anatomy 101 is about the "Minima" style template on blogger.com, though these tips are probably universal.

Change The Profile Area

If you don't like the profile tid-bit that blogger has put in your sidebar, you should consider writing one of your own, like this page. You can paste in a picture as big or as small as you like and tell as much or as little information about yourself.

Here is what you can do to customize your profile area...

In your template scroll through your script until you find these tags:

BE SURE to preview often, and of course before you save changes. As always feel free to comment.

As Requested: Q. How do you put the comments at the top of each post?

2005-06-30T17:59:00.000-07:00

A. A blogger was wanting to know how you move the comments from the bottom to the top of each post.

Here is an example:

Everything that is yellow code needs to be moved up to where the first bit of yellow text is, if you have any more questions, feel free to comment.

Template Anatomy 101: Section 1

2005-06-30T07:23:00.000-07:00

Template Anatomy 101 is going to be about the "Minima" type code that Blogger Provides you with. I will show you how to break down parts of the code and alter them to give your blog the look you want.

Change The Header

Look up, notice that the heading of this page has been changed. Here's how you do it...

In your blogger template, about half way through the code you will find text that looks like this:

If you need help making a picture an actual URL See Lesson 4b.

Remember, your blog header should take up a good portion of width. You may have to alter your images with your "paint" program to get them exactly how you like them before uploading.

I built an "Example Bloggy" made out of the "Minima White" pre-made Template.
Click here to see it.

Lesson 11: Line Breaks

2005-06-30T07:06:00.000-07:00

There are three different ways I use line breaks, I will show you all three in examples, of course...

Note: I find that if you are starting a page from scratch on Blogger, you should put at least two BR's above everything else as to create a space for the Blogger Navbar.

Message From The Editor...

2005-06-29T07:25:00.000-07:00

Alright so I have applied a few of the Lessons to a page for two reasons. One so I could Unblog this blog for easier reference and two so I could show you what else you can do with blogger space. It's kinda like my version of a very FREE Website.

Presenting:

Cut Copy Paste "Unblogged"

Lesson 10: Alter Your Images

2005-06-25T21:04:00.000-07:00

Get to know your "Paint" program. You should have this on your computer from the time you bought it. In your Pictures folder on your computer find the image you want to alter. Then right click on that image and select 'open with' which will pull down another menu, then select 'Paint.' When the new window pulls up there will be several tools on the tool bar to alter images (have fun), or if you get bored you click 'file' and start a 'new' image. I make most of my buttons from scratch, there's really no science, just kinda like drawing in virtual-world.

Don't forget to check out all the options on the upper toolbar also. There are tools to stretch/shrink pictures, or zoom-in so close you can see Grandma's nosehairs (you might delete those while editing). When you get through with all that, SAVE! Remember where too, because you are going to need to upload this image to Flickr to get it on your page...

Refer to Lesson 4b on this page to learn how to get your images URL from Flickr so you can apply it to your page and always feel free to comment.

Lesson 9a: Font Backgrounds

2005-06-22T07:18:00.000-07:00

If you have a background on your page that varies in color, you may need to add a background color to your font, so that all your text is visible. Not every browser makes a page look as it looks on your screen.

To get the text to look like this:

Just add the following code.

Remember, you can change the hexcode colors to whatever you want them to be.

If you have any questions leave them in the comment area.

Note: This code may not work with Firefox.*

Lesson 9: Font

2005-06-17T09:41:00.000-07:00

So, in the body code, we used text to define what color the text that was standard in the document was going to be. However, changing text that IS within the document is a little different.To get your text to look like this:

Notice also that there is a size attribute, this number is in pixels. Tinker with it to make your text BIGGER. The same thing applies with the font as well, you can either use the color hexcode chart, or just type in the name of each color (be exact).

Hexcode Color Chart

Color Spelling Examples

Lesson 8: Background Properties

2005-06-14T19:58:00.000-07:00

If you have decided to use a URL as a background, you can "fix" the background to stay stationary, while the text, links, etc. scroll over the background.

The body tag should look like this:

bgproperties="fixed"

If you have any questions, feel free to comment.

Note: This code does not seem to work well with Firefox (I always suggest against the use of Firefox due to security issues, but this is one more reason).

Lesson 7: Background Colors

2005-06-11T06:51:00.000-07:00

Background Colors:

There are two ways to use background colors as opposed to URL backgrounds. There is an endless array of colors to choose from if you want to use the hexcode chart, or you can just type in the name of each color (chart provides exact spelling).

Here is an example of what either code looks like:

Now that you have your background figured out, it's time to figure out what text is going to look best. You can set a standard text color, as well as have a different color for links and another different color for links you have already been to. Here are how the codes should look in your script:

text - Standard Color for entire page.
link - Color for text that is to be a link.
vlink - Color for links on your page that have already been visited.
alink - Color for current selected link as you click it.

Lesson 6: Using Images As A Background

2005-06-06T12:19:00.000-07:00

Angelfire's Background Library

Angelfire has an excellent gallery of background tiles that -to me- are suitable for most tastes. Scan through the gallery and find a background that you like. Right-click on that particular image and select 'save picture as.' Go to your Flickr account and upload that image. When you finish saving, go back into 'yours' (at the top of Flickr's page) and select the new image you have uploaded. On the right side of the page is an option called 'different sizes,' select this and it should take you to a page where you can see the "URL." Highlight the address by left clicking and dragging a edit field over the whole URL. Right-click and select 'copy'. Now that you have the code in your copy feature, go back to your blogger template. In the HTML code there is a line like this:

Change the code if you have to, sometimes instead of saying 'background' in the script it will say 'bgcolor' with a series of numbers an a pound sign. In either event, change the contents of the parenthesis to the URL from Flickr and be sure that it says 'background' and not 'bgcolor'. An easy way to replace that which is in the parenthesis is to highlight the old address, right-click and select 'paste,' this will automatically erase the old text. Preview what your new background looks like and if you like it, save it.

Note: make sure the code is exact, one flaw could cause the whole page not to work correctly...

Lesson 5: Using An Image As A Link

2005-06-01T21:54:00.000-07:00

Make images links on your page. If you have any questions leave them in the comments area. Here is the example:

Lesson 4b Make Flickr Work For You.

2005-05-31T21:17:00.000-07:00

If you have a Flickr account, here are some easy starter tips to get the images on your Flickr account onto your New Page. First when you go into Your Account, click on 'Yours' and select a picture or a banner that you would like to use at the top of your page. When you click on the picture, it takes you to another single version of that picture. On the bottom right of that page is a link that says 'different sizes,' click that link to take you to a "sizing tool." There will be several options at the top of this page i.e. small, medium, large, blah blah blah. Click the size that you want to use, then scroll down. There is a text field that says 'Grab Photo URL,' highlight all of this text and Cut Copy and Paste it into the part of the HTML document that looks like this:

Lesson 4: Make a Header

2005-05-29T21:17:00.000-07:00

Now that you have Flickr and Blogger set up and you have Cut Copy and Pasted the new page design that you want, it's time to think about making a header. A header is usually the descriptive title at the top of the screen. You can make some really cool "Headers" at Flamingtext.com. Once you have played around with attributes you can right click on the final product and select "save picture as." Remeber where you saved it because you are going to have to go back to that folder to upload it to Flickr.

There is usually a default banner area in the page layout you get from Draac's, replace the address you get from Flickr in that 'img src' area. If you don't like it at first go make another one, I change my home page all the time.

Stay Tuned...

Lesson 3: Got Flickr?

2005-05-28T10:02:00.000-07:00

You are going to need to a place to store your new images for this page. As always, I recommend Flickr, they are going to make alot of this so much easier. Go to www.flickr.com and create an account, once inside you will have to verify a few things through email. But, for the most part, they don't ask a lot of questions. Get to know your flickr account, this is where you are going to upload the things from Lesson 4.

Stay Tuned...

Lesson 2: Borrow a Page Layout

2005-05-27T10:28:00.000-07:00

You need a design layout. I recommend borrowing from a page library, until you get the hang of how it all works. To start HTML in the very beginning is cumbersome. We are going to launch you forward to about a seasoned apprentice. The link below is going to take you to a site where you can see a basic layout of the page you want. Ignore whatever colors and pictures are already on these pages, and try to imagine your stuff there. Choose a design that looks right for you, and click on the appropriate link for the script. For now, I wouldn't use the scripts that contain frames until you understand a little but more about HTML. A notepad should pop up with the script you want, Select-All, Copy and Paste that to the "template" from Lesson 1.

If all goes well you be able to move on to lesson three, now here's the link to go and get the scripts:

Draac's Page Layout's

Lesson 1: Totally Customize Blogger.Com

2005-05-26T21:51:00.000-07:00

THIS IS FOR BLOGGER.COM MEMBERS:

Create a blog, call it whatever you want. When you have the background selection screen up, choose the first one (it doesn't matter what background you choose here, we are going to make one AWESOME background out of stuff you already have downloaded on you computer). Okay, so you have chose a background and are being prompted for a new post. Do not type anything, just publish the blank page. After the screen says 100% click "template". There is a LOT of text in the template, but delete all of it. A simple way to do this is to right click in the text field and click "select-all." Right click again and select "delete."

Now you are ready to move on to Lesson 2, don't save yet, and don't close any windows that you haven't applied lesson 2 to.

Editor's Note:
You are looking at a very early lesson from the CCP posts, Click here to go to THE HOME PAGE. As I revise the lessons and tips, they replace the older Lessons, such as this one.

Launch Project Pat...

2005-05-22T18:41:00.000-07:00

Mission Statement from Headquarters:

I have started this blog to give a quick reference to people that already know how to use html. Here you can find codes, links, you'll get the idea(s). Stick around it's sure to get better...