If you’ve ever wondered who visits your blog, there’s a fun site you can use to see what your readers are interested in — and what they like most about your site. By placing the invisible code on your site, you’ll get answers to questions like:

• How many people visited my blog today?
• Who links to my blog?
• Does my blog show up in search engines?
• What are my most popular posts?
• Do my readers click on the links I recommend?

And many more. Here’s a quick peek into Statcounter, and what I like most about it!

Summary

How many people visited my blog today? How many were brand new visitors? How many had been here before?

When I first login to Statcounter, I start off by checking the Summary. This lets me know how many people have visited my blog so far today, along with a comparison chart for the past seven (7) days.  I can see the number of unique visitors, the number of pages they viewed, and whether or not they were a returning reader.

Popular Pages

What are people looking at on my blog? What are my most popular posts?

Another fun stat to check is Popular Pages. It’s important to note that Statcounter monitors your readers’ behavior in real-time, for the last 500 readers to your blog. This page will tell you what is the most popular post on your blog right now. It may be different if you check back tomorrow, or even later in the day!

Something neat you can do from Popular Pages is click on the little magnifying glass beside one of your posts, then click on Came From in the blue box that appears next. Like the image above, this will show you how your readers are arriving at this particular post. As you can see from the example above, my most popular post gets a lot of traffic from Pinterest, with some hits from Facebook, Stumble Upon, and Google as well.

Came From

How are people finding my blog? Who’s linking to my blog?

Speaking of Came From — this is probably my most favorite feature of Statcounter. Click on Came From in the menu list on the left side, and you’ll see a list of your top referring links. This is how people are finding your blog — you can see who’s linking to and talking about your blog!

Keyword Analysis

Does my blog show up in search engines? What do people search for that leads them to my blog?

Another way readers can find your blog is through search engines like Google, Yahoo, and Bing. By the way, if I was writing this post 15 years ago, I would’ve said “search engines like HotBot, Lycos, and DogPile“. Wonder what the search engines will be 15 years from now! Anyway, Keyword Analysis will show you what search terms readers are using the find your site. Some of them can be quite entertaining! Keyword Analysis sorts the search terms by the most popular terms.

You can also click on Recent Keyword Activity to see a list of search latest search terms used to find your site — with real-time accuracy. What’s neat about this page is you can see if people found your site from a certain search engine, if it was an image search, and how high your blog showed up in the results list. For example, check out the first two results in the screenshot above. This person searched for “30 day shred before and after” on Google and my blog was the 14th result that appeared for them. The next reader searched for “cookie dough oreo brownie” on Google, and my blog was the first result that appeared for them.

Exit Links

Do my readers click on the sites I link to? Are they clicking on links to blogs or products I recommend?

If you’ve shared a link on your blog or in a post, you can view your Exit Link stats to tell if people actually clicked on it. Again, since Statcounter monitors your readers in real-time, this will show what people are clicking on right now. For example, this might be extremely helpful to check if you shared a round-up of links. This will show you the most popular links that people are clicking on, giving you a better idea of what your readers are interested in.

Visitor Paths

What do people do on my blog? What pages do they look at? What links do they click on?

Visitor Paths — now this is a fun one if you’ve ever wondered what people do on your blog! Do they read one page and leave? Do they click around and keep reading? What do they click on? Click on Visitor Paths and it will show you, in order of your most recent visitor, exactly what they did and what they looked at on your blog. For example, the reader above came from a link on Facebook. They landed at the Ultimate Layered Cookie Dough Oreo Brownies page, and from there they kept on clicking! They looked at cookie dough cupcakes, photos of Louie, Savannah, and Mexico. Fun!

Click on the magnifying glass beside a reader on the Visitor Paths page, and you’ll see even more information about this particular reader, like how many times they’ve visited your blog before and how long they stayed on your blog for this visit.

Install

The best part about Statcounter is that it’s super easy to install, and you’ll start seeing your stats right away. When you sign up for an account, all you have to do is click on the blogging platform you have (Blogger, Tumblr, WordPress, etc) and it will walk you through how to install the code with a step-by-step photo tutorial.

Happy Statcounting! :)

© kevinandamanda.com, 2012. | Leave a comment! | Stumble | Share on Twitter | Share on Facebook

If you scroll down to the bottom of any post here on Kevin & Amanda, you’ll see a “Pin It” button that you can click on to pin the image of your choice onto Pinterest. Adding a “Pin It” button of your own is so ridiculously simple to do! Here’s a quick tutorial that will show you how to automatically add a “Pin It” button of your own down at the bottom of every post on your blog, for Blogger, Blogspot, and self-hosted WordPress blogs.

Choose an Image

First you’ll need to choose the image you want for your “Pin It” button. Here’s the one I use. Feel free to right-click and save it to use for your button, too.

You can also do a Google Image search for Pinterest Icon for more button options.

After selecting your image, upload it somewhere so it will have its own URL, like Flickr or Photobucket. Here is an example URL:

http://i238.photobucket.com/albums/ff17/kevinandamanda/pinit.gif

Note: Don’t use the URL above — there won’t be enough bandwidth for everyone and you’ll get a red X instead of the button. Bummer.

The Code

Here’s the code you’ll use to place the “Pin It” button on your blog.

<a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());"><img alt="Pin It!" style='border: none;' src="INSERT IMAGE URL HERE"/></a>

Paste this code onto your blog (I’ll show you where below), then replace the INSERT IMAGE URL HERE with the URL for your button.

Note: Be sure to place this exact code on your blog, or else it won’t work. You’ll also want to delete the “Read More” link that will appear underneath the code when you paste it.

Where to Paste (Blogger/Blogspot)

From your Blogspot Dashboard, click on the  Design tab, then Edit HTML. Click the Expand Widget Templates checkbox.

Use CTRL-F to search for: <div class='post-footer'>. Paste the code right above that.

That’s it! Save and view your blog!

Note: If you need extra spacing between your post and the “Pin It” button, just add
<br /> above the “Pin It” button code. You can add as many as you want, above or below the code, for as much space as you need.

Where to Paste (WordPress)

For a self-hosted WordPress blog, navigate to your WordPress Dashboard, look for the Appearance heading, then click on Editor. From there, select Single Post (single.php).

Use CTRL-F to search for php the_content. It might look something like this:
<?php the_content(‘Read more &raquo;’); ?>. Paste the code below that. Save and view your blog!

Note: If you need extra spacing between your post and the “Pin It” button, just add
<br /> above the “Pin It” button code. You can add as many as you want, above or below the code, for as much space as you need.

Troubleshooting

What if the image doesn’t appear? What if I only see a red X? What if it only shows text and not the image?

Double check and make sure the Image URL is correct. It will just show text if there is something wrong with the image or the image URL. For Photobucket, use the Direct Link as your URL.

To test: Copy and paste the Image URL into a new browser window and confirm that the image appears, and just the image — not a webpage with the image on it. If just the image appears, that is the correct Image URL.

Good luck and Happy Pinning!

Find me on Pinterest: http://pinterest.com/kevinandamanda/

© kevinandamanda.com, 2012. | Leave a comment! | Stumble | Share on Twitter | Share on Facebook

Now that you can easily add multiple pages to your Blogger or Blogspot blog, you might have wondered if you can have a different background for each page, thus giving your pages their own unique look. Good news! You can! And this tutorial will show you how to do it in just one easy step. This tutorial was shared with me by Carolyn M. @ Pat Loves Carolyn. Thanks so much for the cool tip, Carolyn!! :)

{ demo }

See this tutorial in action on my Blogger Test Blog. Click on the Home and Recipes links up in the top navigation bar and see how they have different backgrounds! :)

Ready to try it yourself? First you’ll need pages on your blog. Here’s a super quick tutorial to get you all set up. It also includes tons of page ideas to get you started! :)

Next you’ll need a background. Here are my top 4 favorite free background sites:

Shabby Blogs
The Cutest Blog on the Block
Allie Brown’s Layouts
My Style Backgrounds

Or you can make your own personalized background using my tutorial right here! :)

{ tutorial }

From your Blogger Dashboard, click on Design, then Edit HTML. Look in that box of code and scroll down until you see </head>

(Quick Tip: Click CTRL-F to search for </head> to easily find it in all that code)

Just above that, copy and paste this:

<b:if cond='data:blog.url == &quot;http://YOURBLOG.blogspot.com/p/PAGE.html&quot;'>
<style>
body {
background-image: url(http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG);background-position: center; background-repeat:repeat; background-attachment: fixed;
}
</style>
</b:if>

Two things to change:

1. http://YOURBLOG.blogspot.com/p/PAGE.html

Change this to your page’s link – the link to your new blog page where you want the custom background to appear. This is the address up at the top of the screen in the address bar.

2. http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG

Change this to the link to your background image. If you are using Photobucket to host your background, it’s the Direct Link.

Click SAVE TEMPLATE and that’s it!! You’re done!!

Note: As always, be careful- one tiny little wrong space, quotation mark, or typo in the code can cause the whole thing not to work, so if it’s not working for you, double and triple check your work for typos! :) Make sure your code looks exactly like mine, except with your page and background links! :)

If you got it working on your blog, leave me a link! I’d love to see it! :)

Thanks for looking! :)

© kevinandamanda.com, 2010. | Leave a comment! | Stumble | Share on Twitter | Share on Facebook

If you have a blog, you may be wondering how to add your signature after every post on your Blogger or Blogspot blog. This simple tutorial will show you how to do it in just a few easy steps! :) This method of adding a signature will add your signature after *every* post- even posts you’ve already written! This is not like the “template method” of adding a signature, which will only add your signature on the new posts that you make- and not the old ones. Oh and stay tuned ’til the end of the post- there’s also a tutorial on how to add a post divider after your blog posts! :)

So, to add a signature, first, you’ll need to create a signature image like the one above (click here for a tutorial on how to do that) and upload it somewhere like Photobucket, TinyPic, Flickr, etc. Then…

1. Go to your Blogger Dashboard and click on Layout then Edit HTML.

2. Check the Expand Widget Templates box.

3. Click CTRL-F and copy and paste the line below in the search box to search for it in your code.

post-footer-line post-footer-line-1

It may say :

<p class='post-footer-line post-footer-line-1>

OR

<div class='post-footer-line post-footer-line-1'>

Or something similar- either is fine. Just look for that line.

4. Under that line, paste this code and change IMAGE URL to the url address of your signature image (it’s the Direct Link on Photobucket).

<img src='IMAGE URL' style='border: none; background: transparent;' /><br/>

5. Preview it and Save it! You’re done!

If your blog background isn’t white…

This tutorial doesn’t cover the making of the actual signature, but I will give this tip for blogs that don’t have white backgrounds- here’s how to make a signature so it doesn’t have a white background around it and it will blend in with any background! :)

If you use Photoshop, when you create a new image, make sure the “Background Contents” says Transparent. Then create your signature, and when saving, go to File > Save for Web and Devices.

Make sure you save the file as a PNG-24 and that Transparency is checked. The white and grey checkerboard must be around your signature for it to work! :) If you save it like this, then no matter what background you put your signature on, it will blend in (and not have a white background around it).

Want to know how to add a post divider after your blog posts?

Follow this super-easy, thorough, and beginner-friendly tutorial from Megan at Shabby Blogs!

While you’re there, take a look around! :) Don’t forget to check out her *awesome* shabby blog backgrounds and shabby blog extras!! :)

Here’s one of the new backgrounds she just added. Wouldn’t this make the *cutest* recipe blog background *ever*??? :)

If you’ve been thinking about starting a recipe blog, now is the time to do it!! And gosh darn it, send me the link to it ASAP!!! ;)

Thanks for looking!! :)

© kevinandamanda.com, 2009. | Leave a comment! | Stumble | Share on Twitter | Share on Facebook

Okok. So you want to change your *entire* posts to a funky font. Well, it can be done… Sort of.. I can’t figure out an easy way to change the font of your existing posts, but it can be done for any new posts you write.

click here to see a live demo of what this tutorial does

First- the boring stuff. Disclaimers. Warnings. Etc.

1. This tutorial is a continuation of my How To Use a Cute Font for Your Blogger Post Titles, so you’ll have to do all the stuff in that tutorial before this one will work. :)
2. I don’t really recommend writing every single post, all the time, the entire thing, in a custom font.
3. sIFR is best used for changing titles and headers, not entire blocks of text.
4. It will make your page load slower.
5. It will make your page be all jumpy and crazy-looking as it’s loading.
6. It won’t look perfect- you can only use one font color/size for everything you write and there may be some extra spacing/padding at the bottom, but there’s no that I know of to get rid of it (see what I mean about the padding on the demo).
7. I kinda like plain, easy to read fonts for the main content of a blog anyway.
8. If you created an account with Geocities, be sure and read this!

So! If that doesn’t bother you and you’re totally ok with all of that and you still really want to change the font of your entire blog posts… Then this tutorial is for you. :)

First, if you want to use a second font, different from your post titles for your main blog posts… Go to your blogger-sifr.js file and find the lines that look something like this:

var kevinandamanda = {
src: 'http://username.webs.com/fontname.swf'
};
sIFR.activate(kevinandamanda);

Copy and paste a duplicate of that right underneath it.

1. Convert and upload a new SWF font file, then replace the URL for the current SWF file with the URL to the new font.

2. Change the two instances of kevinandamanda to blogpostfont.

So when you’re done, it may look something like this:

var kevinandamanda = {
src: 'http://username.webs.com/fontname.swf'
};
sIFR.activate(kevinandamanda);

var blogpostfont = {
src: 'http://username.webs.com/anotherfont.swf'
};
sIFR.activate(blogpostfont);

Next, paste this down at the bottom of your blogger-sifr.js file:

sIFR.replace(blogpostfont, {
selector: '#main-wrapper h3',
fitExactly: true,
tuneHeight: -5,
css: ['.sIFR-root { color: #000000; font-size: 24px; font-weight: normal; }'
,'a { text-decoration: none; }'
,'a:link { color: #000000; }'
,'a:hover { color: #000000; }'
],
wmode: 'transparent',
ratios: [6, 1.93, 10, 1.92, 13, 1.86, 17, 1.82, 21, 1.8, 29, 1.79, 32, 1.78, 33, 1.77, 36, 1.78, 43, 1.77, 44, 1.76, 47, 1.77, 70, 1.76, 71, 1.75, 74, 1.76, 75, 1.75, 76, 1.76, 1.75]
});

Now if you didn’t use a second font and just want to use the same font you’re using for your blog post titles, then you’ll need to change blogpostfont back to kevinandamanda.

You can still play around with the font size and color.

Save the blogger-sifr.js file when you’re done customizing.

Next, to get this to show up on your blog: Write a new post and  switch over to the Edit Html tab.

Wrap any text that you want to appear in your custom font with <h3> tags, so it might look something like this:

<h3>This text will be converted to a cute font!</h3>
This text will appear in the default blogger font.

That’s it! :)

click here to see a live demo

I will try and answer questions in the comments. (Please leave a link to your blog, or send me an invite if it’s private.)

If you got this to work on your blog, please post a link to your blog here so others can see an example! :)

If you found this tutorial helpful, I’d love it if you put one of my blog buttons on your blog! :)

© kevinandamanda.com, 2009. | Leave a comment! | Stumble | Share on Twitter | Share on Facebook

Important Update for those who changed their blog fonts and used Geocities! I just found (a little over a week after I wrote my tutorial, what timing, huh? :p) that Geocities is closing and will be terminating all of their accounts later this year. This means that if you still have any of your font-changing files hosted at Geocities, they will be deleted and the custom fonts on your blog will stop working. But don’t worry! I’ve found a new place (Webs.com) where you can upload your files. (Now don’t go closing on me next week, Webs!)

Basically, here’s what you’ll need to do:

1. Create a Webs.com account (Use Advanced HTML Mode)

2. Save the sifr.css, sifr.js, blogger-sifr.js and any SWF files that are currently in your Geocities account and upload them to your Webs.com account

3. Upload a new file, index.htm to your Webs.com account (right click and chose Save As to download the file)

4. Go to the Edit HTML section of your Blogger Dashboard and find the previous Geocities code you pasted. Delete all that and replace it with this:

<link href='http://username.webs.com/sifr.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://username.webs.com/sifr.js' type='text/javascript'/>
<script src='http://username.webs.com/blogger-sifr.js' type='text/javascript'/>

Where username is your Webs.com site name.

After that your fonts should be functioning just as before. If for some reason it stops working, check and make sure all the files uploaded correctly to your new Webs.com account, and then make sure when you deleted the previous code / pasted the new code in your Blogger Dashboard that there were no typos, you didn’t miss anything, etc. If it worked on Geocities, it will work on Webs.com! :)

*I mentioned that you will have to upload a new file, index.htm. Webs.com will delete all accounts that don’t change their index.htm file within 15 days of opening an account, so to be safe, just upload the one I have provided for you. :) You can also view that file to get some extra tips and tricks for editing your blogger-sifr.js file.

If you need more in-depth instructions, I have updated the tutorial with pictures to reflect the Webs.com changes.

Ok, enough about that. :D

Thank you *sooooo* much to everyone who added a kevinandamanda button to your blog! :) I am so grateful for all your support! I went and looked at every single one of your blogs this week and all of your blogs are totally awesome looking and I am honored that you would put my button up there! :D

Now we have a winner of the $25 gift certificate to SuzyQ Scraps’s store at Enchanted Studio Scraps!!

Congratulations to #31 Annette Bowers! :)

The 3rd link did it! :) Annette, the Birthday Calendar on your blog is SO cute!!! :)

And with that- I’m going to take a long, hot bath. ahhhh. This morning Kevin and I decided to take the puppies on a spontaneous hike up to Laurel Falls in Dayton, TN.

We had a blast (especially Miley & Howie) and it was really beautiful up there. It was a relatively short hike (2.5 miles to the falls), but the last mile or so was straight. up. I mean, really. I felt the burn. :p I haven’t moved since we got in. Hopefully I’ll make it to the tub.

© kevinandamanda.com, 2009. | Leave a comment! | Stumble | Share on Twitter | Share on Facebook

Hey! So if you’re a fan of kevinandamanda.com, or you’ve found any of the recent blog makeover tutorials helpful, or you really like the free fonts and recipes or whatever else it is I post about around here… :D And if you wanna spread the word or you’re wondering how you can show me the love in return… ;)

I have some blog buttons for you! :) Just use the Grab Me code below to show these off on your blog. :D

<center><a href="http://www.kevinandamanda.com"><img src="http://kevinandamanda.com/buttons/kevinandamanda.jpg" border="0" alt="Fan of kevinandamanda.com! Free Fonts. Recipes. Scrapbooking. Photography. Blog Design. Tutorials. Giveaway. Everything you're into!" /></a></center>

<center><a href="http://www.kevinandamanda.com/recipes/"><img src="http://kevinandamanda.com/buttons/recipes.jpg" border="0" alt="What's for Dinner? Try these delicious recipes you'll want to add to your dinner rotation. kevinandamanda.com/recipes" /></a></center>

<center><a href="http://www.kevinandamanda.com/fonts/fontsforpeas/"><IMG SRC="http://kevinandamanda.com/buttons/freehandwritingfonts.jpg" border="0" alt="I get the cutest handwriting fonts at Fonts for Peas! kevinandamanda.com/fonts"></a></center>

<center><a href="http://www.kevinandamanda.com/fonts"><IMG SRC="http://kevinandamanda.com/buttons/fsf.jpg" border="0" alt="I get the cutest fonts from Free Scrapbook Fonts! kevinandamanda.com/fonts"></a></center>

Need more specifics?

Well, if you have a Blogger/Blogspot blog, just go to your Dashboard, then Layout, then Page Elements and click on Add a Gadget.

Click on HTML/JavaScript.

The Configure HTML/JavaScript screen will pop up. In the title, you can name it anything you want (like “I love these sites!” or “My Favorite Blogs”) or you can just leave it blank if you want. :) In the Content box, copy and paste the code from the blue boxes under the buttons above.

If you’d like to display more than one button, just put this between each code:

<br>

<br> means Break, or Line Break and it’ll add a line between each button. If you want more space, just add more breaks! :) (I added 2)

When you’re done, don’t forget to Save! :)

Thanks so much for all your support! :)

© kevinandamanda.com, 2009. | Leave a comment! | Stumble | Share on Twitter | Share on Facebook

Are there any fellow font addicts in the house? :) Have you ever wanted to use fonts to add a cute, personalized look to your blog? Have you seen blogs with cute fonts for their titles, dates, or sidebar headers and thought, “I want that!”? Have you’ve already tried to do it, only to discover if someone else doesn’t have the font installed, they won’t see it?

If you answered yes to any of those questions, then I have good news for you my friend! This is a tutorial on how to use your own, custom fonts on your Blogger/Blogspot blogs. You can change your post title font, sidebar titles font, and even the date font. And even if the other person doesn’t have the font installed, they’ll still be able to see whatever font you chose.

{ click image to see this working on Blogger }

{ CLICK HERE to continue reading the tutorial !!! }

© kevinandamanda.com, 2009. | Leave a comment! | Stumble | Share on Twitter | Share on Facebook

As ya’ll may have noticed from my constantly changing blog themes, I’m a background making maniac. Like to hear how I do it?

The Goodies!

I don’t want to do all the work, I just wanna download the background!!

{ get it here }

I took one look at the tutorial and there’s no way I’m gonna read all that! Just gimme the template, I’ll figure it out myself!

{ download the full PSD file with all the layers }

Now if you’re brave enough…

click here to continue reading the tutorial…

© kevinandamanda.com, 2009. | Leave a comment! | Stumble | Share on Twitter | Share on Facebook