Add a Recent Comments widget

Are you a comments junkie? While totally guilty of not leaving a trail of comments everywhere I go, I LOVE comments on my blog posts.

Here's a way to engage your readers in your blog content and possibly coax more comments from them: add a widget that shows off recent comments to your blog.

It looks like this.
These are the most recent comments from my family blog, The Adventures of Pam & Frank:





Want to add one?
Here's how you can do it in your Blogger Blog:

1. Start a new HTML widget in your sidebar.
2. Copy the code in this text box and paste it into your widget.
   
   <br /><script src="http://www.freewebs.com/filer/blogger/rc.js"></script><br /><br /><script>var a_rc=<br /><br />
   
3. Without adding any spaces, type in the number of comments to show. I have mine set to show the 5 most recent. Remember to type in the number - don't spell it out.
4. Now copy the code in this text box and paste it into your widget.
   
   <br />;var m_rc=false;var n_rc=true;var o_rc=500;</script><br /><br /><script src=""><br /><br />
   
5. Now for the good part. Where are the comments you want to show off? Copy the URL of that blog and paste it here without adding any additional spaces. Don't forget to include the http:// part.
6. Now copy this last section of code in this text box and paste it at the end of your widget.
   
   <br />/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script><br /><br />
   
7. Save. Drag it to the location where you want this nifty widget, then save the layout.
8. Look good? Yay! Not showing up? Let me know here and I'll see what kind of troubleshooting I can do for you.
   
   
   
   
   

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

Button with HTML Code Box Tutorial

&lt;a href="http://passitonplatesblog.blogspot.com/" target="_blank"&gt;&lt;img border="0" alt="Photobucket" src="http://i197.photobucket.com/albums/aa39/PassItOnPlates/Web%20images/3205407818_d1cef2eecc_m.jpg" /&gt;&lt;/a&gt;

Ever stumble across a blog that has something like this in the sidebar on in a blog post? Would you like one for your blog? It's actually pretty easy.

Before starting, I just wanted to make sure you know that if you want the badge to point to your website, blog, or etsy store, you cannot use your Flickr account. Sure, you could use Flickr to edit the photo and add words or whatever, but you need to upload it to Photobucket.

If you're not too familiar with Photobucket, here's the skinny - it's kinda sorta like Flickr, but with different TOS. Photobucket allows photos hosted there to be used as links to other sites outside of Photobucket. Photos hosted on Flickr have to link back to the original photo on the Flickr site.

1. Upload a picture to Photobucket.

2. When the picture is uploaded, click to edit the photo and resize it to either 125x125 or 150x150. Save.

3. Open another tab or window and go to your blog. Start a new post. If you have a private blog for testing things, use that one. (If you don't have a private blog for messing around and testing things, I recommend starting one. But more on that later.)

4. Go back to Photobucket and hover your mouse over the picture and you'll see a menu appear under the picture. Click the code where it says HTML Code. It should automatically copy for you.


(Yes, I realize how ironic it is that this picture is hosted with Flickr. I prefer blogging from Flickr. Actually, I just really really like Flickr.)

5. Go back to your blog and paste Photobucket HTML Code that you just copied. It should look something like this:

<a href="http://www.pamhawk.com" target="_blank"><img src="http://i197.photobucket.com/albums/aa39/PassItOnPlates/giveawaybadgefeb1-7-1.jpg" border="0" alt="Example Badge"></a>

6. Change URL to point to you. This is the yellow highlighted text in the example above. I have changed it to my own URL.

7. Change alt to your blog or website title. This is the turquoise highlighted text in the example above.

8. Below this, add the following code.

<textarea name="textarea" cols="30" rows="5" wrap="VIRTUAL">

9. Below this, copy and paste another copy of the photobucket code that you edited above.

10. Below that, copy the following code.

/textarea

Make sense? Your completed code should look something like this. (In the box below.)

<a href="http://www.pamhawk.com" target="_blank"><img src="http://i197.photobucket.com/albums/aa39/PassItOnPlates/giveawaybadgefeb1-7-1.jpg" border="0" alt="Example Badge"></a>

<textarea name="textarea" cols="40" rows="4" wrap="VIRTUAL">


<a href="http://www.pamhawk.com" target="_blank"><img src="http://i197.photobucket.com/albums/aa39/PassItOnPlates/giveawaybadgefeb1-7-1.jpg" border="0" alt="Example Badge"></a>
</textarea>

It's ok to leave the line breaks in there. In fact, if you take out the line breaks, your text box will appear next to the badge instead of under it.
Here's the code with the line breaks:

&lt;a href="http://www.pamhawk.com" target="_blank"&gt;&lt;img src="http://i197.photobucket.com/albums/aa39/PassItOnPlates/giveawaybadgefeb1-7-1.jpg" border="0" alt="Example Badge" /&gt;&lt;/a&gt;&lt;br /&gt; &lt;br /&gt; &lt;br /&gt;

Here's the code with no line breaks:

&lt;a href="http://www.pamhawk.com" target="_blank"&gt;&lt;img src="http://i197.photobucket.com/albums/aa39/PassItOnPlates/giveawaybadgefeb1-7-1.jpg" border="0" alt="Example Badge" /&gt;&lt;/a&gt;&lt;br /&gt; &lt;br /&gt; &lt;br /&gt;

Now test it.

If this blog post is in a private blog you use for testing, just publish it.

If you opened a blog post in your regular blog, click on Post Options (above the orange Publish Post button) and back date it (to maybe a month ago) before publishing it. This way you can test it without interfering with your current blog posts and subscribed readers.

Open a new tab or window and open the same blog where you are currently working. Open another new post.

Navigate to the published post and click on the code in the box. Paste the code into the new blog post. Publish (or back date and publish.)

Look at the published new post. It should be just your badge without the text box.

Good? Yay! Delete this second blog post (with the badge only) and go to the first blog post where you created this. Save it as a draft for future needs. Copy the code and paste it wherever you want.

Not good? Examine the steps above and see if something was overlooked. You may have to "read" the HTML word by word to see if something's missing or incorrect.

...One last request? Post your blog URL here in a comment so we can all admire your handiwork.























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

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

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?

How to add a signature to the bottom of your post

A little while ago I introduced you to MyLiveSignature.com where you can create your own signature to add to the bottom of your blog posts.

Today I'll share a little tutorial on how to add your signature to your blog posts. This tutorial is for Blogger blogs, since that's what I'm familiar with. If you use Wordpress, TypePad, or another platform, you may know of some resources for you to tweak the appearance of your blogs. I'm sorry I'm not able to help you here.

First, go to MyLiveSignature.com (open it in a new tab or window) and create a signature that you want to use. Continue to the end where you get the HTML code for your new signature. Select all the code and copy it. (You can click your mouse on the HTML then on the keyboard hold down CRTL while hitting the A to select all, then hold down CTRL while hitting the C to Copy.)

Next, open your blog ...again in a new tab or window, so you can keep your signature and this tutorial visible, just in case you need to refer back to either one.

In your blog, click Customize in the upper right hand corner, then click on the Settings tab.

Now click Formatting. (It should be under the three tabs, third link from the left.)

Scroll down until you see Post Template.

Paste the code from the My Live Signature into the Post Template box.
If you want a line of space between your blog post and the signature, add </br> in front of the code you just pasted in. For each extra line you want, add one more </br>.

Save settings, and you're done. Every post you make from this point forward will have your signature added to the bottom.

If you want to test it, go ahead and write a little blog post to show off your new signature to all your readers. And if you do that, leave a comment here with a link to your post so we canall swing by and check it out ...and leave you our congrats in your comments!

I still have to tell you how to find out where other bloggers get their neat widgets and gizmos from. Stay tuned for that little tidbit...

(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?

One more little HTML lesson tutorial

You know how to make bold and italic text, right?
Those are just a quick little <b>before and a</b> after for bold, and a little <i>before and a</i> after for italic.

How about a strike out? My clever daughter just showed this one to me.
Just type in this text: <strike>strike</strike>

Want to see it in use?
Sure you do. Besides, it'll make you feel really good about your well behaved kids.

While typing this, my exuberant 12 year old nearly 13 year old (and old enough to know better) was sitting on the back of the couch, reading over my shoulder as I typed. Something brushed my right ear and there was a huge WHUMP! and a shriek as she fell over backwards, landing on the cushion of the couch.

Turns out my darling daring daughter nearly kicked me in the head as she lost her balance. I tried to scold her and she kept whooping and yelling, "That was fun!!"

She agreed to wait until I'm done before she tries again. She needs a ride to a friend's house later this evening.

AnotherQuick-n-EasyHTMLTutorial

Check it out - line breaks in the blog title!

Want in on the secret? It's four little characters of html code that indicates a line break. It's so easy.

Here's the code: <br>
The BR means "Break"

When I typed in the title to this blog post, it looked like this:
Another<br>Quick-n-Easy<br>HTML<br>Tutorial

Easy, peasy.
Now off you go, to let all hell <br> loose with your use of HTML.

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.

.

.