Blogspot Essentials

HTML Excerpts and Examples

2009-12-22T17:06:00.000-08:00

I will teach you how to include HTML examples/excerpts in your blog posts without them being hidden and being interpreted as part of your document.

You will need to encode your HTML with the useful tool that I have provided below.

The final step is to copy your encoded HTML result and publish it in a post. That's it!

Upside-Down Text Generator

2009-12-17T12:50:00.000-08:00

HTML Mathematical Operators and Relations

2009-10-22T19:29:00.000-07:00

In order to create a symbol that is not already on your keyboard, your must use a code. The codes for the following symbols are listed under the Number Code and Letter Code columns of the chart below. Either code will work.

To add them to a post, simply go to New Post, make sure the post is in Edit Html mode, and copy and paste one of the corresponding codes that I have provided. Then Publish Post.

Symbol	Number Code	Letter Code	Explanation of Symbol
∀	∀	∀	for all
∂	∂	∂	partial differential
∃	∃	∃	there exists
∅	∅	∅	empty set, null set, diameter
∇	∇	∇	nabla, backward difference
∈	∈	∈	element of
∉	∉	∉	not an element of
∋	∋	&ni;	contains as member
∏	∏	∏	n-ary product, product sign
∑	∑	∑	n-ary sumation
−	−	−	minus sign
∗	∗	&lowast;	asterisk operator
√	√	√	square root, radical sign
∝	∝	&prop;	proportional to
∞	∞	∞	infinity
∠	∠	&ang;	angle
∧	∧	&and;	logical and, wedge
∨	∨	&or;	logical or, vee
∩	∩	∩	intersection, cap
∪	∪	∪	union, cup
∫	∫	∫	integral
∴	∴	&there4;	therefore
∼	∼	&sim;	tilde operator, varies with, similar to
≅	≅	&cong;	approximately equal to
≈	≈	≈	almost equal to, asymptotic to
≠	≠	≠	not equal to
≡	≡	&equiv;	identical to
≤	≤	≤	less-than or equal to
≥	≥	≥	greater-than or equal to
⊂	⊂	⊂	subset of
⊃	⊃	⊃	superset of
⊄	⊄	&nsub;	not a subset of
⊆	⊆	&sube;	subset of or equal to
⊇	⊇	&supe;	superset of or equal to
⊕	⊕	&oplus;	circled plus, direct sum
⊗	⊗	&otimes;	circled times, vector product
⊥	⊥	&perp;	up tack, orthogonal to, perpendicular
⋅	⋅	⋅	dot operator

HTML Scrambler

2009-10-22T07:41:00.000-07:00

Use the below HTML Scrambler to disguise and protect your blog's content from thieves.

Add Music To Your Blog

2009-10-17T17:12:00.000-07:00

Use this HTML Music Generator to create a customized code that you can use to embed MP3s into your website or blog.

Free Calculator

2009-10-15T15:34:00.000-07:00

Test Your JavaScript And HTML

2009-10-12T14:02:00.000-07:00

Enter your code in the area below:

Bookmark	Link To This Post

Free File Hosts For Blogger

2009-10-09T20:29:00.000-07:00

Google Groups

Hotlink Files

Nakido

Evilshare

TeraDepot

FrostUpload

OpenDrive

How To Convert YouTube Videos To iPod Format For Free

2009-09-30T18:08:00.000-07:00

Have you ever wanted to put a YouTube video on your iPod... or have you tried, but received a watermark or time limit on the video? Or even worse, have you obtained spyware or adware from some software? I found a free solution to your problems.
With the Free YouTube to iPod Converter, you can convert YouTube (FLV) videos to iPod (MP4) format in 8 easy steps!

Before you start, download and install:

Step 1: Double-Click the DVDVideoSoft Free Studio icon on your Desktop.

Step 2: Click on the Free YouTube to iPod and PSP Converter link.

Step 3: Paste as many YouTube URL's in the empty white space that you want to convert to MP4 format.

Step 4: Browse for an Output folder where you will save your video.

Step 5: Press Download, and wait for the conversion process to finish.

After your conversion completes, you should see that there are completed MP4 videos in your Output folder.

Step 6: Now drag the converted MP4 file to your iTunes Movies library.

Step 7: Synchronize your iPod.

Step 8: Congratulations! You are finished! All that's left to do now is sit back and watch your YouTube video on your iPod.

How to Embed Adobe PDF On Blogger

2009-09-25T17:30:00.001-07:00

Log in to Blogger.
Press New Post.
Paste the following code:
Replace YOUR_DOCUMENT.pdf with the URL of your Adobe PDF.
Press Publish Post.

Example:

How To Embed Mp4 Videos On Blogger

2009-09-24T16:50:00.000-07:00

In this easy tutorial, I will teach you how to embed mp4 videos to Blogger using Quicktime.

Log in to Blogger.
Press New Post.
Paste the following code:
Replace YOUR_VIDEO.mp4 with the URL of your video.
Change the attributes of the code to meet your desires:

width - How wide;
height - How tall;
autoplay - Plays automatically when page loads (true or false);
controller - Shows Quicktime movie controls (true or false);
loop - Plays movie continuously (true or false).
Press Publish Post.

How To Find Free MP3's On The Web

2009-09-12T17:36:00.000-07:00

MP3's can be found all over the internet, and there are various ways to find them.

Method 1: Parent Directory
1. Go to Google.

2. Search for:

...and replace the words TYPE ARTIST OR SONG HERE with an artist or song.

Example:
If I wanted the Simpsons Theme Song, I would Google the following:

Here is the 1st result:

If you click the link, it will bring you here. Find Simpson's Theme Song in the index.:

Once you find the Simpson's Theme Song link, right-click it, and press Copy Link Location. You now have now copied the URL location of the music file.

NOTE: This tutorial is not to be used for illegal purposes. Please do not download any of these songs illegally. I am not responsible for you breaking the law.

Hex Color Code Generator

2009-09-04T17:11:00.000-07:00

The above hex code generator is a color picking application for anyone who wants to find the perfect color for their website or blog.

Bookmark	Link To This Post

Hex Color Scheme Generator

2009-09-03T18:53:00.000-07:00

The above color scheme generator is a color matching application for anyone who wants to create web backgrounds and designs with great looking colors.

Bookmark	Link To This Post

Add Meta Tags To Your Blog

2009-09-01T15:15:00.000-07:00

Meta Tags are very important additions to every blog or website. They provide information that helps search engines categorize your website correctly and, therefore, increases traffic to your site. If you use Google AdSense, AdBrite, or any other form of ads, your revenue should most likely be increased due to Meta Elements. Follow the simple steps below to add them to your Blogger/Blogspot blog:

Log In to Blogger.
Click Layout.
Press Edit HTML.
Download Full Template (Optional)
Press Ctrl+F and search for:

<b:include data='blog' name='all-head-content'/>
Directly above it, type the following:

<meta content='DESCRIPTION HERE' name='description'/> <meta content='KEYWORDS HERE' name='keywords'/> <meta content='AUTHOR NAME HERE' name='author'/>
Replace the words: DESCRIPTION HERE with a brief description of your blog.
Replace the words: KEYWORDS HERE with keywords that describe your blog. Be sure to separate them with commas.
Replace the words: AUTHOR NAME HERE with your name.
Press Save Template.

Example:

Remove "Subscribe to: Posts (Atom)" Link

2009-08-31T16:04:00.001-07:00

Log In to Blogger.
Click Layout.
Click Edit HTML.
Download Full Template (Optional).
Click the 'Expand Widgets Templates' box.
Ctrl+F and search for:
<b:include data='feedLinks' name='feedLinksBody'/>
Delete it.
Save Template.

Embed Flash Games On Blogger

2009-08-20T15:05:00.000-07:00

Go to a flash games website (i.e. addictinggames.com), and choose a game that you would like on your blog. Go to that games page.
Right-click anywhere on that page, and choose View Page Info.
Press the Media button.
Scroll down until you see Embed under the Type Column.
Right-click that choice, and press copy.
Paste it in a new tab, and press enter.
Now, Log In to Blogger in a new tab.
Press Posting and then New Post.
Paste the following code:
Replace the words YOUR FLASH GAME HERE with your game's URL that you opened in a New Tab.
Edit the width="400" height="300" to meet your game's needs.
Press Publish Post.

EXAMPLE:

If you publish the following in a new post:

<embed src="http://www.addictinggames.com/D78AQSAKQLQWI9/1298.swf" type="application/x-shockwave-flash" width="400" height="300"></embed>

The result would be:

Change Blogger Font Face In Posts

2009-08-20T09:25:00.000-07:00

There are a few ways to do this:

1) Font Tag
<font face="Font Name">YOUR TEXT GOES HERE</font>

EX. If you wrote <font face="Comic Sans MS">Superman</font> in a New Post, the published result would look like this: Superman

2) Blogger Fonts and Colors Tool

Press the Layout tab
Press Fonts and Colors
Press Text Font
Choose your Font Family that you would like to use by pressing the
button.
Press Save Changes

NOTE: When you change Text Font face using this method, it changes the font face of the text on your entire website (not just the posts).

Create Blinking Text For Your Blog

2009-08-20T08:07:00.000-07:00

<blink>YOUR TEXT GOES HERE</blink>

EX. If you wrote <blink>TICK</blink> in a New Post, the published result would look like this: TICK

NOTE: This code does not work in Internet Explorer.

Change Blogger Font Size In Posts

2009-08-19T14:23:00.000-07:00

Size 1,Size 2,Size 3,Size 4,Size 5,Size 6,Size 7.

There are seven font sizes in HTML. You can change the font size a few different ways in Blogger:

1) Font Tag
<font size="Size #">YOUR TEXT GOES HERE</font>

EX. If you wrote <font size="5">My Lucky Number</font> in a New Post, the published result would be this size: My Lucky Number

2) Blogger Fonts and Colors Tool

Press the Layout tab
Press Fonts and Colors
Press Text Font
Choose your font size that you would like to use by pressing the
< Smaller or Larger > button.
Press Save Changes

NOTE: When you change Text Font size using this method, it changes the font size of the text on your entire website (not just the posts).

Interactive Color Picker

2009-08-18T08:02:00.000-07:00

Color Pickergreat free widgetsWidgetbox

Color Name Chart Widget

2009-08-18T07:51:00.000-07:00

HTML Color Chartgreat free widgetsWidgetbox

Embed A Webpage Within Your Webpage

2009-08-13T19:22:00.000-07:00

This tutorial will teach you how to embed a fully functional webpage onto your blog or website using an inline frame (iframe).

If you insert the following code in a New Post...:
<iframe src="http://www.google.com/" height="110" width=80%></iframe>

...You'll get the following result:

Remove Blogger Navbar

2009-08-10T18:39:00.000-07:00

Log In to Blogger
Click Layout
Click Edit HTML
Download Full Template (Optional)
Insert #navbar-iframe {display: none !important;} above the Variable Definitions and below the Blogger Template Style information (See Below Photo)
Click Save Template

Create Tables in Blogger

2009-08-10T13:13:00.000-07:00

Use this HTML Table Generator to create a custom table that you can add to your website or blog.

Change Blogger Font Color in Posts

2009-08-10T12:39:00.000-07:00

You can do this a few different ways:

1) Color Name
<font color="color name">YOUR TEXT GOES HERE</font>

EX. If you wrote <font color="purple">Eggplant</font> in a New Post, the published result would look like this: Eggplant

CLICK HERE TO CHOOSE A COLOR NAME

2) Color HEX
<font color="color HEX">YOUR TEXT GOES HERE</font>

EX. If you wrote <font color="#FFA500">Basketball</font> in a New Post, the published result would look like this: Basketball

CLICK HERE TO CHOOSE A COLOR HEX

3) Variable Definition

Press the Layout tab
Press Edit HTML
Ctrl+F and search for:
Variable name="textcolor" description="Text Color"
Directly under it, change the value to your color's HEX code.
Press Save Template

NOTE: When you change the Variable Definition of the Text Color, it changes the font color of the text on your entire website (not just the posts).

4) Blogger Fonts and Colors Tool

Press the Layout tab
Press Fonts and Colors
Press Text Color
Choose your color that you would like to use, and press it.
Press Save Changes

NOTE: When you change Text Color using this method, it changes the font color of the text on your entire website (not just the posts).

Create a Three Column Blogger Template

2009-08-10T09:44:00.000-07:00

Log In
Layout
Edit HTML
Ctrl+F and search for: #header-wrapper {
Under it, change the width from 660px to 940px.
Next, press Ctrl+F and search for: #header .description {
Under it, change the max-width from 660px to 940px.
After that, press Ctrl+F and search for: #outer-wrapper {
Under it, change the width from 660px to 960px.
Now, press Ctrl+F and search for: #main-wrapper {
Change the below width from 410px to 500px.
Next, paste the following red text between the outer wrapper and the main wrapper so that it looks like this:

#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#left-sidebar-wrapper {
width: 220px;
float: $startSide;
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 */
}

#main-wrapper {
width: 500px;
float: $startSide;
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 */
}
After you've done that, Ctrl+F and search for: #footer {
Change the below width from 660px to 940px.
Now, press Ctrl+F and search for: <div id='main-wrapper'>
Directly above it, paste the following code:

<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div>
NOTE: YOU NOW HAVE A THREE COLUMN TEMPLATE. YOU CAN STOP HERE... OR YOU CAN CONTINUE TO MAKE YOUR COLUMNS NOT CRAMMED TOGETHER. MY ADVICE WOULD BE TO CONTINUE!
Finally, in order to to make your columns not crammed together, Ctrl+F and search for : #left-sidebar-wrapper {
Under it, change your code to match the following new code (changes are in red):

#left-sidebar-wrapper {
width: 185px;
margin-right: 10px;
margin-left: 5px;
float: $startSide;
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 */
}

#main-wrapper {
width: 500px;
margin-right: 15px;
margin-left: 15px;
float: $startSide;
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 */
}

#sidebar-wrapper {
width: 185px;
margin-right: 5px;
margin-left: 10px;
float: $endSide;
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 */
}
Save Template

Create Numbered Lists in Blogger

2009-08-09T19:53:00.001-07:00

1. Type the following in a New Post:

<ol>

<li>First point</li>

<li>Second point</li>

<li>Third point</li>

</ol>

2. Publish Post

3. This results in:

First point

Second point

Third point

Create Bullet Points in Blogger

2009-08-09T19:51:00.000-07:00

1. Type the following in a New Post:

<ul>

<li>Bullet point</li>

<li>Bullet point</li>

<li>Bullet point</li>

</ul>

2. Publish Post

3. This results in:

Bullet point

Bullet point

Bullet point

Remove Older Posts, Home, and Newer Posts Links in Blogger

2009-08-09T19:08:00.003-07:00

Log In
Layout
Edit HTML

Ctrl+F and search for:

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

Now replace it with this new code:

#blog-pager-newer-link {
display: none;
}

#blog-pager-older-link {
display: none;
}

#blog-pager {
display: none;
}

Save Template

Create a Gadget that can only be Viewed on your Blogger Post Pages (Permalink)

2009-08-09T19:08:00.001-07:00

Log In to Blogger
Click Layout
Click one of your 'Add a Gadget' buttons
Click the HTML/JavaScript option.
For the Title, write Gadget-Postpages. For the content, write ABC123. (This is temporary.)
Click Save
Now, click Edit HTML towards the top of the page.
Download Full Template (Optional)
Check Expand Widget Templates
Ctrl+F and search for Gadget-Postpages
Under it you should see a line that says:
```
<b:includable id="main">
```
Click directly after it, press enter, and paste this code in the empty space:
```
<b:if cond='data:blog.pageType == "item"'>
```
Scroll down a little bit, and find:
```
<b:include name="quickedit">
```
In the blank space above it, paste:
```
</b:if>
```
Click Save Template
Now press the Layout tab towards the top of the page.
You can now change the title and content of the Gadget-Postpages gadget, and it will stay only on your permalink post pages.

Create a Gadget that can only be Viewed on your Blogger Homepage

2009-08-09T19:05:00.000-07:00

Log In to Blogger
Click Layout
Click one of your 'Add a Gadget' buttons
Click the HTML/JavaScript option.
For the Title, write Gadget-Homepage. For the content, write ABC123. (This is temporary.)
Click Save
Now, click Edit HTML towards the top of the page.
Download Full Template (Optional)
Check Expand Widget Templates
Ctrl+F and search for Gadget-Homepage
Under it you should see a line that says:
```
<b:includable id="main">
```
Click directly after it, press enter, and paste this code in the empty space:
```
<b:if cond="data:blog.url == data:blog.homepageUrl">
```
Scroll down a little bit, and find:
```
<b:include name="quickedit">
```
In the blank space above it, paste:
```
</b:if>
```
Click Save Template
Now press the Layout tab towards the top of the page.
You can now change the title and content of the Gadget-Homepage gadget, and it will stay only on your homepage.

Add a Custom Favicon to your Blogger Website

2009-08-09T18:45:00.001-07:00

Find a picture that you like on the internet that's fairly simple and represents your site.
Log In
Layout
Edit HTML
Download Full Template (Optional)
Ctrl+F and search for: </head>

Directly above it paste this HTML code:

<link href='YOUR-FAVICON-URL' rel='shortcut icon'/>
<link href='YOUR-FAVICON-URL' rel='icon'/>

Paste your image's URL where it says YOUR-FAVICON-URL both times.
Save Template
NOTE: Usually the favicon is best seen when viewed in the Mozilla Firefox web browser.

Include More 'Add a Gadget' Links to your Page Elements Page

2009-08-09T18:44:00.001-07:00

Log In
Layout
Edit HTML
Download Full Template (Optional)
Ctrl+F and search for showaddelement (There are usually a few of these found in your template.)
Change them from showaddelement='no' to showaddelement='yes'
If you see maxwidgets='1' in front of showaddelement, backspace the 1 to change it to maxwidgets=''.
Save Template

Take Credit for a Blogger Template

2009-08-09T18:43:00.002-07:00

Log In
Layout
Edit HTML
Download Full Template (Optional)
Where it says Blogger Template Style, under it, change the information to your own.
Save Template

Remove Blogger Title Border

2009-08-09T18:43:00.001-07:00

Log In
Layout
Edit HTML
Download Full Template (Optional)
Ctrl+F and search for Border Color
Directly under that, replace the current value with transparent
Save Template

Change Order of Blogger Posts

2009-08-09T18:42:00.001-07:00

Log In
Posting
Edit Posts
On the post that you would like to move, click Edit.
Toward the bottom of the page, click Post Options.
If you would like the post moved up, change the Post date and time to a more recent date than the post above it.
If you would like the post moved down, change the Post date and time to an older date than the post below it.
Publish Post

Create Wide Blogger Columns

2009-08-09T18:41:00.001-07:00

Log In
Layout
Edit HTML
Download Full Template (Optional)
Ctrl+F and search for #outer-wrapper {
Directly under that, change the width from 660 px to 970 px (You have just now moved the columns apart.)
Next, Ctrl+F and search for #main-wrapper {
Change the width from 410 px to 650 px (You made the Main Posts column wider.)
Finally, Ctrl+F and search for #sidebar-wrapper {
Change the width from 220 px to 300 px (You made the Sidebar column wider.)
Save template

Unlock Blogger Page Elements

2009-08-09T18:40:00.001-07:00

Log In
Layout
Edit HTML
Download Full Template (Optional)
Check Expand Widget Templates
Ctrl+F and search for locked='true'
Change true to false
Repeat for Remaining Elements
Save Template

Chat Room

2009-07-01T00:00:00.000-07:00

How To Convert Popular Video Formats To DVD Format For Free

2009-06-05T17:36:00.000-07:00

AVI, FLV, HDMOV, MKV, MJPG, MPG, M2V, MP4, M4V, NSV, NUT, QT, MOV, RM, SMK, OGM, WMV, ASF, 3GP, 3G2,

What's the URL location of the music file?	(Click Here For Free Music)
Start playing as soon as the page loads?
Play continuously?
Background music only? (hides the controls)
How wide would you like the music player to be?	(in pixels)
How high would you like the music player to be?	(in pixels)
Position:
Choose a name for your music player:
Completed music code: Copy and paste the following code into your web site to finish.

Table Width (in pixels):
Cell Padding:
# of rows:
# of columns:
Table Border (in pixels):
Background Color:
Table Alignment:
Table Cell Alignment:
Table Cell Vertical Alignment:

Table Code: