Book Blogging 101 - Part 1 - The HTML Part I

Today for BB101 this will be a two parter. Since, I've now started answering HTML questions more and more seem to be coming in. Open a can of worms with this one, didn't I?? Part II will be the more bookish questions for those of you that don't want to muck around in code.

Spawned from the Big Sis, Little Blog program, Book Blogging 101 was born. Do you have a question? Leave it in the google docs form and I'll try and answer them in the order they are received.

Question #1:

I don't have the padding between my image and the progress bar.  I don't know if it's because I've been tweaking Blogger (I'm fiddling because I'm getting ready to make some changes for Bloggiesta) or because I need to add some code.

Any suggestions?

http://basiabooks.blogspot.com
(right sidebar) -- Barbara

A: Barbara if you would like to add a space between an image and the progress bar, or just any kind of space in blogger, it is very simple:

<br />

That simple tells blogger...line break. It is not as big as a paragraph space. Just one line instead of two.

Question #2:

How do you make those scrolling images that display the buttons of everyones blogs? - Sarah

A: Ahah! I did a post on that. Those are handle through a simple HTML tag called Marquee. I wrote a post on my design site that explains how to do it. It doesn't always work on everyone's blog the same, so if you have any problems, email me. Here is the link:

How to Scroll Your Blog Roll!

Question #3:

Wondering how you do the white box around your quotes/html (for explanation) :D - Samita (Book Purring)

A: This requires a bit of CSS styling. I'm going to show you how to create a simple white box with a black outline like I wrap around my questions. It breaks down into three parts.

Part 1 is the actual box. This is a DIV.
Part 2 is the background color
Part 3 is the border, it is actually very simple code. Let me show you what Question #3 looks like in code:

<div style="background-color: white; border: medium solid rgb(0, 0, 0); color: #660066; padding: 5px;">
Question #3:

Wondering how you do the white box around your quotes/html (for explanation) :D<span style="font-size: x-small;"><i> - Samita (Book Purring)</i></span></div>

I have to wrap the Question #3 text within the div. I've highlighted that part in yellow. That is the part that tells your browser that this part is a separate section, it is a division. Within the TAG of <div> you have to put a style attribute in there. The style tells your browser how to display this box. So we have taken a small tag that would just be <div> and inserted a style into it.

<div style="background-color: white; border: medium solid rgb(0, 0, 0); color: #660066; padding: 5px;">
Question #3:

Wondering how you do the white box around your quotes/html (for explanation) :D<span style="font-size: x-small;"><i> - Samita (Book Purring)</i></span></div>

The fist style is BACKGROUND-COLOR, this can be any color that you choose, a hexadecimal color or RGB color. Blogger has defaulted my code of #FFF (white) to the word white. Either works. Blogger will change your code to work best with their software.

background-color: white;

Remember after every attribute you have to follow it with a colon : and after the description you follow it with a ; to separate attributes.

The second part of the style is the BORDER.

border: medium solid rgb(0, 0, 0);

This code is telling the browser that the border has to be of medium size, solid and black. You can change medium to thin, large, or even designate a pixel size. There are also other types of borders, like dashed, dotted and inset. You can also change it to whatever color you want.

Second to last part of my style is telling the browser what font color I want. That fancy purple color. You can set it to whatever color you want, just go to a hexadecimal chart and pick a color:

color: #660066;

Last part is the padding, you want padding, because if not your text would be right against the border. Padding makes things look nicer.  Keeps some padding, but you can change the pixels, smaller or larger. Play with a little and see what looks best.

padding: 5px;

I told you this was going to be intense, but I feel it necessary to answer all questions...

Question #4:

How do you make a button? The kind that you post with an html code so other bloggers can post it to their sites. - Dana @ Bookgirl Knitting

A: Double Ahah! I did a post on that, also. Well, I did a post on the Grab Code underneath the button. About creating the button. You can either do it yourself with photo editing or design software. You can probably even use Word or PPT to create them, but you need to get to know the software to create one. If not you can pay someone - like me, or bribe a buddy to create one for you, and then you don't have to worry about this at all. But... once you do tackle Paint, here is the link to add the code:

How to have a "Grab My Badge"

Question #5:

I notice that you have this upcoming events widget on your left sidebar. How do you do that, or create it? - Mariya

This one is actually pretty easy. It is actually a gadget by Blogger Buster. What you do need is a Google Calendar. If you don't have one you need to create one using the Google calendar program online. https://www.google.com/calendar

Once you have created your calendar, go to Blogger Dashboad > Design > Add a Gadget.

Search gadgets with 'Google Calendar'

Add: Forthcoming Google Calendar Events

Give it a title, how high you would like it, your email, the number of updates...and hit save. Pretty easy?

Question #6: {In response to the Progress Bar Post}

I'm very proud of myself, I managed to follow all the instructions and got progress bars in place for most of my challanges. My questions are 2.
1) What do I do if the host doesn't offer the link code under the picture?
2) My progress bars are directly under the picture - there is no space. How do I create that space seen in the example above? Thank you for being sooooo helpful to us challenged ones :)

- Barb at Sugarbeat's Books

A. You can grab the image yourself and link it up, you might want to ask the blogger hosting the challenge first though.

How to grab an image:

1. Right Click
2. Scroll down to Save Image As...
3. Navigate to the place you want to save it as
4. Host the image on an image hosting site such as Flickr.com
5. Now you can use the link from Flickr or any other site in the code that was given on the progress bar post

For your second question, I answered it above in Question #1.

You are welcome BTW.

That is it folks. These posts are getting huge...but ask away!

Ask your BB101 Questions here...