Today's win-win: Free website giveaway!

Do you need a website? 

I need fresh new websites for my portfolio!

Let's help each other out - it's a win-win.

Whoohoo!

I will build a basic 3-page website for free*, in exchange for allowing me to use it as an example of my work when advertising my marketing business.

You provide the content (text) and pictures, and we'll work together on what design you have in mind.

What do you you get in this free website dealio? 

• You get a basic three page website designed and built. While I recommend one page should be your homepage, the other two can be anything you like. It's your site. Tell me what you want.
• All of your social networking sites will be integrated into your website - Facebook, MySpace, Twitter, blog, photo sharing, event calendar, etc. 
• Unlimited emails with your domain name, such as you@whoohoo.com 
• Your site will be listed in all of the major search engines. 
• As an added bonus, you get a QR code that can be used to promote your website in print and online 

How do I get this free website?
Just "Like" my Pam Hawk Marketing Facebook page and leave a comment telling me what kind of business you want the website for. Hurry! The first three comments get a free website. Super simple.

So what are you waiting for? Get over there and tell me about your business! Go on; I'll wait right here.

*Gosh, you say it's free, Pam. So what's this asterisk for? Is there a catch?
Yes, actually I'm glad you mentioned that. I wouldn't say it's a catch, just the cost of having a website.
While I am providing my website building services for free, there is still the cost of publishing a website live on the internet. This is the one cost you'll be responsible for. The cost will vary a bit, depending on what kind of website you're interested in, but I'm all about getting the most bang for a buck, so we'll keep it as budget friendly as possible.


Well can you at least give me a ballpark price? 
Accounting for a little variation, we're looking at your annual cost to be under $120. That averages out to about $10/month. This price includes both your hosting fee and annual domain renewal.


Can you say that in English?
Think of having a website like having a phone.

• The domain is your very own version of www.whoohoo.com and like a phone number, and you have to pay an annual fee to keep your domain. Usually it's about $10/year. 
• Web hosting is like having a calling plan, and you can pay monthly or annually. It costs less overall if you pay annually, of course. This price can vary, but the company I prefer using is less than $120/year. Plus this company uses only wind power for their offices and equipment, and appeals to this Oregon girl. (That would be me. I live in Oregon and am proud to be a dog-loving, recycling, rained-upon treehugger.)

What the heck is a QR code?
This funky little square barcode is cellphone readable and can store any alphanumeric data you can think of, such as website addresses, phone numbers, special messages, coupon codes, email addresses, etc. Here is an example of a QR code:

Create a Scrolling Marquee for Images & Buttons

The other day I was looking for a hit counter and came across an interesting feature. Unrelated, of course, but it piqued my interest and thought I'd share it with you.

It's a scrolling marquee for images like this ( I used images from my sidebar. You can use whatever you want.)











I saw this feature on sister sites: http://www.sweetnsassygirls.com/ and http://barefoot-mommy.blogspot.com/

Not only is controlling clutter an ongoing issue at home, but also on one of my other blogs. I had to find out how they did it. A little research revealed the nuts and bolts of this scrolling feature.

◘ ◘ ◘ ◘ ◘

Would you like to add this to your Blogger blog? Here's a simple tutorial.
Note: Each set of steps shows you how to add one image to your marquee. Repeat these steps for each image you want to add.

In Blogger, go to your Layout tab and click to add new element. Choose Add HTML. When pasting in the code, do not leave any blank spaces between one section of code and another unless instructed to do so.

1. Copy and paste the following code into the box:
<a href="
Paste the URL of the site your image will link to. End it with:
" target="_blank">
This will open the link in a new window so your readers don't lose your page.



2. Copy and paste the following code:
<img alt="
Type in what you want your readers to see if they hover their mouse over the image. You can just type in the name of the site that it links to.



3. Continue by pasting in this code:
" src="
Then paste in the image URL. How do you find it? There are a two different ways you can locate it.

a) In the text box where the site invites you to grab their button, look for code that starts with http:// and ends with .jpg Highlight and copy the entire bit of that code. To make it easier to find, you may want to copy all of the code from the text box and paste it into a notepad document so it's easier to see. In the case of Sweet 'n' Sassy Girls, their image URL is

http://i267.photobucket.com/albums/ii296/strawberyred/sassybuttondots-1.jpg

b) If you right click on the picture, you'll see a menu pop up. One of your options may be to copy image location. If you see that option, click it. That's what you need.



4. Next, copy and paste in this code:
" title="
Type in the name of the site that this image goes to (it can be the same thing used in step 2.)



5. Finish up by copying and pasting this code:
"></a><br/>



Repeat steps 1-5 until all your badges are in place. When you are done, end the whole thing with this code:
</marquee>

◘ ◘ ◘ ◘ ◘

Now, would you like to customize this a little?
The different elements for how your marquee behaves are:

onmouseover="this.stop()"
This stops the marquee from scrolling when you hover your mouse over it. You can delete this code if you don't want it to stop.

onmouseout="this.start()"
This resumes the scrolling when you move your mouse off the marquee.

scrollamount="2"
This is your speed. I can't tell you what number is what speed, but 4 is approximately twice as fast as 2. You can experiment with this, but make sure it's slow enough for people to read as it zooms by.

loop="true"
This makes your marquee scroll endlessly. If you want it to scroll once through the list and stop, change true to false.

direction="up"
This scrolls everything in an upward direction. To scroll down, change the word up to down. If you want it to scroll from right to left, change the word up to left. From left to right, change it to right.

align="center"
This places your marquee in the center of your space. You can change it to left or right if you want it aligned with either margin. For a marquee in the sidebar, my personal preference is to center it.

width="150"
height="300"
You can adjust these to fit them within your space. If the width is more than your sidebar, the images will be cut off, which doesn't look so great. If you're scrolling from side to side, you can change the width and height to fit the space you're using.

For more details on how to customize your marquee, check out this blog post by Kang Rohman.

Did you like this post? How about subscribing in a reader or by Email?

Adding an Etsy Mini to your site

Many, if not most of you have put an Etsy mini on a blog, either your own blog or someone else's. Here's an Etsy mini idea for you to play around with...


One evening when I was fiddling with Etsy, I received a message from SweetSeaJewelry who asked,

"How how how did you do that with the etsy mini? it looks GREAT on your website, but when i tried to do it it didn't work on mine. i have the google apps site... "


She is talking about my use of a giant Etsy Mini on my main website, http://www.passitonplates.com/

Here's a screenshot:



My reply was:

Oh, no bother at all. I built my site with FrontPage, so I just popped in the code...
...I wanted my home page to look like a store and that was the fastest, easiest way I could think to do it. :o)

That was the key. I wanted my website to look like a store and I had been driven to tears trying to configure shopping cart software. Adding Etsy's mini to my site was the fastest, easiest way I could set it up without throwing my computer out the window in frustration.

While SweetSeaJewelry mentioned using Google sites, I tried adding an Etsy mini to a Google site I manage and while I think Google is wonderful, their sites just won't accept the code.

Had you thought of making a big Etsy Mini (should we call it an Etsy Maxi?) as the main crux of a website?

Where else could you put a maxi sized Etsy Mini?

Did you like this post? How about subscribing in a reader or by Email?

Become a blog sleuth...find out where bloggers get their bling

Remember when I told you about My Live Signature? (It's in this blog post.)

I told you I looked into a blogger's code to find out where she got her signature from. Maybe I'm nosy or overly curious, but I like click on a lot of stuff and learn all kinds of interesting things.
And then I share it with you. :o)

(Ok, so there's a little of my dirty laundry. Still friends?)

Here's the secret to looking at the code on any blog (or website):

If you use Firefox, highlight the section you want to look at. Right click your mouse on the highlighted section, and a little menu will pop up. Click on View Selection Source. A new window will open, showing the code of your selected area.

If you use Internet Explorer, it's little trickier. Right click anywhere on the page and a new window will open, showing all the code for the entire web page. It's a little tricky because now you have to look for the code you're interested in. If you're not fluent in web design languages, this can be a daunting task.

To make this a little easier, look again at the web page you're digging into. Find some text near the code you're interested in. For example, in the case of this blog post, if you wanted to find the code for this neat widget (and please ignore the "get Widget" thingy. Widgetbox always makes it easy to get their cool stuff):



You would just need to do a search on the words "Kitty Clock" (Hold down CTRL then hit the F key on your keyboard to bring up a search box.) You should see the code right above the words you searched for. Go ahead and try it. The code would be sandwiched between

cool stuff): and You would just

See it?

Now that you found the code, go to the website that features it. In the case of the clock, you'd go to Widgetbox. When I looked at the code for the signature, I went to MyLiveSignature.com. Sign up (if required,) customize what you like, and add it to your blog.

Now for the ethical stuff that is equally important. If you find some interesting code that you want to use, make sure you are allowed to use it. If it was created specifically for that blog, it's theirs to use and falls under copyright laws. You can't use it. You could always go to widgetbox or other widget sites and look for something similar, or contact the blogger who has the cool widget and ask where they got it. You may have to pay for the code, but if it's that fantastic it might be worth it.

If you find some code that you are allowed to use, give credit where credit is due. Introduce the new widget to your readers in a blog post and publicly thank the blogger or give them credit for finding it first. Include a link to the blog or site where you found the widget. You don't have to disclose how you sleuthed around to find the code, but it's a nice gesture to credit them for finding it for you.

And always, if you found some cool code and added it to your blog, post a comment here with a link so we can all visit and admire your handiwork!

(And remember, all comments are do-follow, so your comment left here supports YOU.)

Did you like this post? How about subscribing in a reader
or by Email?

Well that was easy

Check out the URL for this blog in your address bar. What does it say?

Yep.
It used to be http://pamhawk.blogspot.com but now it's a simple and perfect www.pamhawk.com
Worth every penny of the $10 spent this afternoon to buy my own domain.

Would you like a quick 3-step tutorial on how to get your own domain for your blogger blog?
Required skills:

• You must be able to type the name of the domain you want
• You must have a credit card
• You must be willing to use the credit card

Um, that's pretty much it. Comment here if you want the tutorial and I'll post it.

Favicon Tutorial -Making a little tiny picture thingy

A couple weeks ago, I posted here on this blog, and here on my other blog, a little tutorial on how to find hex codes when you're tweaking the color of your blog template.

In the screen shots used for the tutorial, you can see the Firefox various tabs I had open at the time. I was careful to make sure that the visible items were suitable for world-wide viewing, and didn't think much beyond "Is that private information or not?"

I had a good chuckle when Brad from BradBlogging.com left this comment on the post:
LOL. It's pretty cool seeing your favicon in a tab on a screenshot..
Thanks for visiting Bradblogging.com!

Yeah Brad, that actually is pretty cool. I guess the secret's out about what I read when I post. (I haven't heard from Chris Brogan, yet. Score one for Brad for picking this up first - of course Brad, you have two tabs to Chris' one.)

To my dear readers, if you are wondering what the heck Brad is talking about, the favicon is the little picture thingy that you see on the left side of each tab in the picture below. There's also a favicon in the address bar on the browser in the picture. (Brad's favicon is a bold, dark letter "B")

If you look up at the address bar at the top of your screen right now, you probably see a favicon, too. It could be the orange Blogger "B" or my pink zinnia that I use as my avatar everywhere I go.

Would you like to make one for yourself? It's pretty easy. You can do this.

There are a lot of good tutorials out there, so instead of repeating what other folks have said, I'll just point you toward two that are well-written and not too tech-y.

Clickfire.com
Short and sweet. Easy if you already have a website or hosting to which you can upload your favicon image.

bluejar.com
Here, Sarah mentions using Flickr to host your favicon image.

When you get yours installed, leave a comment here and share your link so we can see your favicon masterpiece.

PS: Hey Brad, when you leave a comment here, would you mind sharing how you found this post? Technorati, Google Alerts, etc? I'd like to use it as an example for a future post.
Thanks!
:o)

Three column blogger template

Many things we learn are out of necessity, not because we have a wish list of things we want to learn, just in case we later find a use for the knowledge. Ok, changing a car tire and first aid are exceptions to this, but many business and online activities are learned on the fly and when the need arises. This is how I learned the basics of HTML, but I am by no means an expert.

For a long time I had been wanting to change the Plate Diaries blog from two to three columns. The layout and organization is a mess and it's a hard blog to read. I finally sat down one day and poked around the internet, looking for a template to try. If you want to look around, your Google search terms for this could be:
blogger template three column

If you are interested in changing your blog template, first copy and paste all the HTML from your existing blog into Notepad (it's a no-frills word processing program on your PC.) Do not use Word because it will change the format and mess up your HTML. Save the document.

Next, open each widget you have on your blog sidebar and copy the HTML into another Notepad document. These may go bye-bye when you change your template and I know you don't want to risk losing all that stuff. Save this document, too.

Third step, while strongly suggested, is not required: start a new blog. Keep it private and out of the search engines, and use it just to mess around with the code and experiment. I've had one for months and every now and then I test something there before putting it on a public blog. This has been a lifesaver for me.

Next, find a template you want to use. I tried several beautiful templates from various "free blogger templates" blogs and got Blogger errors with each one I tried. Giving up on that, I reverted the test blog's template back to Blogger's Minima Stretch, then implemented the code found at this site:
http://tips-for-new-bloggers.blogspot.com/

The easiest way to find the locations mentioned in this tutorial are:
1. Open the above link in a new tab or window.
2. Open your blog's HTML page in a new tab or window.
3. Go back to the site with the code you will copy and hit Ctrl+F to open a search dialog box. Type in a little of the code you are to look for when inserting some new code.
4. Navigate back to your blog's HTML and search.

After spending all morning dinking around, looking for a template that works, and is the right width, there is only one thing I can say:

Perfect.

Finding HTML Colors

Have you ever tried changing the look of your blog or website and wanted to use a very specific color? No matter what program you use, be it a website or blog development software, Blogger or some other blog platform, there is usually a set collection of colors available and that's it.

This was the case when I made a recent tweak to this blog. I was frustrated with my "Thisaway Rose" template loading slowly on my cable connection and knew something had to change.

The little light bulb cam on in my head over my morning coffee today as I realized I should just switch to the "Minima Stretch" template and just change the background color. Duh. Don't know why I didn't think of that before...

So I make the switch and click the pink button to change the background. I wanted the blog to look pretty much the same as before, and when talking to Donna, my Pass It On Plates partner in Wisconsin, I like referring to this blog as "The Pink Blog" and the Plate Diaries as "The White Blog." We have one other blog that we use, just between ourselves, that we call "Projects." It's marked 'private' and we chat back and forth there and post articles, business links that we use, and it's a great place to collaborate. Our "Projects" blog is the subject of another post, though.

Back to colors.The Blogger color choices were way too dark and I don't really understand the Hex Code used. I tried fiddling with the numbers and letters but nothing seemed to change. Enter a Google search on "Hex code." The site December.com was at the top of the list so I checked it out.

Wowie. If you have ever searched for hex codes, this is the place to go.
Mind you, these are only the named cool-pinks. There are other hues, other saturations, and a whole section of un-named colors. I did try some un-named colors and Blogger didn't recognize them, but with thousands of hex codes at my disposal, I was able to find exactly what I was looking for.

.

.