Sunday, February 8, 2009

How to link your post to another post?

When I host events in TONGUE TICKLERS......, I have had many new bloggers asking me how to link their 'post' to my 'event'. As the doubt is a common one I thought it would be a good idea to do a small tutorial on this starting at the basics, as always!

I am sorry if I am going through the basics and you already know this. I do not mean to undermine you but I always start at the beginning - out of habit!

Just like in:
"Lets start at the very beginning, a very good place to start!

When you sing, you begin with 'do re mi', when you blog you begin with BLO....."
Ha ha...:)

First lets familiarise ourselves with the various icons on our dashboard:

New posts - takes us to a blank box where you can begin writing on any topic.

Edit posts - shows you all/few of your previous posts, and you can click on the edit button next to the earlier post if you need to make changes in the content/labels/appearance of that post.

Settings - takes you to a page where you can safely play around with the overall content format of your blog.

Layout - takes you to a page where you can decide the template, the colors and overall appearance of your blog.

The icons on your blank writing box:
Font - To change the appearance of your writing.
Next 'T' - to change the size of your writing.
b - To change your characters with a bold lettering i.e., darkening. (Keyboard - Ctrl b)
i - To change your character with a slant i.e., italics. (Keyboard - Ctrl v)
T with color box - To change the color of any character/s in that post.
The chain with the green blob - it creates your hyperlink/link to one or more character(s).
The scenery box adds photograph - just click on it.
the filmstrip adds videos - click on it.

To link your post:

1. Go to Edit Posts

2. Click on 'Edit' next to the post that you need to link.

3. Next on another window (if you are using internet explorer) or another tab (if you are using firefox) open the destination site or post to which you want to link.

4. Go to the address bar - that little blank box which shows http://.......etc.

5. Highlight and copy the address there. It is nothing but the address of the destination where you need to link your post and is also called the 'url'.

6. Come back to your post window or tab.

7. Take your cursor with the keyboard or your mouse to the start of the word and drag it upto the length of characters or words you need to link. After you highlight your characters in this manner, click on the chain with a blob (The link button).

8. A box will pop up asking for the destination to which you would like to link. Paste the "http.//....thing" there, and click OK.

9. You are done:)

For eg.:

"Lets start at the very beginning, a very good place to start!
When you sing you begin with 'do re mi', when you blog you begin with BLO....."

To link the characters 'BLO' with my blog, here is what I do:

1. I first go to my blog BLO OF BLOGGING and copy the http: address I see on the browser.

2. I come back to this post which is open under 'writing mode' and highlight 'BLO' with my cursor in the sentence above.

3. I go and click on my link icon (the chain).

4. It shows me a box to paste the destination http://.... adress which is also called url. I paste it there and click OK!

Done!

If you do it this way you need not show the address on your blog, instead you could write her name and just link the name to the destination url.

If this clarifies something - great! If it confused - well, you are on your way to becoming Confucius:)

There is another way to take the link instead of opening the site. If you go to Confucius above which is a hyperlinked word, all you need to do is right click with your mouse and select the copy link location option. The link is already copied:)

Tuesday, December 9, 2008

Designing your own copyright logo

This is in response to an email regarding how to add a copyright logo, and a comment that the logo looks classy - thanks, Sharmila:).

There are many ways to add a logo, and it is an easy job if you experiment a little with photoshop.

Here is my quick tutorial without pictures, so please open up your photoshop while going through this!

1. Open up photoshop.

2. Click on Window.

3. Turn by turn open up 'History/Actions', 'and 'Layers/Channels/Paths'. Drag these on the RHS of your screen.

4. Open your picture in 'file', 'open'.

5. Go to 'Layer' and select 'Duplicate Layer' and name it anything, say 'trial'. Now, if you see on the RHS in your history, you will see three things: 1. The picture in jpg format, 2. The open image and 3. The duplicate layer which is now active on your screen. Any time you want you can go back to any of the actions above i.e. 1 and 2 by clicking on them.
Right now we want to work on the duplicate layer so keep '3' i.e. trial open.

6. On the LHS of your screen is your palette which contains the different accessories in photoshop. As you take your mouse and wait at different accessories, it will show you the names and purpose of each accessory. For eg. If you take your cursor to the dotted thing and wait the marquee will appear. Here go to 'Shape Tool'/Rectangle tool etc. just below your Text Tool shown as 'T'.

7. Click on the shape tool. You will see that new shape tools open up at your task bar containing shapes like rectangle, circle, oval etc. and an ameoba shope with an arrow next to it.

8. Click on the amoeba. You will see that a shape box opens up nearby on the task bar. Click on the arrow next to it and you will find a scroll box with many other shapes. Choose any one.

9. I chose circle. No take your cursor to your picture 'trial' and drag it so that the shape becomes big enough to your liking.

10. Next click on 'T' on your LHS. Now go to the border of the shape you made and click on it. Adjust the size of your characters on 'The Character' Window on your RHS. If it is not open go to Window above and open it.

11. You will some numbers on it suffixed with 'pt'. This determines the size of your letters. I adjust mine to 20 or 30. Put in the number you would like and click enter. You will see the size of the text reduce on the shape.

12. Now hold down the 'Alt' key while typing 'o169'. This will give you a copyright sign. Now write your 'text'.

13. If you feel the color is not right or the text is small, select your text by 'right click' and 'drag' your mouse to cover the entire text. Change the size of your text in the character window, or change the color in the color box on your task bar.

The instructions look technical, but if you make a trial with your photoshop open on one window, you will find that the tutorial is pretty easy.

Good luck with your customized logo and do let me know the hitches you came across. I tried making it as simple as possible so if you feel I have 'spoon-fed', please remember that not all of us are computer literate. There are many out there like me who learn things by trial and error and have never used these tools before.

Sunday, November 16, 2008

Customizing Your Header

Just as a book cannot be judged by its cover, a blog cannot be judged by its header. Yet, a good header does make a lasting impression in the mind of any stumbler/random browser - it gives the blogger the satisfaction of having gone beyond the ordinary, and identifies his/her blog just like a brand! Your visitor will never forget your blog, if the header is catchy. Your header is a window to your blog - so use it to the maximum.

For this blog I am using the Minima Stretch default template provided by blogger:

If you go into 'Layout' -> 'Edit HTML' of your dashboard you will find a box containing the technical aspect of your blog design. Any changes you wish to make in the appearance of your blog starts from the changes you will make here.

The layout of your blog is divided into sections(elements) separated by this kind of line break

/* Section name such as header
-----------------------------------------------
*/

The sections are self-explanatory:

Variable - Defines the various 'x', 'y' and 'z' variables used in your 'HTML'
Body
Header
Outer-Wrapper
Headings
Posts
Comments
Sidebar Content
Profile
Footer

To customize your header:

Scroll down the box till you reach

/* Header ----------------------------------------------- */

#header-wrapper
{

margin:0 auto 0px;
border:1px solid $bordercolor;
}

What do the terms mean?
The header wrapper is related to your Blog header
increasing the value of the margin in the above (which is 0) will increase the width of your blog header.
increasing the % value (which is auto) will decrease the width by that much %age on both sides.
increasing the value of px (which is 0) will increase the distance of the next line i.e., the post title from the header.

To add a picture to your header, first decide the dimensions of the background picture.
Mine at Tongue Ticklers is: height - 200px, and width - 945px.
Next take one picture or more and style them the way you would like in photoshop choosing a new file of the dimensions of your header.
Next upload it in one of the photo sharing sites - mine is photobucket.
Copy the HTML code of your picture, and add one line to the 'stuff' under header-wrapper, which will now read as:

#header-wrapper {
width:---px;
height:---px;
margin:-- auto --px;
border:--px dashed $bordercolor;
background: #fff url(the HTML code of your picture);

}

Fill in values in place of dashes. This should give you a new background header picture.

I hope this helped rather than confused!! Please let me know!

Wednesday, September 24, 2008

How to upload bigger pictures in blogger?

I thought it was real hard but some sites made it easier and some messed up whatever I tried!!

This is how I went about the whole thing!

1. Shifted to Minima Stretch Template Style as it offers a large blogging area by default.

2. Asked Sia what she did:) This is how we did it!

3. Open a free account in Photobucket here. Use any other account such as Flickr etc. if you wish to.

4. Upload pictures, copy the HTML code from your album in Photobucket.

5. Open the post in which the picture is to be pasted. Switch to 'edit Html' from the 'Compose' mode and paste the code.

6. Go back to 'Compose' mode. The picture gets pasted in its full size which is bigger than you blogging area. Now click on the picture. Go to the edge and drag the picture inward to the desired size.

This is the easiest way to accommodate the biggest possible picture in your template.

I have opened comments on this post so that you could contribute your own ideas too and so that I could accommodate the good ones here!

Irene of Color Moods says:
"If you know what size you want your picture to be (e.g. my blogging area is 600 pixels), you can re-size the photo right in photobucket to be 600 pixels (or whatever) wide. That way, when you paste into blogger, it will already be the right size."

Jaya of Spice and Curry says:
"I came to know a unique feature of windows vista ,they have the compress the pic option in windows picture manager(I am sure any other version of windows does have it also ) , click on that and compress the pic to the web page option .
save it and then upload in blogger(it takes less time to upload also)
later you can go to the edit html mode and you see these lines for a pic in html mode .

auto 10px; WIDTH: 400px; CURSOR: hand HEIGHT: 300px; TEXT-ALIGN: center" alt="" ......

Change the width and height manually to give the bigger looks to the pics...
I am sure this feature is helpful in any blogger template .
I have been using denims ..and it worked out well..."

Creating associated blog pages

When I started TONGUE TICKLERS...... I wanted to give it a 'pro' look.

My inspiration was the 'Joy of Baking' site. I wanted to have links that took my readers to:
'Recipes', 'home', 'about', 'glossary' and other pages easily. I worked this out on my own, but for most features you can find easy solutions at BlogU.

Not that I have reached the levels I want to yet, but I would love to share whatever knowledge I gained with others, so they do not struggle with their blogs the way I did:). I am enabling comments for this Section so that readers who have ideas other than the ones I use can share it with others.

Here is what I did:

Create a dummy blog using the same template and features as your main blog.

Give the url a slightly different name - mine is tumyumtreatrecipes.blogspot.com.

Go to edit profile, and select the dummy blog as 'blogs you do not want to display'. Hide it in your 'complete profile' page. Select 'No comments allowed' in your dummy blog.

If you would like to have recipes list, make a post in your dummy blog listing the recipes the way you wish to, and link them to your 'permalink of the dish' in your main blog. Similarly go about the other changes.

If you are already doing it, this might seem an unnecessary post to you, but if you haven't and you want to do it, you might find this useful.
____________________________________________________________________

WOULD YOU LIKE TO KNOW?

How to upload bigger pictures in your blog posts?
Vegan Yum Yum's essential photography tips for a food blogger?