Blogger Tutorials by Tapity1

1. Starting a Blog
2. Basic Settings
3. Adding Authors and Admins
4. Headers
5. Signatures
6. Backgrounds
7. Sidebars
8. Making a HTML Banner
9. Blogger Templates
10. Artisteer
11. How to get rid of the blogger Navbar
12. How to get rid of borders
13. How to add any cute font to your blog
14. How to replace .blogspot with .tk
15. How to make your OWN Background
16. How to post HTML without converting it
17. Making your blog private
18.How to change “posted by” at the bottom of your blog
19. How to make a marquee/scrolling banner
20. Bibliography

1
 Blogger Tutorials by Tapity1
Starting a Blog
Hey Everyone! Starting a blog is super easy. Just follower these simple instructions:

1. Firstly, go to blogger.com and make an account (Click the big orange “Get
Started” button. To do this you must have an email. If you don’t already have
one then you can make a Gmail account at
https://www.google.com/accounts/ServiceLogin?service=mail&passive=true&rm
=false&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F%3Fui%3Dhtml%26
zy%3Dl&bsv=1eic6yu9oa4y3&ss=1&scc=1&ltmpl=default&ltmplcache=2&hl=en
(Click “ Create an Account”)
Fill in the account details.
2. A message will be sent to your email where you will have to activate it.
3. Log in to your blogger account and you will see the dashboard. Here you can
see all of the blogs that you are an author or admin on.
4. You can change your profile (Your blogger ID) and add pictures and details by
clicking on any of the buttons next to your profile picture (on the left).
5. To begin making your blog click on “Create a blog” found on your dashboard.
6. Fill in the details that follow. Remember: *Templates can be changed later if
need be*. After filling out everything, click “start blogging.”
7. You now have a blog!

Basic Settings
1. If you click on the Settings tab you can edit your blog settings. Run through all of
the different settings (Basic, Publishing, Formatting etc.) one by one.

2. The posting tab will enable you to post events and news on your blog. Get to
know all of the post buttons before making a post. You can also create different
pages for your blog. To put a post onto your blog click the “Publish Post” button.
You can also save and preview your post before you publish it.
You can come back and edit your posts with the edit posts tab.

3. Experiment and look at the Monetize (Ads) and Stats (Views/Traffic) tabs.

4. Click on the Design tab. You can edit and add pictures, HTML codes, Games
(etc.) to your sidebars by clicking on “Add a gadget”. There are lots of different

2
 Blogger Tutorials by Tapity1
gadget options such as: Pages, Feed, and Logo (etc.). Each gadget has a
description underneath telling you what they are.

5. You can add a picture for the header by clicking on the edit link (on the header
box xD)
6. You can also change the blogger navbar look as well! It’s super simple and easy.
7. Go to the new “template designer” tab and you can change and select basic
backgrounds, templates, fonts, colours, sidebar styles, footers etc. Play around
with this simple designer to suite your liking!  Later in this guide I will explain how
to install cool backgrounds to your blog.

3
 Blogger Tutorials by Tapity1
Adding Authors and Admin
To access your Authors and Admins go to the “settings” tab and
then click “permissions”. Here you can view all of your current blog
writers.
You can also select who you would like to view your blog: anybody,
only people I choose and only blog authors.

To add an author you will need the person’s email address. Click
“Add Authors” and type in the email of the person you want to be
an author. When you click “Invite” an email will automatically be
sent to the person. To become an author they have to click on the
link in the email and fill in some details. *Authors are only able to
post and can stop being an author at any time.*
You can also make your authors Admins in this section. An admin is
able to do all of the things that you can do.

Headers
Headers tell people what your blog is about and what its name is.

To add a header to your blog go to the “Design” tab (Page Elements)

and click the edit link next to the header block. If the header is too big
then you can shrink it to size. Headers can be made and edited with
programs like Paint.net and Gimp. Paint.net is the program that I use.
There are lots of different effects for both Paint.net and PowerPoint so look
around and experiment! xD Here is an example Header:

4
 Blogger Tutorials by Tapity1

On your header you will probably want a png (Transparent document) of

your Chobot. You can do this by going onto Chobots and loading your
playercard. You must put on a white background. Next, take a screen
picture by pressing the PrtSc button (Print Screen). This button will take a
picture of your whole screen. Next, paste your picture (press Ctrl + v) on
the Paint program. You can crop the picture in paint using the dotted
square or star button. Crop the picture until it contains just your Chobot
and the white playercard background. Lastly, save the picture in your
documents. I advise you to play around with Paint and get to know the
program before use.

5
 Blogger Tutorials by Tapity1
Now open up a Paint.net, Gimp, Powerpoint, Photoshop (etc.) and make
the picture background transparent.
For PowerPoint you need to paste and click on the picture. Then go to
“Format” and click on “Recolor”. Next, select “Set transparent color” and
click on the white background of your picture. You now have a
transparent picture!

Signatures
1. Customize and create a unique signature to use after every post.
Here’s a custom signature that I’ve made:

2. After you’ve created your signature you need to upload it (:

Save the image as a PNG image, then upload it to TinyPic or Photobucket.
3. Now sign into your Blogger account, go to your blog Dashboard > Settings >
Formatting then scroll down to Post Template.
Paste the HTML code from TinyPic/Photobucket into this section.

Save! (: Now every time you go to post something your signature will
automatically appear in your posts!

Backgrounds
Here are a few websites that contain great backgrounds!

http://thecutestblogontheblock.com/
http://scrap-e-blog.blogspot.com/
http://hotbliggityblog.com/

6
 Blogger Tutorials by Tapity1
http://cute-backgrounds.net/music-
backgrounds.php
The Blogger Template Designer also has some cool backgrounds.

To install a background you need to copy its HTML code and paste it into a HTML
gadget (Click add a gadget  Sidebar (s) in the Design > Page Elements section.

Sidebars
Your sidebars are the bars or columns at the sides of your blog (posts). You can add
cool things to your sidebars by going to the design section and selecting “Add a
gadget”. If you look around you can find lots of cool gadgets to put on your blog. All
you have to do is copy the HTML for each gadget (Ctrl + C) and paste it into a blank
HTML gadget (Ctrl + V).

Some of my favourites are:

http://www.freeflashtoys.com/?full-page-
pets (Page pets, Glitter text etc.)

http://blogamation.com/ (Cool Animated

items/people)

http://thecutestblogontheblock.com/free-
extras/extras.html (Blog Dividers and Sidebar headers)

7
 Blogger Tutorials by Tapity1
http://thecutestblogontheblock.com/free/fr
ee-backgrounds.html?section=3 (Banners!)
http://thecutestblogontheblock.com/free-
extras/buttons.html (Cool Buttons and Extras)

Making a HTML Banner

1. Firstly you need to make the banner. Look over the Header and Signature
sections for some tips on how to take pictures and edit them.
Here is one that I made earlier:

2. Secondly, upload your banner to tinypic.com/

3. Leave this page open and open an editing program such as WordPad or
Microsoft Word. Copy the following HTML Code (Ctrl + C):
<div align="center"><a href="WebsiteLink" target="_blank"><img
alt="WebsiteName" src="PictureLink" /></a> </div><div
align="center"><form><textarea rows="3"><a href="WebsiteLink"><img

8
 Blogger Tutorials by Tapity1
alt="WebsiteName" src="PictureLink" border="0"
/></a></textarea></form></div>

And paste it into your document.

Now look at the following words:
“WebsiteLink”
“WebsiteName”
“PictureLink”
Each of these appears twice in the HTML code.
4. Replace “WebsiteLink” with the link to your website (Example:
http://tapity1.blogspot.com/) Remember: *Include the exact link.*
Replace “WebsiteName” with whatever you want people to see when they scroll
over your banner (The name of your website).

5. Now go back to the tinypic tab and copy (Ctrl + C) the direct link to your
banner. Replace the “PictureLink” (s) in your HTML code with this link.
6. Copy the completed HTML code (The one you just edited) and paste (Ctrl + V) it
into a gadget on your sidebar (Log into blogger account > Design > Add a
gadget).
7. Save and you now have a HTML banner!

Blogger Templates:

9
 Blogger Tutorials by Tapity1
You can edit your blogger templates with the newly installed “Template Designer”
blogger program. You can find this in the design tab. Here you can change your
template design. There are some basic designs in the template section which you can
choose from. These templates can be adjusted to your preferred width when you click
on the “Adjust widths” bar. Also, you can change the colouring and fonts (etc.) with the
“Advanced” tab.

To get some more complex templates visit these websites:

http://www.bloggerstyles.com/
http://btemplates.com/
http://www.ourblogtemplates.com/
http://chicablogger.com/category/blogger-templates/
http://all-blogspot-templates.blogspot.com/search/label/2columns
http://cute-backgrounds.net/music-backgrounds.php
http://www.pyzam.com/bloggertemplates

To apply a template to your blog you will need to copy the HTML code that comes with
it and put it into a HTML gadget.

Click save and you have a brand new template!

10
 Blogger Tutorials by Tapity1

Artisteer
Artisteer is a really great program that can be used to make custom templates for your
blog! It is really simple and easy to use. Just go to
http://www.artisteer.com/?p=downloads and download the Artisteer trial version. The
trial version puts a “trial” watermark on your template when you put it onto your blog.
Also, you cannot save your templates with the trial version. To get full privileges (No
watermark etc.) you have to buy the Standard or Home and Academic edition of
Artisteer (http://www.artisteer.com/?p=purchase ). With an upgraded version of
Artisteer you have to save your template as an artx. File.

Once you have created a blog template with artisteer you can put it onto your blog by
selecting “Publish” > “Publish to Blogger.com”. Then put in the username and password
of your blogger account and then select your blog. DON’T WORRY, Artisteer will not
hack your blogger account.

And Ta Da! You now have a brand new blog template!

How to get rid of the blogger navbar

The blogger navbar is the coloured bar at the top of your blog that allows you to
access your account. To remove it follow these instructions:

11
 Blogger Tutorials by Tapity1
1. Firstly, go to Dashboard  Layout  Edit HTML
Now click on the Ctrl and f buttons (At the SAME time) to open up a search box.
In the search box put: /* Variable definitions
After you’ve found it, paste this right above /* Variable definitions:
.navbar {display:none;}

Preview and save and you now have no navbar!

Unfortunately this means that you can no longer access your dashboard from your
blog. Instead, you will have to log in if you want to change your blog after saving and
viewing it.

Removing Borders
This trick will help you to eliminate all of the borders on your blog.

Firstly, you will need to log in. Then go to your Dashboard, Design and then Edit HTML.
Hit CTRL + F (Together) to bring up a search box. Search for the words: border:
Now, keep hitting next and every time you see the words:

border:1px replace them with border:0px

After you’ve done all of this you will then need to search for this: border-bottom:
Once again, every time you see the words:

12
 Blogger Tutorials by Tapity1
border-bottom:1px replace them with border-bottom:0px

It’s as simple as that, though it may take a long time.

I got the tutorial on how to do this at http://kevinandamanda.com/

The link to the tutorial is here:

http://www.kevinandamanda.com/whatsnew/tutorials/how-to-use-a-cute-font-for-
your-blogger-post-titles.html

It takes a lot of time but the outcome is great.

Some sites with really good free downloadable are:

http://www.kevinandamanda.com/fonts/
(Kevin and Amanda’s free fonts!)

http://www.1001freefonts.com/ (1001 free

downloadable fonts!)

http://www.urbanfonts.com/ (An assortment of

different font styles that you can choose and select from)

http://www.fontstock.net/
If you are using your own custom fonts or fonts from websites other than these,
check to make sure that the file is a TrueType Font file.

Blogger recently added some new fonts to their selection. Go to Design >
Template Designer > Advanced > Page Text and scroll through the long list of
new fonts to find one that suites you and your blog.

How to replace “.blogspot.com” with “.tk”

Replacing .blogspot.com makes it easy for people to track down your blog. It just
shortens your blog link. To replace “.blogspot.com” with “.tk” go to

13
 Blogger Tutorials by Tapity1
http://www.dot.tk/en/index.html?lang=en and type in your blog address (Ex:
http://tapity1.blogspot.com/)

Click continue; fill out a few boxes and ta da! You now have a .tk blog address.

Here to make your OWN background

There are two different ways to make your OWN background. I am going to show both
of them to you.

#1: First of all you have to make a template. Open up a picture editing program
(Photoshop, Paint.net or even PowerPoint). Then select or create a picture which you
would like to use as a blog background. *You have to make sure that the image you
make is at least 1800x1600, otherwise this will not work.*

This was the picture that I used:

Next, save your picture/background and go to Design > Template Designer >
Background and click on the picture of your current background. Next, click on the
button at the top of the tab which says upload image.

14
 Blogger Tutorials by Tapity1

You will come to a page that looks like this:

Browse and select your customized background image. Click done and ta da!

Here is what your blog may look like when the image is uploaded:

15
 Blogger Tutorials by Tapity1

You now have a cool customized blog background! 

#2: I found a different tutorial on how to make your own background at this link:
http://thecutestblogontheblock.com/blog-secrets/144-how-to-make-your-own-
background.html

It takes a lot more work but I’m sure it is worth it. Personally I like to use the first tutorial
but it is really up to you.

How to post HTML without converting it:

If you want to post HTML without converting it then click on the “Post Options” button
below your post and then click on the button which says “Convert HTML Literally”. There
you have it, HTML that has not been converted!

16
 Blogger Tutorials by Tapity1
How to make your blog private
To make your blog private simply go to Settings  Permissions and below blog readers
click the button which says “Only people I choose” or “Only Blog Authors”. Your blog is
now private and can only be viewed by certain people!

How to make a marquee/Scrolling Banner

These are really easy to make. There are lots of different types of marquees that you
can make. You can find different HTML codes for marquees on the web. Just google
“Marquee” and see what you can find!

Here are three different types of scrolling marquee:

<marquee behavior="scroll" direction="left"><img src="Paste Picture Link Here

"/></marquee>

<marquee behavior="slide" direction="right"><img src="Paste Picture Link Here

"/></marquee>

<marquee behavior="alternate" direction="up"><img src="Paste Picture Link Here

"/></marquee>

Here are the directions to make a marquee/Scrolling Banner:

1. Make the text/image that you want to scroll across your blog. *You usually want
to make it a PNG file because it looks better.*
I made this simple one with paint.net:

17
 Blogger Tutorials by Tapity1

Now go to tinypic.com/ and upload your image. Copy the Direct Link and paste
it into a word/wordpad (etc.) document. Now leave that and copy (Ctrl + C)
one of the HTML codes above (or your own). I’m going to use the 3rd one.

Go to your blog and then go to Design  Add a Gadget  HTML/Javascript.

Paste the code into the gadget and then go back to the document with your
image link in it. Copy the link again and go back to the Gadget box.
Replace the “Paste Picture Link Here” with the link you just copied.

Then click done. Ta da! 

How to change the “Posted by” at the bottom

of your posts
To change the “posted by” at the bottom of your posts go to Design and click the edit
button below “Blog Posts”. You will come to a tab which looks like this:

You can change the “posted by” to anything you like.

18
 Blogger Tutorials by Tapity1
I’ve picked to say “An Epic Post by:”

Bibliography
That concludes the Tutorials. I hope that these helped you! 

Thanks to all of these blogs for helping me!

*Note: None of the information I used in this Tutorial document was copied word for word. I wrote
everything out by myself (I didn’t copy and paste anything) and I used my own pictures, opinions and
facts.*

1. Twolegers Blog: http://twolegers.tk/ (Amazing Blog! )

2. The Cutest Blog on the Block

19