Ask HTMiLy (7): Social Networking Icons

With over 500 million active users on Facebook, 26 million Twitter users, chances are that you have an account. On my right-hand sidebar I've got a little button for each one of the social networking sites that I use, plus a handy RSS feed icon.  Each one of those buttons links to my profile page.

Want one for your blog? Luckily, it's very simple.

1. Create an HTML gadget.
2. To make a simple button, just use this code:

<a href="http://www.goodreads.com/user/show/1178469" target="_blank"><img src="http://i72.photobucket.com/albums/i177/namelocee/gr1_48.png" alt="Goodreads" border="0" /></a>

 Change this web address to your goodreads/facebook/twitter/rss feed page
Change this web address to the link where your button is saved 

The code above turns into this:



If you want to make your button centered in the sidebar, put<center> at the front of the code and </center> at the end of the code.

You'll notice that I have four buttons, and they are all in a square. To do that, I used a table. (I'm sure there are other ways to do this, but this was the one that worked flawlessly for me)

<center><table>
<tr> <td>GOODREADS CODE</td>      <td>RSS FEED CODE</td> </tr>
<tr> <td>FACEBOOK PAGE CODE</td>     <td>TWITTER CODE</td> </tr></table></center>

The <tr> signals a row, and <td> signals a cell. So, at the beginning of the row you have a <tr> then a <td> for the cell. At the end of the first code's cell, add a </td>. For the next cell start a <td> then add a </td> and </tr> to signal the end of the row.  Repeat for the second row. Add a <table at the beginning and a </table> at the end, and it should all line up perfectly.

Helpful HTML tip: When you are using code, always remember that each section of code has two parts, a beginning and an end. The beginning starts with a word or symbol inside <>. The end uses a backslash in front of the word or symbol </>. If you forget the beginning or end of the code, it won't work.

Ask HTMiLy (6): Progress Bars

Making a Progress Bar

Did you join a reading challenge this year? One great way to visually keep track of how you are doing on your challenge is to create a progress bar.  You can see mine on the left-hand sidebar.

1. Create an HTML Gadget: If you are using Blogger, it's as simple as going to Design-Add a Gadget-HTML.
2. Insert the following code:

<center><a href="http://theladybugreads.blogspot.com/2010/12/2011-e-book-reading-challenge.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHtev8AlweogQ7lgtokPH6JrPoFoJmJdkHItpI_vJNwtx-kaix7SooeOkQrOtgkYlEIB-VhF09SsdXt3fMuX2tt0YLhqxGwjkHRXNI93DaJT0uYnchBD-wM1GVRbWQ18QuntecwRLx_uM/s1600/EBookReadingChallenge-small.jpg" /></a></center><br />

<div style="width: 190px; height: 15px; background: none repeat scroll 0% 0% rgb(254, 243, 210); border: 1px solid rgb(0, 0, 0);"><div style="width: 8%; height: 15px; background: none repeat scroll 0% 0% rgb(106, 71, 42); font-size: 8px; line-height: 8px;">
</div></div>1 / 12 books. 8% done!<br />
<br />

Now, here's how the code breaks down:

<center><a href="http://theladybugreads.blogspot.com/2010/12/2011-e-book-reading-challenge.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHtev8AlweogQ7lgtokPH6JrPoFoJmJdkHItpI_vJNwtx-kaix7SooeOkQrOtgkYlEIB-VhF09SsdXt3fMuX2tt0YLhqxGwjkHRXNI93DaJT0uYnchBD-wM1GVRbWQ18QuntecwRLx_uM/s1600/EBookReadingChallenge-small.jpg" /></a></center><br />

<div style="width: 190px; height: 15px; background: none repeat scroll 0% 0% rgb(254, 243, 210); border: 1px solid rgb(0, 0, 0);"><div style="width: 8%; height: 15px; background: none repeat scroll 0% 0% rgb(106, 71, 42); font-size: 8px; line-height: 8px;">
</div></div>1 / 12 books. 8% done!<br />
<br />

Link to the challenge sign-up or information page

Link to the challenge button image

Changes the colored portion of the progress bar

Text below the progress bar

Once you are done, it should look like this:

1 / 12 books. 8% done!

If you want to add more progress bars for different challenges, then just continue copying, pasting, and editing the code.

And if you want to get really fancy, you can combine with the instructions on making a scrolling button bar, and make a scrolling progress bar!

Ask HTMiLy: Special Shipping Edition

If you like going to the post office raise your hand.

....


Anyone?...


I'm right there with you. I work full-time, which means that I have very limited hours to get to the post office.  If I wanted to pay about $3-4 more and not use the media mail system, I could print postage online, but I'm not willing to pay that much extra.

Well, it turns out that you CAN print media mail postage from your home computer, slap it on a book, and stick it in your mailbox.

Here's how:

Stamps.com
If you are doing a huge amount of mailing, a service like stamps.com may work for you. For a monthly fee, you get to print postage at a slightly discounted rate, get free delivery confirmation, and it comes with a scale.

Endicia.com
This is pretty much the same deal as stamps.com, except they do have a no-fee option. However, it doesn't include media mail.

Don't want to pay a service fee? Here is the secret option number three:


Paypal.com
This requires a PayPal account, but those are completely free, so it's no extra monthly charge.  I don't know how to access the shipping section from the main PayPal website, but the link above works just fine, and Media Mail is an option. Delivery confirmation is only 19 cents.

You can print the shipping label on a regular piece of paper and tape that to whatever packaging material you have. It's about as easy as it gets.

What do you need to know about shipping through Media Mail?

Media Mail rates are done by the pound. So, if your book weighs less than a pound, choose the 1 lb. rate.  If you are mailing more than one book, or a rather heavy hardcover book, choose a 2 lb rate or heavier. You don't need to have a postal scale to weigh it, just a regular bathroom scale will work.

You can only mail books and other media items through this method. Also, if you are mailing something that is less than 4 oz, it is cheaper and faster to send it through First Class mail.

Now you are prepared to go forth and mail all your packages from the comfort of your own home. Of course, this will cut down on the time you could be spending reading in the line at the Post Office.

Ask HTMiLY (5)

Blog Buttons

Blog buttons are all the rage right now. Previously, I showed you how to display your buttons in an awesome scrolling marquee so they don't hog all your sidebar space.  But, what if you want a button for other people to display on their blogs? There are a few things you should know about buttons.

Size:

Obviously, you can make your button as large or as small as you want. However, the larger you go, the more risk you take of your button not fitting in sidebars. A good standard size is 150 x 150 pixels.

Creating:

If you don't have Photoshop, don't dismay. There are many free programs that you can use to make your button. One I love is Picnik. It's free, and all done in your internet browser. They have a wide selection of awesome fonts and "stickers" you can use on your button.  The thing with picnik though, is that you need to already have a picture that is the size you want it. If you need to resize your photos, that can be done in Picasa or another free photo editing program.

Make sure you keep your text size readable. And for the love of sidebars everywhere, keep your buttons small. They take forever to load, and are frankly a little narcissistic.

Posting:

Now that you've made your button, you need to create the html code for it. Upload your design to your favorite hosting website. I like Photobucket or Picasa. Grab the html code and add it to this code:

<br /><br /><center><img border="0" src="http://yourphotolinkhere.com" />

<br /><textarea style="width: 122px; height: 50px; align:center;"><center><a href="http://yourwebsite.com"><img border="0" src="http://yourphotolinkhere.com" /></a></center></textarea></center>

That will get your your button, and the html code for it.

Now, spread the button love!

Have a question?

Ask HTMiLy (5)

Please leave questions or ideas for future Ask HTMiLy posts in the form at the bottom.  I want to make these as helpful for you as I can. Feel free to ask me anything relating to blogging. It doesn't necessarily have to be design or html related.

How did you get that top commentator widget?

I used the tutorial from bloggerplugins.org

I created a new header pic for my blog by making a collage of the head shots of 20 writers I admire-I would like visitors to be able to bring up the name of each writer by clicking the mouse over a segment of the header where the author's pic.


As far as I know, that isn't possible. Here's why. You can't add more than one link to an image. So, in order for it to work, you'd have to split up your header into 20 separate images, with a separate html code for each one.  I don't think that blogger allows more than one image as a header. What I would suggest doing instead is creating a separate page that has the image of each author next to their name and website or whatever you want.
You learn something new every single day. Look at what Tynga had to say in the comments about this:

Hello Emily!
I would like to answer the second question because it's possible to do it, I did something similar on my blog
First I replaced my header by a 1px image. Then I created a widget that I put under the original banner ( Tutorial and how to do it) and then you have to code your image so it links to multiple other website, it's called "Maping an image" and you can find the tutorial here: http://www.javascriptkit.com/howto/imagemap.shtml

I hope it helps!

I love these posts.  Where did you learn so much about html?

Thank you! I'm a completely self-taught geek.  I do a lot of googling. I have found in this day in age, there is an answer to every question. Someone has done a tutorial on just about everything you could possibly want to do with a computer. I am good at following directions. Then, once you learn the basics, you are able to improvise.

Quick Tip!

Have you created a Gravatar? It's a universally recognized avatar that follows your name and email address when you leave comments on another website or blog. It's essential for branding your blog, and very simple to set up.

Have a question?

Ask HTMiLy (4)

How do you get the "You might also like" pics under each post?

This is so super easy. All you have to do is go to the LinkWithin Website and it will show you how to set it up. This is a great widget, I get a lot of click to other posts from it.


How to have numberings on comments? What should I change in the HTML?

That isn't too complicated to do. I found a tutorial at Bloggerstop.net that should explain how to do it pretty simply.

Okay it is not about design, not about HTML but about posting a "short" link when you want
to have someone come check out a post. Rather than posting  example (here is my post: http://draft.blogger.com/home) how do you just shorten this URL in the comment to a few underlined words like Here is mine and it will click over to the blog site post?

jackie b central texas

I am assuming that you want to know the code for how to make links in comments. So that when you post this:

Here is my post

It looks like this:

Here is my post

All you have to do is type in this code:

<a href="http://yourlinkhere.com">Here is my post</a>

Obviously, you will change the text in red to the link and text that you want to show up.

Got a question for me? Fill out the form!

Ask HTMiLy (3)

The last tutorials were pretty technical, so I'm going to scale it back a bit. I've had a lot of people ask me where I got my "connect with me" icons. I have one for Facebook, Twitter, Goodreads, and my RSS feed. There are thousands of icons for Facebook, Twitter, and RSS. I can not remember where I got mine from, but if you do a simple google search for Social Networking Icons, it will bring up oodles of them.

I only know of one place to get Goodreads icons. They were done by Farr Design and I could kiss them right on the lips for making these. They are fantastic. So, click the link and go download them. Once you've downloaded all the icons you want to use, you'll need to upload them to a image hosting site. I use Photobucket, but Flickr or PicasaWeb will work just fine.

You are going to want to grab the HTML Code from wherever you have your images hosted at. It will begin with <a href="

Now, create an html/javascript gadget for your sidebar and paste the HTML code from your photo hosting site into the text box area. Do this for all the icons you would like to use.

Now, when someone clicks on those images, it will take them to where they are hosted on the image hosting site. You need to change it to whatever link you would like it to go to. For instance, if I am doing one for my Twitter page, it looks like this:

<a href="http://s72.photobucket.com/albums/i177/namelocee/?action=view&current=Twitter-icon48.png" target="_blank"><img src="http://i72.photobucket.com/albums/i177/namelocee/Twitter-icon48.png" border="0" alt="Photobucket"></a>

I would change the writing in red to http://www.twitter.com/emsreadingroom. Make sure you keep your URL within the quotation marks.

After you've done all that, you should be good to go. If you want to make them centered on your sidebar insert <center> at the beginning of the text box and </center> at the end of the text box.

Let me know if you have any trouble with the code.

Do you have a question that you'd like answered on Ask HTMiLy? Fill out the form below and I'll do my best to answer it.

Ask HTMiLy (2): Menus and Sidebars

Okay, you guys asked for some more cool design tips, so I've got two things for you: drop-down menus and scrolling sidebars.

Drop-down menus are really cool, but also pretty complicated. You really have to have a basic understanding of HTML code in order to get them to work properly. To get a real basic overview of how html code works, I suggest you check out this post by the How-To Gal. Now, on to the drop down menu.

In blogger, you're going to want to add an html/javascript widget from the Design menu. Then, you get to enter in some code. What follows below is the code that I use for my blog header. It was originally designed by my blog designer A Blog to Brag About. I have tweaked it a little since she installed it and added my own links and such. Each color is a different menu item.

<div style="position:absolute; margin-top:-32px; margin-left:210px; text-align:center;"><ul id="nav">
<li class="top"><a href="http://yourlinkhere.com" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#" class="top_link"><span>About</span></a>
<ul class="sub">
<li><a href="http://yourlinkhere.com">About Me</a></li>
<li><a href="http://yourlinkhere.com">Review Policy</a></li>
<li><a href="http://yourlinkhere.com">Advertise</a></li>
<li><a href="mailto:youremailaddress@yourprovider.com">Contact</a></li>
</ul>
<li class="top"><a href="#" class="top_link"><span>Reviews</span></a>
<ul class="sub">
<li><a href="http://yourlinkhere.com">By Author</a></li>
<li><a href="http://yourlinkhere.com">By Title</a></li>
<li><a href="http://yourlinkhere.com">3 Stars</a></li>
<li><a href="http://yourlinkhere.com">4 Stars</a></li>
<li><a href="http://yourlinkhere.com">5 Stars</a></li>
</ul>
<li class="top"><a href="#" class="top_link"><span>Features</span></a>
<ul class="sub">
<li><a href="http://yourlinkhere.com">In My Mailbox</a></li>
<li><a href="http://yourlinkhere.com">It's Monday!</a></li>
<li><a href="http://yourlinkhere.com">Teaser Tuesday</a></li>
</ul>
<li class="top"><a href="http://yourlinkhere.com" class="top_link"><span>Awards</span></a></li></li></li></li></ul></div>

So, if you replace the names and links in the code I've given you there, you should have a functioning menu bar. If you want to add more things on the top, all you have to do is add this line of code:

<li class="top"><a href="http://yourlinkhere.com" class="top_link"><span>NAME OF LINK</span></a></li>

If you want to add a menu item with sub-menu items in it, use this code:

<li class="top"><a href="#" class="top_link"><span>NAME OF LINK</span></a>
<ul class="sub">
<li><a href="http://yourlinkhere.com">Submenu Item</a></li>
<li><a href="http://yourlinkhere.com">Submenu Item</a></li>
<li><a href="http://yourlinkhere.com">Submenu Item</a></li>
<li><a href="mailto:youremailaddress@yourprovider.com">Email address</a></li>
</ul>

I hope that makes at least a little sense. If you can't get it to work, let me know in the comments and I'll try to get it to work for you.

Now, a scrolling marquee with blog buttons. This is one of my favorite things. I LOVE blog buttons. But, I just don't have enough space on my sidebars to display them all. A scrolling marquee widget is the perfect solution.

<marquee scrolldelay="100" behavior="scroll" direction="up" onmouseover="if (this.stop) { this.stop() }" scrollamount="2" onmouseout="if (this.start) { this.start() }" height="600"><center>ENTER BUTTON CODES HERE</center></marquee>

Here's what this code means. The scrolldelay is how fast your marquee is going to go. You can change it in increments of 100 the higher the number the faster the scroll. You can also change the height of the marquee to as short or tall as you'd like. Play around with the options to see what you like best. What I like about this code is that when people mouse over your buttons, they will stop scrolling. Make sure to grab my button to put on your sidebar! Happy button collecting!

If you have a question or topic you'd like to be covered in Design HTMiLy, please fill out the form below.

Ask HTMiLy (1)

Welcome to a brand new feature at Emily's Reading Room. Here I'll give design tips, blogging advice, and answer your questions. This feature is similar to Kristi's Dear Story Siren and Never Ending Shelf's Design it Up!

So, the first topic today is how to put in pictures in blogger side by side. This is a feature that I wish blogger had, and I hope it does someday. It's a little complicated and involves hosting your pictures on another site, but it's doable, and looks pretty cool.

1. In your "New Post" editor, click on the Edit HTML tab.
2. Insert the following code into your editor:   

<center><table> <tbody><tr><td><img src="insert your jpg link here" border="0" /> </p></td> <td><img src="insert your jpg link here" border="0" /> </p></td></tr> </tbody></table></center>

     3.   Wherever you see "insert your jpg link here" is where you put the URL to wherever you've uploaded your pictures. I personally like to use photobucket.com. All you do is copy and paste the code from the Direct Link line.


     4.  Click on preview and it should look something like this:







You can make your images whatever size you'd like on photo bucket. I'd recommend playing around a little with the sizes until you find one that works. (Personally, I think these are a little small).

So, that's how it's done. If you have any questions about the code or just can't get it to work, leave your question in the comments or send me an email. I'm happy to help.

Have a question for me? Fill out the box below and I might feature it in a future post! Remember these can be questions about anything related to blogging, not just design or HTML.