« June 18 - Sites Added | Main | Sites added today - June »
June 20, 2004
Sites added today - June
Quick Image Tutorial for our bloggin newbies
Okay Knittyheads, I see the queue is filling up and most of you are having image loading issues. Knittyheads you may be but not all of you are webgeeks, nothing wrong with that. To make your learning experience less frustrating I opened a Photobucket account so I could see what to do there and hopefully guide you thru the process. First we'll get the Knittyheads button to load. Next we'll look at getting an image to display inline in your blog entry. Note: At this point I know the instructions will work on Blogger and Blogspot. IF there are any tag differences for LiveJournal etc. let me know or post to the comments and I'll add the revised code for those as well.
Why Photobucket? Because I've seen it most mentioned for photo/image hosting by other Coffeeshop patrons. The service is free and they give you -
Direct / Hot linking allowed (perfect for blogs)
2,500 megs bandwidth p/month (~70,000 hits)
100 megs disk space (~2,500 pictures)
Users must be at least 16 years of age
Only 1 account per person
Signing up and Logging in
Photobucket, signing up for space.
Click on the sign up free link.
Choose a username and password, give them your email.
Photobucket will send you a confirmation email at the address you supplied them.
Click the activation link in that email.
Go back to Photobucket and log in.
Uploading an image to store in your Photobucket space
After you log in you will see a screen that looks like this.
Click on the choose file button.
From the menu that opens, locate the image on your computer you wish to upload.
To save the Knittyhead button, PC users right click the Knittyhead button and save to your computer. Mac users just drag it to your desktop.
Click okay or select on the menu.
Then click Submit.
Be sure to keep the Keep my picture names box checked.
After the photo/image is uploaded you will see a screen like this.
At the bottom of the page will be 3 boxes labeled URL, TAG and IMG
The URL address is what you would use when giving someone a link to view that particular image i.e. the location on the web where it is located. What you will get is a link to the image, not the image loading on its own.
The TAG is what you use when you want the image to load inline. For example: In the first two lines of code you need to put on your page for the webring looks like this:
<center><b><a href="http://www.coruscusweb.com/zibibbo/knittyheads/index.html"><img src="http://www.yourimagehost.com/knittyheads.jpg"></a></b><br>
and in your browser looks like this
The part in the white text above you will replace by copying and pasting the contents of the TAG box that comes up the image. So now that snippet of code will look like this:
Oh, as for the IMG box on the photobucket page, I've never had a need to use it so frankly don't know when it would be needed. Perhaps someone could enlighten us.
Posting an inline image to your blog
Follow the same steps to upload your image as above. In the Create new post box where you know, you type your blog entry when you want to add the photo to illustrate your point, or show off your WIP/FO/cat/dog/kiddos whathaveyou. You use the IMGtag as well. So.
__________example of entry_________
I just finished another purse! My DD says I'm an addict, what do you think? Tell me I'm not alone!
__________end example of entry_________
You simply type in the text. Then copy and paste the IMG box contents into your blog entry and it will look like the above. But with your own image/photo of course!
Okay back to the webring code. Now you see what you have to change, where and how. Don't forget, id=***SITE ID*** needs to be change to id=your site ID # without the ****s
<center><b><a href="http://www.coruscusweb.com/zibibbo/knittyheads/index.html"><img src="http://www.yourimagehost.com/knittyheads.jpg"></a></b><br>
<a href="http://www.ringsurf.com/netring?ring=Knittyheads;id=***SITE ID***;action=prev"> <<</a>
<a href="http://www.ringsurf.com/netring?ring=Knittyheads;action=list">*.*</a> <a href="http://www.ringsurf.com/netring?ring=Knittyheads;id=***SITE ID***;action=next">>></a><br><a href="http://www.ringsurf.com/">RingSurf</a></center>
I hope hope hope this was easy enough to understand. If you need help, leave a message here or there.
--------
Posted by zib at June 20, 2004 12:51 AM
