Blogger Lift discussion

Hello everyone,

First off, thank you for checking out my topic. Now, let's get down to it shall we? I run a blog called Need to Read, Got to Watch (http://needtoreadgottowatch.blogspot....). It's been running for a little while now, and I'm interested what you all think of it. Any of it, or all of it. The design down to the writing. I'd really appreciate any incite, and don't be afraid to be blunt- it'll help me in the long run. I'd just really like some honest opinions. Is there anything I should add, like a section where people can browse by genre (since I review all of them pretty much)?

Thank you all,

Have a great day,

Georgia

Hi, Georgia

I just check out your blog and I think that it's great. I like how you did the review directory, very organize and the browse book covers is awesome. I wonder if you could help me. I just started a blog but had no idea what to do. I don't know how blogger works. Could you maybe teach me how you do the review directory and the browse book cover? If you don't have the time then I understand. I love books so I want to blog about it but yeah sucks at anything related to computers. Anyway, your blog is very nice. All the best to you!

Warmly,

Mel

Hi Mel,

Glad you like it. I use blogspot so I'm not sure what's different between the two, but this is how I do those things you've asked on blogspot.

First off, to create the tabs at the top of the blog page, go to design at the top right corner, then click pages on the list on the left and click new page. It will prompt you to name your name and add content. Congratulations you have a new tab. To add links it's very simple. Just go to the post or page you want to add links to, and highlight the text you want to turn into a link. Then click on link in the top bar. You need to fill in what you want the link text to say (in other words what you want your link to be called), then add in the web address you want it to go to. This is simple copy and paste. There's also an option to tick a box so that the link opens in a new browser window (which I always use).

The book cover page is a little more complicated. I started by creating a new tab (as explained above). Then I went into the pages application on my laptop and designed the bookshelf background you see the covers resting on on my blog. It's not too difficult, but you could always find an image you want to use on the internet if you don't want to design one (just make sure you credit its source). Once that was done I saved it as a new template- so now every time I need to create a new bookshelf, I can just select the template rather than having to create it all over again.

Next I download all the book cover images I want, and simply drag and drop them (one at a time) onto the bookshelf template. Then it's just a matter of resizing and placing them where I want them. Once I've done that for each book cover, I start to prepare it for my blog. First thing is to decide what size you want your image. Now most blog hosts offer a couple size options for images: small, medium, large and x-large in the case of blogspot. However, those aren't always the right size. So go to the post/page you want your image to be on, click on the picture icon next to the link option, and upload your image.

Now go to the html option on your blog post. You will have to write some code for this, but it's pretty simple once you've got it down. In the code section find your image code and locate the size. It should look something like: height="600" width="400" (the numbers are irrelevant). You are now going to decide on what size you want your image. Play around with the height and width (you can just change the numbers by typing your own) until you have a size that is perfect for you. Write it down. Because here comes the tricky part- you are going to create an image map. And it has to be created entirely through code. It looks complicated and intimidating, but once you get used to it you'll realise it's really not that hard- more tedious and repetitive.

Open your image in Photoshop. You are going to resize the image so that it is EXACTLY the same size as the one you uploaded. To do this go to image>image size. Then tick the box at the bottom that says resample image. You can now change the pixels. Type in the height and width you've decided on and click ok. Now that the image is the right size, you're going to need coordinates for your links. To do this, go to edit>preferences>units and rulers, then select pixels. Next go to window>info, and now you should be able to see the coordinates of whatever your mouse it touching.

This bit is pretty time-consuming, but necessary. On your image, place the mouse over the top left corner of your first book cover (assuming you want links on book covers) and write down the coordinates shown. Do the same thing for the bottom left corner of the first book cover. Repeat the process for every book cover you want a link for. Now you can make your link whatever size or shape you want it to be. I use rectangular links because that's the shape of the book covers. I also make the link the same size as the book covers. If you want a different shaped link it's a different process. I'm just going to go into this one. The size is dictated by your coordinates. You should have guessed that the top corner coordinates and bottom corner coordinates form a rectangle. You can make that rectangle any size you want by changing those coordinates. For example, if you don't want the link to take up the entire book cover, make the rectangle smaller by taking coordinates further into the cover image.

Now that you've got the coordinates for all your links, it's time to begin the image mapping. On the post/page that you uploaded your image, stay on the html section. Go to the section you want to add your image into (however far down the page you want it), and type these code lines:

< html > (you don't need any spaces. I had to add spaces because goodreads automatically formats code. Basically it thought I wanted to create an image map here! You do not want any spaces. Anywhere I've added obvious spaces- take those out)
< head >
< / head >
< body >
< img src = "this is your image source. when you uploaded the image to the page earlier it should have written code for it. find your image code and copy paste the src line. " width = "your width " height= " your height " alt = "this is where you name your image map, e.g. bookshelf 1" use map = " #whatever you named your image map" >
< map name = "whatever you named your image map" >
< area shape = "the shape you want your link. in this case rect for rectangle" coords = "the coordinates of your link. remember there should be four number here. two for the top left corner and two for the bottom right" href = "this is where you put the link you want the image to go to. in my case, i add a link to my review of that book. just go to the link you want, and copy and paste it to here" target = "blank" (only add this target=blank step if you want your link to open in a new browser window)>
here is an example of one link: < area shape = "rect" coords = "0,47,70,73" href = "www.pag.html" target = "blank" >
you can add as many links as you want. you have to repeat the process of shape, coordinates and link for each link you want to create. so i have a line of code for each book cover. just remember to start a new line every time you add a new link. don't forget the at the beginning and end (see above for placement) as well as the "and" (again see above). Once you've added all the links you want move onto this:
< / map >
< / body >
< / html >

congratulations you now have an image map. You can see it's a long, boring process, but well worth it I think. Now remember for each image you have to create an individual image map. Basically on my blog I have various different bookshelf images. I created an image map for each of them. Just repeat the process above for each one, and it'll work fine. I always make sure to test the links once I've completed the image map. Just to make sure the link dimensions are correct and the address it go to is correct, etc etc.

I hope that helps. I know it looks amazingly complex and confusing, but you'll pick it up pretty quickly. It's a long process (especially if like me you add a bunch of links to one image), but well worth it. Let me know if I can help you with anything else.

Have a great day,

Georgia

Wow...first of all, thanks so much for answering. It's so detail. I think mine is also blogspot. I will try to follow your direction and tell you how it work out. Again thank you so much. Have a great day!!! :)

Mel

My pleasure. It took me quite a lot of trial and error my first time, but you get used to it. And it's kinda cool that you can tell people you know code (at least some).