Labels!!

Hey Designers!! 

So , I've been asked many many times:

HOW DO I LABEL MY POSTS??
-=-=-=-=-

 Labeling your posts basically is putting several posts under a relating criteria.

Basically , labeling your posts is very beneficial , its a way of organizing your posts so it will make it easier to find.

 This post will show you how to create labels and how to label your posts and how to put them in your blog so that everyone could use them!

Like so,

 

Its simple and easy 

Creating Labels

Step 1:

Write your post 

Step 2: 

Once you are done , go to 'Post Settings' at either side of the page

It should look like the picture below 

One of the options is 'Labels'

Step 3:

Click 'Labels'
It should look like the picture below

  

Step 4:

Write your label

Step 5:

Click 'Save' or 'Publish' .. and you're DONE!

You can do this to previous posts by editing each post and doing the steps above OR by doing the following:

Labeling published posts...

Step 1:

Dashboard> Posts 

Step 2:

Select wanted posts 

Step 3:

Click the labels icon and choose or create your label

 You are DONE!

Labels on the Sidebar!

So you made your labels and you've labeled your posts and published them and everything,,
But you want your viewers to benefit from your labels , right?

How to put it on your sidebar?
The procedure is like adding any other widget to your side bar

Step1:

Go to Dashboard > Template

Step 2: 

Click 'Add a Gadget'

Step 3: 

Scroll down the pop-up window till you find 'Labels' , click it

Step 4:

 You can personalize how the widget will look and the order of the labels

Step 5:

Click 'Save' , then position your widget where ever you like on your sidebar 

Step 6:

Click 'Save Arrangement" at the top of the window

Step 7:

you are DONE!




Sorry I've lacked visual guide on the last one , its just because it's really simple and easy!
Anyways , hope this post helped!
If there are any questions , feel free to ask in the 'Ask Me' tab or in the comments below

hope this was helpful!

My check list..

These are the things I do when changing my blog style...

• Change background
• Change header
• Change font color (links , posts , tabs , titles...)
• Change sidebar tags
• Change chat box color
• Change cursor 
• Change text widget color 
• Change font type (optional)
• Change template (optional)
• Change width (if required)
• Change placement of side bars (optional - depends on mood)

BLOG ALERT!@#%$%^

Do you want to make a big announcment? an alert? a pop-up box?
Like this one

How to make a blog alert? Copy and paste this code below in a HTML/Java script Widget.

Copy code > Dashboard > Layout > HTML/JavaScript > Paste code

Code :

<script> function MYALERT() { alert("TEXT HERE"); } MYALERT() </script>

New Websites!

I found two new websites in which you can find backgrounds for your blog and other stuff..

1. Artemisa 

You can find tutorials , blog backs , buttons and more!

2. BlogBulk 

There are tutorials , templates and lots of other stuff..! So cool!

Hope they are helpful! 

How to make your own sidebar tags/titles?

Well you surfed the net and the pre-designed tags are not how you want them to be , or not enough , or just not right , or they dont match your blog...
You want to make your own unique blog sidebar tags...

Start by thinking "How" you want them to be... in frame? frameless? with background? no/transparent background? what color do you want it to be?

Then go to fotoflexer and design it ..

Upload a photo , any photo! If you dont have a specific photo that you want to use for all of your tags.

Resize it!
For my blog I used 190x110 It fits my side bar , but you dont have to worry if its a little big , or small , blogger provides a "Shrink to fit" check box anyway.

If you uploaded any photo , you can erase it . Then you'll get a transparent plane where you can do anything with it!

Go to the "Decorate" tab > "Erase" button > Start erasing!

Then click Done! 

After you've erased your parts , or text ( If colored background you can color it using the "draw" button in the design tab , if you didnt find your color , you can search for your color digits online and insert it in the test box provided in the color area)

INSERT TEXT! 

On the same "decorate" tab , there is "text" , Insert your desired title for your gadget on your blog and decorate it ..

SAVE IT!

In "Format" make sure to choose the PNG format if you have a transparent image! 

Once you saved your tag click "Back to editor" button found on the top right of the page. 

Because you have more than one gadget , you want to make them as one set looking all the same , right? 

Just change the text and save it like you did to the first , then "Back to Editor" ... etc. Do that till you finish all your titles! 

How to upload the image to your blog , you can follow up the tutorial here.

** You can decorate your tags at fotoflexer by adding stickers and frames!

** To ANIMATE your tag you can upload multiple pictures (same size) to gickr.com

How to make side-bar tags?

So you've decide you would like to spice up your blog with a few fancy sidebar tags or images but just can't quite figure out how to accomplish it... well, no problem. Here are some helpful instructions to get you on your way....

{Before you start: There are a few things we'll need to do before we start...

1. For this tutorial you will need a selection of sidebar tags or images. You can find sets on Shabby blogs or you can make your own (to see how to make your own go here) Be sure you've already downloaded the tags you want to use on your blog by clicking on the download button . I like to save mine to my desktop so I can easily find them later.

2. Next, grab a blank piece of paper and pen/pencil and head over to your blog. Take a look around at the links, tags, and other goodies you have on your sidebars. Now is the time to decide what tags you'll want to use from the set you downloaded. Make sure to write down the order of the titles!

--------- START -------


*Begin by logging into your blog.

*Next click on "Design" found in the top right corner of your blog or navigate to your "Dashboard" and click on the "Design" tab.

Click on "Add a Gadget"...

Next scroll down to "Picture" and click the blue plus symbol...

In the next pop-up window we will work with a few features. The first is to check the "shrink" box, this will ensure your image is as wide as your side bar...

Next click the "Browse" button and navigate to one of the frame images you have saved on your computer. Click on that image and then click "Open"...

After browsing your image and its loaded , go ahead and click "Save".

** Every gadget has a title , make sure to remove the title from the gadgets (you dont want 2 titles right?) and place the right image above the gadget! Make sure to not mix up the order of the images with the side bar!! 

Click SAVE!

With that done you can click "View Blog" to see how your new tag looks and check that the link work properly. You'll probably want to wait until all of your new tags are in place before you delete any of the preexisting links you had on your blog before. That way there's no confusion and the links are still there in case you wrote down an incorrect link.

With that you should be all set.

Amazing Website...

Another amazing site , that provides HTML codes!

Your #1 community for graphics, layouts, glitter text, animated backgrounds and more.

from backgrounds to blinkies to falling objects to generators...

you can design texts ! 

AND MORE!!
 you can make Blog moods!

Things we forget...

Who loves sticky notes??

I ADORE THEM!!

I cant live without sticky notes ..

Nothing to do with Blogger...

Just wanted to advertise about this blog I found long time ago called

Things We Forget

Its a weird , motivating blog..^^

You can also purchase some sticky notes / posters!

I just read them though ><

http://thingsweforget.blogspot.com/

Kevin & Amanda Website!

This is a website I've been dying to introduce it to all of you , not only for blogger but for mostly everything ( crafts , photography , fonts...etc) they also blog about their life! You can check out the amazing FREE FONTS they have which you can use on your own computer!  Or really helpful TUTORIALS , that helped me a lot with my blogs to go to tutorials just for Blogger click here Such an amazing website !

background maker site!

Here is cool website where you can make your own background and design it! I wanted to share this site with all of you guys ...! its called x3studios . You can even make a header from it!

Ex. Header

Ex. Background

Hope you enjoy using it!

Background music!!

Sites where you can get Music as HTML code

• http://www2.mp3raid.com
• http://videokeman.com/
• http://www.mixpod.com/
• http://www.fullmusik.net/
• http://widgetindex.blogspot.com/2010/01/music-box.html

How to insert it?

Like any other HTML code , go to Dashboard > Template > Add new gadget > HTML/JavaScript > Copy/Paste the code > DONE!

Make sure to place it where it wont be visible!

Word verification!!

Ahh they are just annoying to me ! When you want to comment on something it goes like " Please write what you see" and they give you words like this ..

Sometimes , when I see a word verification I just lose my interest in posting my comment somehow...

So , how to get rid of them???

Go to Dashboard > More options > Settings > Posts and Comments > Scroll down > "Show word verification" > Switch it to " No" > Save > You are DONE!

How to make text areas?

Have you ever wondered how to make text areas??
Like this?

There are types of text areas , two types ..

FIRST - The editable text area

and there are two types of them ..

1) With text wrap

Like this one. you can write anything here!

Code

<textarea cols="20" rows="5" wrap="hard"> TEXT HERE </textarea>

2) Without text wrap
Like this one . You could write as much as you can but it wont wrap it

Code

<textarea cols="20" rows="5" wrap="off">TEXT HERE</textarea>

SECOND - The "read only" text areas

This is most commonly used in HTML codes , where the reader could not change it , but only copy and paste it.

Like this one

Code

<textarea cols="20" rows="5" wrap="hard" readonly="yes">TEXT HERE</textarea>

HOW TO USE TEXT AREAS!?!

• In a post

In your post basically you are on the "compose" view . Switch to the "HTML" view and copy/paste the desired code and insert your text .
Switch to the "compose" view to observe what you've done and to align your text area.

• As a widget

Copy code > Dashboard > Layout > HTML/JavaScript > Paste code

you are DONE!

** NOTE: Make sure to place your info instead of  "TEXT HERE"

Customizing your cursor

Want text or sparkles to follow your cursor around??

• For sparkles go to  here
• For text go to Here
• For bubbles go to here

Just copy/paste the code to your blog!

Blog Cursor

How to change your blog cursor??

• Go to Cursors-4u and find the suitable cursor you like and they will give you the HTML code of it , so you go and insert it to your blog

Note : The cursor will only be changed when viewing the blog - duh!

Widgets!!

You know when you enter a blog , you find these widgets along the side bar or anywhere else ? Yep well , You can get them from

• Widget Index
• Bina Blog

So far I use these 2 , they are cool

You can add notes and stuff and moods to your blog , all you do it take the code in insert it as a HTML/JavaScript gadget to your blog ^^

**I dont understand what ever is written , I just click and see the pictures!

Centering Your Header

OH NO!! You went to view your blog but the header is not in the middle!! 

• Go to Dashboard > more options > template > advanced > Add CSS 
• Copy - paste the code below

                     #header-inner img { margin-left: auto; margin-right: auto; }

• Click Apply to blog and you are DONE!

Headers!

Headers!

Most of the sites above have backgrounds with matching headers! Now headers are pictures.. You need to edit them to insert the name of your blog! "How to do that?"

1. Save the Header to your computer
2. Go to any photo editor and edit it! I prefer Fotoflexer , Its online and free and easy ! 
3. Upload your picture and edit it 
4. Save your edited Header to your computer
5. Go to Dashboard > More options > Layout > you could see the word header and a small blue "Edit" at the bottom right corner > Click "Edit" > Image > From your computer > Choose file > upload your picture
6. Placement is your choice , Because you wrote the blog title already from your picture I recommend eliminating the first choice , and weather you want the description to show or not its your choice 
7. Save , and you are DONE!

** You could use any photo editor , I prefer Fotoflexer , I really like it ! I will do a tutorial about it soon!

Reaction buttons

How to add reaction buttons .. Well its easy
Go to Dashboard > More options > Layout > You will see "Blog Posts" and a small "edit" button > Reactions > Check the box > Add or change them > Save and you are DONE!

*You could change its position in your blog if you scroll down the edit dialog box!

Creating your blog button!

When it comes to blog buttons I am not a pro in that , but I've made a blog button of my own and Its not that bad...
Anyways , here you go:

1. Make a 125x125 Picture to represent your blog , you could use Fotoflexer if you want ( I used that by uploading a white plane picture and re-sizing it to the measure I want and then editing it)
2. Save your button 
3. Now you need to have an HTML code for your button so that others could put it on their blog.
4. Upload the picture to the browser and get its URL
5. Replace your website and image URL in the following code
<div style="text-align: center;"><a href="YOUR WEBSITE ADDRESS" target="_blank"><img src="IMAGE URL" /></a></div>
6. Enjoy your button!!

** You could make an animated blog button by making multiple same-sized pictures and going to gickr and uploading your pictures . Now , the good this is that gickr gives you the image URL directly ( so no need for uploading your image to the browser and getting the URL) ... Anyways after getting the URL just continue the steps !