Main Page Beginners Design Tips Get Traffic Earn Money Picks Codes

Are you a Successful Blogger?

Successful Blogging

  • Beginners can learn the basics about Blogging
  • Advanced Bloggers can learn how to take their blog up a notch.
  • Anyone can learn HOW TO GET MORE TRAFFIC
  • And more- Templates, Codes, and Tips etc.

What do you want to read about? Scroll down or check out our sidebar for topics.

We post at least daily so check back or subscribe to our newsletter.

Successful Blogging.com

Showing posts with label Design. Show all posts
Showing posts with label Design. Show all posts

Blogger Header

The header of your site is typically the first thing people see.What is across the top of your page is what people make judgements about what they are about to see and read. Research suggests that you only have 30 seconds to make a good impression when someone lands on your site.
  • If you use white text, make sure there is a background color in the header and/or headerimg to showcase the white text again if for some reason the image does not appear on the screen or the user has "show images" turned off. This will allow your white text to still be visible.
  • If the image has a main feature or element, position the text so it does not cover the main subject of the image.
  • Make sure the color of the text is easily seen by your visitors and does not clash with the header art colors. Fluorescent orange text on a lime green background is painful.

About the Header

Have a purpose and point.
A good header reflects the content of the site. The rest of the site has to meet expectations and live up to the header, so the header must reflect the content, purpose and intention of the site.
It should invite visitors to remain.
A good header is like the cover of a book or magazine. It should encourage people to stay and have a look around, read and look more, and find something of value. It is the teaser, the lead that grabs their attention and says "there is something worth exploring here."
It should blend in with the overall look.
Bold and dramatic headers lend themselves to boldly designed sites, whereas soft and pastel colored sites lend themselves to gentler graphic headers. A site dedicated to punk rock and grunge should have a header look punky and grungy. It is up to you, but think consistency.
Headers do not need to have pictures.
Not all headers must have pictures and graphics. Sometimes the words are more important, whether they are against a wash of color or a white background.
Cluttered headers are still cluttered.
Avoid cramming ads, navigation, text, scrolling news feeds, and the kitchen sink into your header. Simple is always better.

The average header is less than 200 pixels high, but headers range in height from very thin to a half page. Remember that the main reason people visit your site is its content, and the more they have to scroll down past your header to get to the content, the less interested they tend to be. Help lead them to the content with your header.
Think "Site Identity."
A header is part of the site's identify or "brand" and people like to know they are on the same site when they click a link to another page within that site. Consider your header or header art as your site's "brand identity".
(WordPress.org)

How to change your header in Blogger.

We will start with the easy method.
  • Find your page elements from your layouts tabl.
  • Click on header
  • Hit Edit

This is where you can upload an image, add or take away words, and add your Blog Description. The Blog Description will not always show up, but it's important for search engines.







Sometimes, your header element will be locked and will not let you add anything. No problem.
You'll need to go to the HTML link to change this.

Like every time you alter your html, be sure to download your template first.



Search for the following code ;
b:section class='header' id='header' maxwidgets='1'
Change maxwidgets='1' to 3.

Now look for , probably just below.
b:widget id='Header1' locked='true'


Change locked='true' to 'false'.
Save.
Go back to your elements page and try again.

Please note;
You widgets may or may not have had both of these going on. As long as in the end they look like my examples, you are fine.
Also, sometimes with templates not downloaded directly from Blogger, altering the header may not work because it will throw off the other elements. I would suggest that you contact the template designer for help. You can click at the link that they most likely left at the bottom of your template.



Color Chart

Updated color chart from Webmonkey.
There are so many blogger hacks out there that allow you to change the color of something,such as a gadget. To do so, you'll need to use what's called the hex code . Choose a color from the list below and look to its left to get the hex code. If we wanted our background to be red, for example, we'd type bgcolor="#FF0000". Try it out!




Hex Code Color
#FFFFFF
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#FFCCFF
#FFCCCC
#FFCC99
#FFCC66
#FFCC33
#FFCC00
#FF99FF
#FF99CC
#FF9999
#FF9966
#FF9933
#FF9900
#FF66FF
#FF66CC
#FF66CC
#FF6666
#FF6633
#FF6600
#FF33FF
#FF33CC
#FF3399
#FF3399
#FF3333
#FF3300
#FF00FF
#FF00CC
#FF0099
#FF0066
#FF0033
#FF0000

Hex Code Color
#66FFFF
#66FFCC
#66FF99
#66FF66
#66FF33
#66FF00
#66CCFF
#66CCCC
#66CC99
#66CC66
#66CC33
#66CC00
#6699FF
#6699CC
#669999
#669966
#669933
#669900
#6666FF
#6666CC
#666699
#666666
#666633
#666600
#6633FF
#6633CC
#663399
#663366
#663333
#663300
#6600FF
#6600CC
#660099
#660066
#660033
#660000
Hex Code Color
#CCFFFF
#CCFFCC
#CCFF99
#CCFF66
#CCFF33
#CCFF00
#CCCCFF
#CCCCCC
#CCCC99
#CCCC66
#CCCC33
#CCCC00
#CC99FF
#CC99CC
#CC9999
#CC9966
#CC9933
#CC9900
#CC66FF
#CC66CC
#CC6699
#CC6666
#CC6633
#CC6600
#CC33FF
#CC33CC
#CC3399
#CC3366
#CC3333
#CC3300
#CC00FF
#CC00CC
#CC0099
#CC0066
#CC0033
#CC0000

Hex Code Color
#33FFFF
#33FFCC
#33FF99
#33FF66
#33FF33
#33FF00
#33CCFF
#33CCCC
#33CC99
#33CC66
#33CC33
#33CC00
#3399FF
#3399CC
#339999
#339966
#339933
#339900
#3366FF
#3366CC
#336699
#336666
#336633
#336600
#3333FF
#3333CC
#333399
#333366
#333333
#333300
#3300FF
#3300CC
#330099
#330066
#330033
#330000
Hex Code Color
#99FFFF
#99FFCC
#99FF99
#99FF66
#99FF33
#99FF00
#99CCFF
#99CCCC
#99CC99
#99CC66
#99CC33
#99CC00
#9999FF
#9999CC
#999999
#999966
#999933
#999900
#9966FF
#9966CC
#996699
#996666
#996633
#996600
#9933FF
#9933CC
#993399
#993366
#993333
#993300
#9900FF
#9900CC
#990099
#990066
#990033
#990000

Hex Code Color
#00FFFF
#00FFCC
#00FF99
#00FF66
#00FF33
#00FF00
#00CCFF
#00CCCC
#00CC99
#00CC66
#00CC33
#00CC00
#0099FF
#0099CC
#009999
#009966
#009933
#009900
#0066FF
#0066CC
#006699
#006666
#006633
#006600
#0033FF
#0033CC
#003399
#003366
#003333
#003300
#0000FF
#0000CC
#000099
#000066
#000033
#000000



Which colors to use and their purpose

Colors are very influential on your site visitor's emotions. This gives them a subconscious cue on what to expect from your site. In designing your blog or website- here a some color ideas to keep in mind.

1.Black is used for a bold, sleek, dramatic, confident, sophisticated look.

2.White is used to portray purity, cleansing, and more neutral look. It is often used to portray a cool environment.

3.Gray is good for a sophisticated, contemporary, hi-tech look.

4. Red is energetic, passionate, powerful. Red is associated with energy, war, danger, strength, power, determination as well as passion, desire, and love. Red brings text and images to the foreground. Use it as an accent color to stimulate people to make quick decisions.

5. Blue is calm, melancholy, loving, the sky and water. Blue is often associated with depth and stability. It symbolizes trust, loyalty, wisdom, confidence, intelligence, faith, truth, and heaven. You can use blue to promote products and services related to cleanliness , air and sky, and water Use blue to suggest precision when promoting high-tech products. Blue is a masculine color Dark blue is associated with depth, expertise, and stability; it is a preferred color for corporate America.
Avoid using blue when promoting food and cooking, because blue suppresses appetite. When used together with warm colors like yellow or red, blue can create high-impact, vibrant designs.
Light blue is associated with health, healing, tranquility, understanding, and softness.
Dark blue represents knowledge, power, integrity, and seriousness.

6. Yellow is cheerful, happy, bright, the glowing like the sun.Yellow is often associated with food.
Shades of yellow are visually unappealing because they loose cheerfulness and become dingy.
Dull (dingy) yellow represents caution, decay, sickness, and jealousy.
Light yellow is associated with intellect, freshness, and joy.

7. Green combines blue and yellow. It is stable, calming, expansive, environmental like the trees, grass and shrubs. Green has strong emotional correspondence with safety. Dark green is also commonly associated with money. Use green to indicate safety when advertising drugs and medical products.
Dark green is associated with ambition, greed, and jealousy.
Yellow-green can indicate sickness, cowardice, discord, and jealousy.
Aqua is associated with emotional healing and protection.
Olive green is the traditional color of peace.

8. Purple combines blue and red. It can be energetic or calming.

9. Orange combines yellow and red. It is energetic.Orange represents enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement, and stimulation. Dark orange can mean deceit and distrust.
Red-orange corresponds to desire, sexual passion, pleasure, domination, aggression, and thirst for action.
10.Turquoise has more green than blue and is thus, a happy shade.

11. Peach has more yellow than red and is thus, calmer than orange.

12. Pink signifies romance, love, and friendship. It denotes feminine qualities and passiveness.

13.Brown suggests stability and denotes masculine qualities.

14. Gold evokes the feeling of prestige. The meaning of gold is wealth. Gold often symbolizes high quality.

The use of color

Color theory is a big big deal to graphic and website designers. It's a big deal to marketers and manufacturers. It's a big deal to consumers too.

It is all about color theory.

What is color theory?

Color Theory is a set of principles used to create harmonious color combinations. Color relationships can be visually represented with a color wheel .

Color Wheel

According to color theory, harmonious color combinations use any two colors opposite each other on the color wheel, any three colors equally spaced around the color wheel forming a triangle, or any four colors forming a rectangle .

The first color wheel was invented by Sir Isaac Newton. He split white sunlight into red, orange, yellow, green, cyan, and blue beams.

A century after Newton, Johann Wolfgang Goethe began studying psychological effect of colors. He noticed that blue gives a feeling of coolness and yellow has a warming effect. Goethe created a color wheel showing the psychological effect of each color.


12 part color wheel

A color circle, based on red, yellow and blue, is traditional in the field of art.


http://www.digthatcrazyfarout.com/color.html
http://www.physics.ohio-state.edu/~wilkins/color/216.html



Colors in the red area of the color spectrum are known as warm colors and include red, orange, and yellow. These warm colors evoke emotions ranging from feelings of warmth and comfort to feelings of anger and hostility.

Colors on the blue side of the spectrum are known as cool colors and include blue, purple, and green. These colors are often described as calm, but can also call to mind feelings of sadness or indifference.

It's important to recognize that individual colors have a bias towards cool or warm for color mixing. If you mix two warms together, you'll get a warm secondary color and, conversely, if you mix two cools together you'll get a cool secondary.

Things to consider in your blog design

Consider the last time you visited a really nice blog or website and why you liked it. You were probably drawn in by a nice graphic and pleasing feel. Everything worked together like magic. The colors matched, the white space worked, the fonts were related etc.

Remember how you felt when you landed on a really bad design? The chaos and congestion was probably over-whelming. The text was all the same size- too big. There was no focal point and there were too many ads.

Okay. So having said that, here are some things to consider when you plan your design.

Easy to Read

An easy to read layout allows the reader to first find the focal point and then direct his or her eyes to the secondary and lower level items
The primary focal point will most likely be the logo or branding that you use in your header. When someone lands on your page that is the first thing they see. This is what can make or break the success of your blog. If the header is really appealing the viewer will say "oh wow...this looks good..what else is here?". If you choose your advertising to be your primary focal point, you will cheapen your site and your readers will immediately know this.

The secondary focal point will be the title on your posts. If the title looks interesting, your visitor will keep reading. If it doesn't, the viewer will glance at one or two more and make their decision on whether to stay or move on. Therefore, the secondary focal point must be easily identifiable (bold, larger?) and must be memorable.

Then there are the extras that need to be interesting. This includes your widgets, links, etc. You don't want too many of these as they may become over-whelming. Especially ads.


Good Use of Color.
For a site to be successful, it must evoke a certain feeling for the visitor. Do you want to instill a feeling of energy or calmness? Hate or Love?
Color psychology is very important.

Colors in the red area of the color spectrum are known as warm colors and include red, orange, and yellow. These warm colors evoke emotions ranging from feelings of warmth and comfort to feelings of anger and hostility.

Colors on the blue side of the spectrum are known as cool colors and include blue, purple, and green. These colors are often described as calm, but can also call to mind feelings of sadness or indifference.

Not Overrun with Ads. Again, I bring this up, and with good reason.
Ads should be used in moderation. They should be subtle and blend well. Think about the last time you saw a website that was wall to wall ads. Did the site look credible? Or did it look like it was in business to rip you off?
Enough said.

Your posts go with the theme of your blog.
If your blog is about pets, don't post your personal diary about the date you went on last Saturday. First of all, nobody cares about your date. Really. Second of all, it makes you look less informed about the primary topic. Someone did a search and landed on your site for a reason. If you wanna stay in business, even if it is in blogging (which works for the best of us), give the reader what he or she wants.

Ease of Navigation. Usability is easy for the visitor.
This is the problem with archives. It lists everything according to the date it was posted. Google, the king of searches, should know better than to make this the default. This is why you need to add labels to your posts. Then you get categories. And, with categories you get navigation topics. See the point here?


Do you, the author, appear to know what you are blogging about?

Printing your posts

So you want to make it easy for people to print your post?
The easiest way to do this is to go to your layout tab and add an html gadget.

Copy and paste this code into your gadget.
You have now made a link to your printer.


Want to make things print friendly so not everything gets printed?
You'll need to go back to your html link in the layout tab.
Of course, you'll need to back up your template before you start in with the code.

Ok, so after you've backed it up,
copy and paste the following code into your head tag.



Anything that you do not want to print, needs to go inside of span tags. The tags look like this with the .. representing what's not getting printed. Images can go inside the tag as well.

Borders to your layout

Sometimes you just need to add a border to an element to distinguish it apart from the rest of your page. This is not hard to do.

Go to the html link from your layout tab.
Back up your template

Do a control+f (most browsers) for search.
We are looking for the word border.
You want to make sure that you are in the correct location- such as your sidebar.
You may need to keep hitting the next arrow until you find the right spot.

Your result may look something like this- border:1px solid

You can now add any or all three of the following;
border-width usually in px; 1px, 2px etc

border-style

dotted
solid
dashed
double
groove
ridge
inset
outset

border-color- insert your chosen the hex number

The end result may look like this border: 1px solid #f2f2f2;

Be sure to preview before you save.

Cool Color Chart

Color can be an important element in your layout.
When you alter your template, these color codes may come in handy.
Here is a really nice color chart from Javascriptkit

000000 000020 000040 000060 000080 0000a0 0000c0 0000ff
002000 002020 002040 002060 002080 0020a0 0020c0 0020ff
004000 004020 004040 004060 004080 0040a0 0040c0 0040ff
006000 006020 006040 006060 006080 0060a0 0060c0 0060ff
008000 008020 008040 008060 008080 0080a0 0080c0 0080ff
00a000 00a020 00a040 00a060 00a080 00a0a0 00a0c0 00a0ff
00c000 00c020 00c040 00c060 00c080 00c0a0 00c0c0 00c0ff
00ff00 00ff20 00ff40 00ff60 00ff80 00ffa0 00ffc0 00ffff

200000 200020 200040 200060 200080 2000a0 2000c0 2000ff
202000 202020 202040 202060 202080 2020a0 2020c0 2020ff
204000 204020 204040 204060 204080 2040a0 2040c0 2040ff
206000 206020 206040 206060 206080 2060a0 2060c0 2060ff
208000 208020 208040 208060 208080 2080a0 2080c0 2080ff
20a000 20a020 20a040 20a060 20a080 20a0a0 20a0c0 20a0ff
20c000 20c020 20c040 20c060 20c080 20c0a0 20c0c0 20c0ff
20ff00 20ff20 20ff40 20ff60 20ff80 20ffa0 20ffc0 20ffff

400000 400020 400040 400060 400080 4000a0 4000c0 4000ff
402000 402020 402040 402060 402080 4020a0 4020c0 4020ff
404000 404020 404040 404060 404080 4040a0 4040c0 4040ff
406000 406020 406040 406060 406080 4060a0 4060c0 4060ff
408000 408020 408040 408060 408080 4080a0 4080c0 4080ff
40a000 40a020 40a040 40a060 40a080 40a0a0 40a0c0 40a0ff
40c000 40c020 40c040 40c060 40c080 40c0a0 40c0c0 40c0ff
40ff00 40ff20 40ff40 40ff60 40ff80 40ffa0 40ffc0 40ffff

600000 600020 600040 600060 600080 6000a0 6000c0 6000ff
602000 602020 602040 602060 602080 6020a0 6020c0 6020ff
604000 604020 604040 604060 604080 6040a0 6040c0 6040ff
606000 606020 606040 606060 606080 6060a0 6060c0 6060ff
608000 608020 608040 608060 608080 6080a0 6080c0 6080ff
60a000 60a020 60a040 60a060 60a080 60a0a0 60a0c0 60a0ff
60c000 60c020 60c040 60c060 60c080 60c0a0 60c0c0 60c0ff
60ff00 60ff20 60ff40 60ff60 60ff80 60ffa0 60ffc0 60ffff

800000 800020 800040 800060 800080 8000a0 8000c0 8000ff
802000 802020 802040 802060 802080 8020a0 8020c0 8020ff
804000 804020 804040 804060 804080 8040a0 8040c0 8040ff
806000 806020 806040 806060 806080 8060a0 8060c0 8060ff
808000 808020 808040 808060 808080 8080a0 8080c0 8080ff
80a000 80a020 80a040 80a060 80a080 80a0a0 80a0c0 80a0ff
80c000 80c020 80c040 80c060 80c080 80c0a0 80c0c0 80c0ff
80ff00 80ff20 80ff40 80ff60 80ff80 80ffa0 80ffc0 80ffff

a00000 a00020 a00040 a00060 a00080 a000a0 a000c0 a000ff
a02000 a02020 a02040 a02060 a02080 a020a0 a020c0 a020ff
a04000 a04020 a04040 a04060 a04080 a040a0 a040c0 a040ff
a06000 a06020 a06040 a06060 a06080 a060a0 a060c0 a060ff
a08000 a08020 a08040 a08060 a08080 a080a0 a080c0 a080ff
a0a000 a0a020 a0a040 a0a060 a0a080 a0a0a0 a0a0c0 a0a0ff
a0c000 a0c020 a0c040 a0c060 a0c080 a0c0a0 a0c0c0 a0c0ff
a0ff00 a0ff20 a0ff40 a0ff60 a0ff80 a0ffa0 a0ffc0 a0ffff

c00000 c00020 c00040 c00060 c00080 c000a0 c000c0 c000ff
c02000 c02020 c02040 c02060 c02080 c020a0 c020c0 c020ff
c04000 c04020 c04040 c04060 c04080 c040a0 c040c0 c040ff
c06000 c06020 c06040 c06060 c06080 c060a0 c060c0 c060ff
c08000 c08020 c08040 c08060 c08080 c080a0 c080c0 c080ff
c0a000 c0a020 c0a040 c0a060 c0a080 c0a0a0 c0a0c0 c0a0ff
c0c000 c0c020 c0c040 c0c060 c0c080 c0c0a0 c0c0c0 c0c0ff
c0ff00 c0ff20 c0ff40 c0ff60 c0ff80 c0ffa0 c0ffc0 c0ffff

ff0000 ff0020 ff0040 ff0060 ff0080 ff00a0 ff00c0 ff00ff
ff2000 ff2020 ff2040 ff2060 ff2080 ff20a0 ff20c0 ff20ff
ff4000 ff4020 ff4040 ff4060 ff4080 ff40a0 ff40c0 ff40ff
ff6000 ff6020 ff6040 ff6060 ff6080 ff60a0 ff60c0 ff60ff
ff8000 ff8020 ff8040 ff8060 ff8080 ff80a0 ff80c0 ff80ff
ffa000 ffa020 ffa040 ffa060 ffa080 ffa0a0 ffa0c0 ffa0ff
ffc000 ffc020 ffc040 ffc060 ffc080 ffc0a0 ffc0c0 ffc0ff
ffff00 ffff20 ffff40 ffff60 ffff80 ffffa0 ffffc0 ffffff

The Meta Element

Meta tags are located in the head of your html code. The head element contains general information about a document.They are used by search engines to index your site based on your keywords and descriptions.

It is very important to use META Tags if you expect to be found in most search engines. META Tags are not the only thing search engines will look at when ranking your sites. Some search engines will ignore META Tags completely. Most search engines will also index your body text.

Meta elements provide information about a given webpage or blog most often to help search engines categorize them correctly. They are not visible to visitors but, they are important in getting them.

Search engine optimization (SEO), rely on meta data to correctly classify a web page . Search engine optimization can improve search engine ranking,and thus, more visitors .

To add meta tags, go to the html link from your layout tab. Back up your template. Search for meta by hitting control + f (most browsers) and enter meta in the box.
Copy and paste the code below. You will need to add a greater than sign before the meta aaaand the less than sign<> after the " at the end.

Here are some meta tags you would probably want to add to your site.

This meta element defines keywords for your page:

meta name="description" content="Your description should be no more than thirty words and include some of your keywords."

meta name="keywords" content="place keyword phrases, not single keywords, descriptive keyword phrases, place keyword phrase here"



If a description tag is not found on your page, the first words of your page copy could be shown in your listing. This is what is shown when someone does a search engine search and results pop up.


Other tags you might want to include to tell the
spiders and crawlers to index the page:


meta name="GOOGLEBOT" content="INDEX, FOLLOW"
meta name="ROBOTS" content="ALL"




Remove the label count number

So you've added the labels gadget in Blogger in Draft but those numbers next to the labels are bugging you. What do you do?

I have to tell you, I find those annoying myself.
This is an easy fix though.

  • Go to your HTML link in your layouts page.
  • This time you want to expand the widgets so click on it and make the magic check mark appear.

Once again we are going to do a search.

  • CMD + F in most browsers and search for

data:label.count

  • Highlight it and delete it.

  • Hit preview to make sure it worked.

  • Then Save.

How to add a color background to your sidebar

I'm going to make this easy on myself and assume that it is your sidebar that you want to add a background color to. Keep in mind that other elements can be changed just as easily.

What you'll need to do is go to your html link in your layout tab.
Back up your current template by hitting the Download Full Template link .

  • Click on the expand widget box if there is a check mark in it and make sure that a check box appears empty.
  • Do a search (command + F in most browsers) for #sidebar -wrapper

It'll look something like this;
#sidebar-wrapper {
margin:0;
padding: 4px 0 4px 8px;
font: bold 105% Arial, Sans-Serif;


White is #FFFFFF
Black is #000000
Red is #FF0000
as an example.

  • Simply add this code before the end bracket:
background: #FFFFFF
substituting your color choice for #FFFFFF

It should look something like this
#sidebar-wrapper {
margin:0;
padding: 4px 0 4px 8px;
font: bold 105% Arial, Sans-Serif;
background: #FFFFFF

Hit preview to see if it worked and if it did, then save it.
Otherwise, clear the changes and start over or move on.


Feed your recent comments!

You'll see on the top left of my page the is a spot with my most recent comments
This is a really easy feed for you to do for your blog site

First bring up a new tab in your browser window and display you blogsite.
You'll need to find your feed button or subscription link ( Subscribe to: Posts (Atom)) .
It is located on the bottom of the common blogger template Or, if you have an orange button, you can use that.

Right click and copy the link location.

Now, go to your layout tab and add a gadget .
You'll be adding a feed. It should look something like this;
http://thechocoholicsdiary.blogspot.com/feeds/posts/default
This would be a feed for your posts .
It is not a bad idea to run one of these to let visitors know what's new and entice them to stick around and read.

However, if you change the posts to comments making it look something like this
http://thechocoholicsdiary.blogspot.com/feeds/comments/default
(you've added what's red- not in red though).

Why use labels- they're a pain? 'Fake Site Pages'

I thought labels were a pain too when I first started out.
Then I was tipped off to their usefulness.

Personally, I think that listing the labels below the post is kind of useless. Especially if you've already read the post.

The best use for labels is their ability to categorize your posts. Why is this nice? See the tabs on the top of my blog? "Main Page" "Beginners" etc? Those are all from labels.
Now they appear as updated pages for my visitors.

The easiest way to do this is to start out organized.
Go to "Edit Posts" and make 4 or 5 labels that best suit your blog.
Add your posts to the best fitting label(s) categories.
Now, go to your main page and do a search on one of those labels.
What you'll get is an entire page of all of your posts in that category.

Here is where it gets nice....
Copy the address from the address bar for this search. It should look kind of like
http://kubrickspick.blogspot.com/search/label/Beginner%20Stuff.
Now go to your layout tab, add a page element for links.
Put your copied url in for the address and the label for the name.
Congratulations, you have created what looks like a webpage to your visitors.

An option to this would be to go to blogger in draft and add a gadget for labels. The downside to this gadget is that it lists the number of posts in each label which you must go in to your code to remove (not that hard to do- just do a search in your html for label and count and delete it- preview before you save!)

The difference between a labels gadget and the links is that label displays every label and links narrows things down. See "topics" in my side bar- that is the labels gadget at work. The tabs on top is the links at work.

Don't forget to add a link for your main page or landing page. When you make navigation easy, visitors are happy.

Add a Background Image

Have you been stumped about where to host an image that you'd like to use as a background or anything that is not a post or gadget? Here's s nice trick.

Upload the image to a post like you would normally do. Prior to saving the post check out it's html code. Locate your image in this code then copy and paste it to your clipboard. Now save the post as a draft in case you need to reference it later.

Now, return to your html link in the layout tab.
Do a search (control + F in most browsers) and locate
body {.....
Where you see background....probably with a color code- background: #FFF for example, change the #FFF (or whatever yours reads) to the location of the image that you just posted and copied to your clipboard.

Site Meter


Would you like to know how many hits you are getting and other details?

Site Meter offers a free basic package and a premium package starting at $6.95/mo.
Site Meter's comprehensive real time website tracking and counter tools give you instant access to vital information and data about your sites audience. With our detailed reporting you'll have a clear picture of who is visiting your site, how they found you, where they came from, what interests them and much more.


Site Meter will send you reports as well . The premium package is for sites wanting to track 4,000+ hits.

Site Meter tracks page views and visits. You may also have heard the term "hits". When someone comes to your site, they generate a "hit" for every piece of content that is sent to their computer. Viewing a single web site page would generate one hit for the page and one hit for every individual graphics file that was on the page. A single page could easily generate a dozen or more hits. When you are browsing a site, every time you follow a link, it is treated as a single "page view". Site Meter defines a "visit" as a series of page views by one person with no more than 30 minutes in between page views.


Site Meter

Bloggerbuster.com

This could be one of my most favorite blogger sites.
This site offers a plethora of information for any level of blogger.


The template design on this site was designed by the bloogerbuster.com site hostess Amanda.
A person could get lost for hours sifting through the design templates, coding tips and other goodies. If she doesn't know the answer, she will point you in the right direction.

Subscribe to her daily updates. She will send you e-mails with great information.

http://www.bloggerbuster.com/