How To Get 1 Million Hits!

Hi everyone! I just read all of your wonderful ideas about what kind of prize should be had for my 1 million visitors giveaway! I will let you know what I have chosen when the milestone approaches! While I was reading your comments, I came across a suggestion from one of my followers, aussiegold (thanks Phil!). He wanted me to write a post about blog promotion. So that's what I am going to do today!

1. You want people to visit your blog so it needs to be interactive in some way. You need to keep the information new and updated so people have a reason to keep coming back. Maybe ask them to comment. Post a giveaway (this is a great idea to try). Anything to get your name out! On this note, create your own button so people can share it on their blog!

2. Love what you do and it will show! It also helps if your blog/webpage is useful to others. When I first began blogging, I found many sites that were very useful. When I finally learned how to tweak my blog to be "just right" I wanted to share what I had learned with all of you! And it helps if you offer "free stuff", too!

3. It's all about public relations! So, respond to people who leave comments! Visit their blogs. Don't forget to leave your email or contact button somewhere on your blog. Encourage people to write to you, and write back to them. Try and develop relationships with your visitors.

4. Get your name out there. List your blog on blog circles, advertise your blog on other blogs (like Tina's ;) or advertise on much larger scales. My personal favourite: Trek Advertising!

5. Wait it out. I didn't have all the traffic to start with. It takes time! But with regular posting and following these tips, your blog will slowly be known in the blogosphere.

With these suggestions in mind, your site can reach 1 million visitors, too!

Get Your Blog Just Right!

Today I'm going to share with you some of my tips to make the most of your blog and create the best one possible!

Tip 1- All About the White!
Use a white middled background! This is a must if you upload a lot of pictures on your blog! You won't get that "white outline" around any pictures because it will blend in with your own background. Now I do love color myself and have seen some successful colored background blog middles. But if you are new to blogging, save yourself the trouble and use an easy white middled background. The easiest way to achieve this is by selecting Blogger's Minima template. For a tutorial on this, click here.

Tip 2- Keep it Clean and Simple!
No one likes clutter! When people come to your blog, they want to be able to see where to go. Put some thought into "organizing" your blog. Where will things go? Are your sidebar items balanced visually? Put a horizontal menu navigation bar at the top of your blog to help your visitors navigate your blog. Check out a tutorial here. Make sidebar titles for all your "sections" in your blog. Oh, and don't have too much "stuff" on your blog! The more gadgets you have, the slower your loading page time will be. You can limit your posts per page to make your page load quicker!

Tip 3 - It's Okay to be YOUnique!
Your blog should reflect who you are! It's your home on the web. So make it yours! Make it stand out! If you're not sure what you like, check out other blogs that inspire you. Use them as an aid to create something that is you! Select a title. Put some effort into your header (at the top of your page). This is the first thing anyone sees when they visit you. Select a color palette and a theme. Your blog is your masterpiece! So beeee creative!

I hope these tips have answered some of the questions you have been asking! I'm off to create some more goodies :)

How to Get Rid of "Showing Posts with Label"
If you've read about one of the most secret tricks in the blogging community, and you've used labels to add pages in your blog, you may notice that you are shown an ugly "Showing Posts with Label ______" at the top of every page. Well fortunately enough, this is one of the easiest things to get rid of!

They say a picture is worth a thousand words...And in this case, it is! All you have to do for this blog secret is to follow the instructions in the picture below (click on thumbnail to view large version). That's it! Plus, it will save me from making another scrolly text box with html. Enjoy!

How to Add Pages In Your Blog
Ever wonder how people add pages in their blog? You know, the little menu buttons that go across the top of their blog like I have? Well, wait no longer, one of the biggest blogging secrets is revealed to you today!

A navigation menu bar at the top of your blog is really easy for you to do. Just follow these simple steps and you'll be all set.

Htmlize!
The first thing we need to do is insert the html code that will allow us to create a space in blogger for our new nav bar. This is a 2 step process. To do this, click on Layout, then Edit Html. As always, save a copy of your template before you edit it!

Step 1: Copy and paste this code directly under your "Header" Section:

#newnavbar ul li{ list-style-type: none; display:inline; margin:0px; padding:10px; border:0px solid; }

Step 2: Find this section in your html, and change showaddelement='no'to 'yes'. (Hint, Press Control+F and type in "cross" to find this part).

<div id="'crosscol-wrapper'" style="'text-align:center'"><b:section class="'crosscol'" id="'crosscol'" showaddelement="'yes'">

You can follow these steps in a handy visual I have created for you.

Linkize!
The next thing you need to do is to link your pages together. To do this, click on Layout, and then Page Elements. You should see that you now have a new "Add a Gadget" element under your header and above your blog posts. This is where the magic happens! Click on your new Add a Gadget button, and choose the Html/Javascript option. Next copy the following html and paste it into your html/javascript option.

<div id="newnavbar"><ul><li><a href="URLOFFIRSTPAGE"><img src="URLOFFIRSTPAGEIMAGE" /></a></li><li><a href="URLOFSECONDPAGE"><img src="URLOFSECONDPAGEIMAGE" /></a></li><li><a href="URLOFTHIRDPAGE"><img src="URLOFTHIRDPAGEIMAGE" /></a></li><li><a href="URLOFFOURTHPAGE"><img src="URLOFFOURTHPAGEIMAGE" /></a></li><li><a href="URLOFFIFTHPAGE"><img src="URLOFFIFTHPAGEIMAGE" /></a></li><li><a href="mailto:YOUREMAILHEREIFYOUWANTANEMAILBUTTON"><img src="URLOFEMAILIMAGEORERASETHEWHOLEEMAILOPTIONIFYOUDONTWANTIT" /></a></li></ul></div>

Here's another visual to help keep you on track.

Customize!
Create your Menu Buttons
Here's what you need to do to customize the above html code. First, you need to create images of your menu buttons like these ones. Make sure they aren't too large (right-click and click on properties to see my image size). Next, as always, you need to host your images on the internet. Make note of the URL of the image. It will be placed in the img src "URLOFFIRSTPAGEIMAGE" location.

Use your Own Labels
At the end of every post, blogger gives you a choice to add "labels for this post". This is blogger's way of organizing your posts into categories. All you have to do is label your posts in the way you want your pages to appear. For example, all my "Giveaway" posts have the label "giveaway". All my "Headers" posts have the label "headers". All you have to do is to record the URL for that specific label of posts and place it under the "a hef="URLOFFIRSTPAGE" html code above.

Another Example
I want a menu button for my Giveaways. I have labelled my giveaway posts with "Giveaway" and when I click on the label "Giveaway" (found where my blog categories are in the left sidebar), I am given this URL: http://tututina.blogspot.com/search/label/giveaways. I will then use that URL to replace the a href="URLOFFIRSTPAGE" in the html I've given to you. Following that URL, I want to add my giveaway button that I've created and change img src "URLOFFIRSTPAGEIMAGE" to img src "http://tututina.com/images/blogmenugiveaways.jpg". I would do that for each menu item I'd like to add! That's it! It seems like a lot of steps but once you have the basic idea, you can turn your blog into a full functioning website (for free!)

*If you rather not connect your menu with labels, you can always connect them with other websites you've made, including another blog URL that is devoted to one topic only (ie-Backgrounds).
**The html I've provided you with has room for 5 menu buttons plus one email button. If you want to add more or less, simply copy more or erase some to have less.
***Don't forget to adjust the spacing (padding) of your menu items if you find they are too close together or too far apart - I've shown you how to do this in the diagrams above. Enjoy!

How to Delete Blogger's Nav Bar
Here's one of the easiest things that you can do to make your blogs look more professional! We have all seen blogger's Nav Bar at the top of our blogs. In case you aren't too sure what that is, refresh yourself by looking at one here:

There are some advantages for having a Nav Bar on your blog. You can search for other blogs, and you can sign into your blog to edit it. But, for the most part, the colours don't match your blogs and it can be an eyesore! Getting rid of it is so simple! Just go to Layout, then Edit Html. Near the top of your html, between "Blogger Template Style" and "Variable Definitions", paste this code:

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

Click Save and it will disappear! Check out the visual for more help (click on the thumbnail to see large version).

Oh, and don't forget you'll have to sign into blogger the old fashioned way after you delete your Nav Bar. Just go to http://www.blogger.com/. Enjoy!

How to Add a Favicon on Your Blog
This is my newest and favourite blog trick! Check out my new favicon! A favicon stands for the "favourite icon" that represents your site. It can be found in the address (URL) bar and beside your blog title on an open page. The best thing is, it truly is SO EASY to do!

1. Design it!
Favicons are 16 x 16 pixels. So be sure to design one that has square proportions so it can easily be resized if you don't design it to be that small. You can use pictures, graphics, symbols or anything that represents your site. Remember, you want to brand your blog, so stick with the same colour schemes that are in your blog!

2. Convert it!
In order to appear in the URL or title page area, your favicon needs to be saved as a .ico file. Don't panic! Check out this site: http://www.favicon.cc/ ! You can upload your designs (and it resizes them!!), or create your own from scratch. It also allows you to make the background of your favicons transparent (so you don't see any white around the image), AND it shows a live preview of what it would look like in your browser! Once you are finished, it saves your image as a .ico file. It's great!

3. Host it!
As always, you need to have a webspace that will host your .ico file. Once you have uploaded it to your provider, be sure to copy the URL of it!

4. Blog it!
You're almost all finished! To put your favicon on blogger, all you have to do is go into Layout then Edit HTML. Underneath the tag (it's a few lines down from the top) copy this code:

<link href="http://YOURFAVICONLOCATION.ico" rel="shortcut icon"/><link href="http://YOURFAVICONLOCATION.ico" rel="icon"/>

and paste it, making sure to change YOURFAVICONLOCATION to yours. Click Save and congratulations, you've just created your very own favicon! To see how to add the html code into Blogger, click the thumbnail below for a larger view.

To help you get started I have made a blue flower favicon just for you! Simply paste the entire code in the box underneath your tag!

<link href="http://www.tututina.com/blueflowersamplefavicon.ico" rel="shortcut icon"/><link href="http://www.tututina.com/blueflowersamplefavicon.ico" rel="icon"/>

The Blog Fairy Visits VivaPinay
VivaPinay wished she had a custom header, so The Blog Fairy granted her wish! Below you'll find two custom made headers just for you! But wait, there's more. I've also made you a matching button. And there's also a template (blank) one for anyone who wants to use it.

Your headers
Click on the thumbnails to view full picture size

http://www.tututina.com/images/blogfairyheaderedit.jpg

http://www.tututina.com/images/blogfairyheaderedit2.jpg

Your button (and blank one for everyone)

<img src="http://www.tututina.com/images/blogfairygreenbuttonedit.jpg" /> <br/> <textarea rows="2" cols="15" style="text-align:left"><a border="0" href="http://www.vivapinay.blogspot.com" target="_blank"><img src="http://www.tututina.com/images/blogfairygreenbuttonedit.jpg" /></a>

How to Put a Custom Header on your Blog
Adding your own header is so easy with blogger! All you have to do is under Layout, click on Page Elements, and your header goes in the first bar directly under Navbar. Click on Edit. Next, you have two options:
1. Choose an image that is already saved on your computer (you can right-click the headers and save them).
2. Use the html provided and enter it where it says "From the Web" for your image. I recommend this option since re-saving tends to lose the picture quality.
Finally, click the "Instead of title and description" button for your image placement and click Save! You'll have a great looking header to match your great looking blogs!

How to Make Your Own Signature
Here's something so easy that everyone can do! If you noticed, I've put my own custom signature on the bottom of each of my posts and it looks like this: !!! What a great way to make your blog more personal! It's so easy to do, and I want to share it with you! The first step, as always, is to create the image you'd like. Keep in mind it shouldn't be overly huge. Mine is 81 x 32 pixels (Hey, if you're not sure about sizes, here's a neat trick for you. Find a size of an image you like on someone else's blog. Right-click their picture, click on properties. The properties will tell you the dimensions of their picture!) Then, as always, you need to upload your picture on an image-hosting webspace, and copy your picture URL. Finally, in blogger, go under Settings, then Formatting, then scroll down to the bottom of the page and in the Post Template Box, copy and paste this code inside it:

<br /><p><br /><img style="border:0;" align="left" src="http://SIGNATURELOCATION.jpg" /><br /></p><br />

Simply change SIGNATURELOCATION to your signature url! If you want your signature on the left side, keep the align="left". If you want it on the right side, type align="right". Click save and you'll have your own custom signature on every post!

How to Add Line Dividers Between Posts
Hello everyone! Things have been pretty busy around here but here's a neat blogging secret for you. If you've ever wanted to spruce up your posts, how about putting cute line dividers (like this) between them?

Here's how to do it:

1. Get Crafty!
Create a line divider that compliments your site. When you make yours, be sure it fits the width of your blog post section. The standard width for Blogger's Minima template is 410px (check yours by looking under the # main-wrapper { width html code) . Don't make yours longer than that! I normally make mine 400px for width, and anywhere from 14-30px for height (depending how thick you want your lines). Once you've created one you like, you need to upload your line divider to an image hosting website (your own website, photobucket, etc). Copy the image URL.

2. Get Geeky!
The next step is to log into your blogger account. You're going to be editing your HTML in the Layout section. As always, save a copy of your template before you make any changes! To insert your post divider, find this section in your html code:

.post {
margin: .5em 0 1.5em
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}

Once you've located the right spot, replace the above code with this:

.post {
background: url(http://POSTDIVIDERLOCATION.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 3.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}

All you have to do is use your post divider URL and replace it with http://POSTDIVIDERLOCATION.jpg and voila, you've got your own post divider!

More Geeky Notes
You can customize your own spacing!
*The 3.5em for margin is the distance between your last post and your new post. Mine is 3.5em, but you can have less distance (make the number smaller) or more distance (make the number bigger). Play around with it!
**The 1.5em for padding-bottom is the distance your post divider is with the end of your post. Mine is 1.5em. Again, don't be afraid to play around with it!

How to Add a Free Counter
If you've ever wanted to know how many people visit your site and how to post that on your blog, let me share with you an easy and free tool that I use. It's called Amazing Counters, and it is so easy to do! They've got tons of number styles for you to choose from. We love this counter (Pencil Handwriting Big): . All you have to do is sign up for your free account, personalize your settings, choose the ad that will be displayed underneath your counter and you'll get the html code for you to insert on your Add a Gadget feature in blogger. It really is that easy!

How to Make Your Own Button
This is one of my favourite and most exciting blog secrets to share! You've all seen those fancy buttons with the html code underneath them, right? Well, here's how to make your own!

Design Your Button
The first thing you need to do is find an image for your button. Pick an image that represents your site. You can purchase your own images for cheap on royalty free stock image sites like StockXPert. Alternatively, you can just use text for your button if you'd like! Next, use a photo editing program to personalize your picture. If you don't have a photoediting program, here's one of my secrets for you! If you have a Facebook account, get an application called Picnik (or if you don't have a FB account you can go to their website). Picnik allows you to edit your pictures, resize them and add font to them for free! If you're using this program, you can easily resize your picture to a blogger sized one with a built in resize tool they have. If not, I usually make my buttons 150 x 150 pixels. When you're finished with your picture, save it as a .jpg and it should look something like this:

Share it With Html
Once your button is created, it's time to add the html code underneath. Log into your blogger account, click on Layout, then Page Elements, Add a Gadget, then the Html/Javascript option. Copy and paste this code:

<img src="http://yourphotolocationhere.jpg" /> <br/> <textarea rows="2" cols="15" style="text-align:left"><a border="0" href="http://www.yourblogname.com" target="_blank"><img src="http://yourphotolocationhere.jpg" /></a>

Your picture needs to be hosted somewhere on the internet. So for the yourphotolocationhere, enter the URL of your picture. If you don't have a web hosting site, here's a little trick for you. You can use blogger's hosting service. Go to Layout, Page Elements, then Add a Gadget at the bottom of the page. Choose the Picture option. Upload your picture onto blogger. Once your picture is there, visit your blog and right-click your picture. Click on Properties. Copy the Address (URL) of the picture. And you can paste that address for yourphotolocationhere.

Congratulations, you just made your own button to share!

How to Create a 3 Column Blog
You might notice while searching for your free backgrounds that some are sorted into two categories: 2 column and 3 column. Right now, your current Minima template on blogger only has 2 columns (you only have one posting section and one sidebar). But when you look at some of the top blogging sites in blogland, you will see most have 3 separate columns (one for posting and two sidebars). Here's how to create a 3 column blog! There are quite a few steps, but the end result is worth it!

1. Sign into blogger and click on Template then Edit Html (before editing you should always save a copy of your template by clicking on Download Full Template).

2. Navigate through the HTML code (you can press Ctrl+ F with keywords) until you find this section:

#sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

3. Highlight this code in your HTML, copy it (Ctrl +C) and paste it (Ctrl + V) directly underneath where you copied it from.

4. From the code you just pasted, change the words that are in blue. Change sidebar-wrapper to left-sidebar-wrapper, and right to left. Your code should end up looking like this:

#sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}

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

5. Next, scroll down until you see in the Footer section of the code:

<takethisoutdiv id="'main-wrapper'">

6. Paste this code immediately before the one you found above and remove takethisout:

<takethisoutdiv id='left-sidebar-wrapper'>

7. Find this section in your html:

/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

8. Change the value in blue from 660px to 900px.

9. Find this section in your html and add the code you see in blue to it:

#main-wrapper { width: 410px; float: left; margin-left: 20px; 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 */ }

10. That's it! Click Save. And you should see your template has changed to 3 columns.

How To Get Your Blog Just Right!
Hello fellow bloggers! I've been introduced to the world of blogging and Html a little while back and wanted to share with you all a series of posts dedicated to learning the tips and tricks of the blogging community!

It isn't easy starting off in this world called blogger. It takes much time to learn everything you can do! Along the way I've found plenty of resources that I want to share with all of you. This post is dedicated to one of the most important things: your blog design!

All About Backgrounds
A background is one of the first things a visitor sees. It should sum up what your site is all about! There's tons of blog backgrounds out there that are totally free for you to use! Most of the blog backgrounds requires your template to be on Minima.

To change your template to Minima, sign into Blogger, click on Layout, then Pick New Template. Pick the first thumbnail created by Douglas Bowman. Choose the first Minima option. It should look like this:

O Minima
O Minima Dark
O Minima Blue
O Minima Orchard

Get Free Backgrounds
Next, you are ready to start looking for backgrounds! These are my favourite sites (I've tested them all out) to find top quality, free backgrounds:

Shabby Blogs has one of the best crafted and nicest looking blogs! They feature white middles, perfect if you upload lots of pictures on your blog. Our blog background comes from this site! Here's a sample or two!

The Cutest Blog on the Block is one of the most popular blogging sites for free backgrounds. They've got tons and tons of pages! Check out some of the designs.

Scrap-e-blog has tons of wonderful, scrapbook inspired blogs! Take a peek at some of them!

Simply Chic also has tons of cute blogs! You will need to edit your HTML code in your actual template to use her blog backgrounds (don't worry she explains how to do this on her site), but they are definitely worth a look!

Change your Background
Finally, the last thing you need to know about backgrounds is how to change yours! It's simple! Most of these sites will give you the Html code to put onto blogger. First, copy the Html code (Ctrl + C, or highlight the code and right-click and press copy). Second, navigate on blogger by clicking on:
Layout, then Page Elements, then Add a Gadget, then the Html/Javascript option. Finally, just paste the codes (Ctrl + V, or right-click and press paste) from the following websites into the box, click Save and voila, instant prettiness!