Sunday, December 29, 2013

Google Adsense Penalty - How it Cut My Blog Traffic Nearly in Half

Let me start by saying that I am a big fan of Google. This post is by no means a Google bashing or rant about their products and services. I use a lot of the Google products for some very productive work - including Blogger which I do promote significantly. Additionally, I know some of the Google employees and have visited their campus. I believe Google is one of the most exciting places to work in America today.

However, the background to this post is that I felt that there might be some benefit to getting some small advertising revenue utilizing Google Adsense with this blog. Considering my traffic was running nearly 1000 visits a day this seemed like a good option based on the content and history of this blog.

I've used Adsense for quite a few years now in my earlier web work and have found it to be beneficial for high volume web pages. At one point some years ago I was able to make $10-$50 a day in revenue - that was a very unique case due to a popular surge online for a specific topic. In this case I was expecting about $1 a day since advertising tied to blogging is not a very competitive space. Ads such as hosting centers or blogger tools don't drive significant payout revenue as do some of these top paying Adsense keywords.

Some people make a living on Adsense revenue but it takes some significant savvy with deep traffic knowledge to do that. Others try to scam Google by building false links back to fake sites that have the high paying keywords just smattered throughout the site to generate profits. This aggravates Google and gives honest online workers a bad name.

Adsense Penalty

On December 16th I decided to implement Adsense on Blogger Tips Pro having not paid much attention to what was going on with it in the last two years. Within one day I dropped from 943 visits to 757 - not really much concern since I do get traffic dips. By day 2 I was down to 682 visits falling down to 534 by day 4. That is when the alarm sounded for me!!

What I hadn't realized was that as a result of the Adsense scammers, Google has been been penalizing web site search rankings based on their usage of Adsense to try and remove false content sites from the search results that rolled out in 2012. However, the impact was high as noted by Aaron Wall of Seobook.

I really didn't think that I had a lot of ads above the fold but felt that my traffic was much more important that a few dollars a month in revenue. I removed the ads on December 24th. But, the real question is just how much my traffic will be hurt from this point on when I went from a growing 900-1000 visits a day now down to 600-700 a day as you can see here:

Traffic dropping due to Google Adsense penalty

Clearly, the Google Adsense penalty is real and can hurt your traffic. Don't believe me?  Read this statement and take a look at Google Page Layout Algorithm & Penalty.

If anyone else has experienced this effect I would love to hear from you - especially if you were able to revive the traffic back either by ad placement or removing Adsense all together. Also, if you're from Google please chime in - I think all of my readers would like to know more.

Posted By my pwiki11:38 AM

Tuesday, December 10, 2013

Adding Related Posts to Blogger Blogs

Adding related links within Blogger
NOTE: There has been a change in Blogger and LinkWithin. A number of users have found that LinkWithin is not working for them. Be aware you might find some issues. If you find you are having the issue, select Other for your Platform and manually add the script to a HTML Widget. You've probably seen a number of blogs that have related internal blog posts tagged at the end with inter-linking across the site. It's a very nice feature that has been made even easier by a online utility called LinkWithin.com.

The steps to adding this feature are so simple that it only takes a few minutes to get a great looking extra look-and-feel without much effort. Start by navigating to LinkWithin.com. Right away you'll see the starting point by entering your information into the widget form on the main page like this:

How to add related posts within Blogger

As you can see all I did was enter my email, link address, Blogger as the platform and 4 stories. From there click the 'Get Widget' button to continue. You'll see a dialog that looks like this:

Installing Blogger widgets

Click the Install Widget link that will open Blogger into a new window. You'll see the Blogger dialog pop up that prompts you for a blog name and widget title. Be sure to select the right blog if you have a number of them. You can also add the widget title (but I chose to leave it blank):

Adding the LinkWithin widget to Blogger
Just click 'Add Widget' to add the related posts to your blog posts. What happens next is that LinkWithin will add an HTML widget to your Layout that will automatically add the related posts to all of your blog posts. You'll see it in your main blog Layout menu page like this:

Widgets added to layout

The widget will be an HTML/Javascript most likely added to the right side of your layout. I've only tried this on the standard static Blogger templates and don't know if this works with the Dynamic templates. However, I think it should work.

There's nothing else to add!! You're blog posts will now have related posts at the bottom of each one. You can see the example right after this post. Enjoy!!

Posted By my pwiki7:53 PM

Wednesday, July 17, 2013

How to Create a Favicon for Blogger

Google search icon for favicon
Copyright 2012, Google, Inc.
Have you ever asked 'what is that little icon in the address bar?' or 'what is the little image next to the url called?' I would hazard to guess that asking someone who has worked online probably never bothered to learn what the word 'favicon' means (though, guessing that it meant 'favorite icon' wouldn't be too tough to figure out). First released in 1999 in Internet Explorer 5, the World Wide Web Consortium adopted it soon after.

Creating favicons for Blogger is pretty easy these days and can be done in literally minutes. The hard part is trying to map your logo or symbol into such small dimensions. And, to add to that, the expansion of icons of larger sizes has exploded over the last few years with mobility and the evolution of browsers.

Overall, however, it is a simple task at hand with only the need of a paint program (with a supplement - possibly) and a great online tool called Iconifier. These will allow you to create favicons and icons for almost all browsers and devices. If you're really interested in the history and aspects of the favicon you can jump over to Jonathan T. Neal's very comprehensive article called Understand the Favicon.

Here we'll just be concerned for favicons for Blogger. I'll walk you through some of the key considerations when designing your own with an emphasis on using simplicity as your guide (more creative folks who have deeper digital artistic skills can go much deeper).

Step 1: Draw Your Favicon Template

The example I'm going to use here is to attempt to simulate (only as a sample, Google team - don't sue me!) the Google search favicon. It's a very simple design of a blue, rounded rectangle with a Times lower case 'g' in the middle as you can see at the beginning of my post.

Our goal will be to create a similar graphic that mimics this icon that we'll then convert into a favicon. Your first step is to open a paint program and set your canvas to 144 by 144 pixels with a clear or white background. As a Windows user you can simply use Paint to set the Image/Attributes (or if using Windows 7 and above set the Home/Resize) to pixel settings of 144x144.

Why 144x144? If you read Jonathan's article you'll see that IE 10 will need this size in the future.

Next let's just draw a reddish, rounded rectangle without a border like this (be sure to save your file in PNG format for now):

Favicon background rounded rectangle for Blogger
Pretty simple at this point - your background is ready. Next, let's draw a large Times New Roman lower case letter in this background using nearly white (set your color to as close to white as possible but not fully white - RGB value of #FEFEFE or 254, 254, 254).  I'll use the letter 'y' as my example.

I set the text size to about 110 pixels and then drew the y on the background like so:

The first draft of an icon image for Blogger

Perfect! Our first icon logo is just about ready for IE 10 Metro!

Step 2: Setting the Border Transparency for the Favicon Template

The next step is to make a small adjustment on your icon. Now, if you have a paint program that can set the white border (which you can't see here) around the red template to a transparency, then go ahead and jump to Step 3. For all others we'll use the online tool called LunaPic I found in my earlier articles to set the transparency.

By having no transparency I mean that the white border still shows if you paste it onto another color like so:

Blogger icon without transparency set
You can still see the white border - if that had been set to be transparent you would not have seen that border when pasted and the black would have shown through as if the border was transparent. So, your next step is to upload your image into LunaPic. Simply choose the 'Upload' menu item and find the 'Browse' button down in the lower left of the screen from your LunaPic home page to get your image ready for Editing:

Upload your template image

Now, just press the 'Upload Now!' button to load your image onto the screen. To set the favicon transparency just choose the 'Edit' menu item - 'Transparent' command like this:

LunaPic transparency menu setting

Carefully use your mouse to click on any part of the white border to set it to be Transparent. You should see a faint checkered border now in LunaPic as I've shown with the red arrow here:

Setting the transparency color

If you don't see it then try it again until you're sure the transparency is set. The letter 'y' in the middle should not show the checkered pattern since we set its color to be slightly off-white.

You're now ready to save your modified image back to your system by selecting 'File' / 'Save Image' in LunaPic like this:
LunaPic save image

Be sure to select the 'Save as PNG' option when you're doing this. The image will have a new name now on your PC that you can now utilize as the core image for your favicon:


You're now ready to convert your base image into all icon formats for Blogger and other applications.

Step 3: Converting Your Blogger Favicon Template

The next step for a Blogger favicon is to convert this image to the standard 16x16 pixel image you see on almost all modern browsers in the URL bar. There are quite a few free icon generators out there today but I prefer using Iconifier because it generates all possible sizes from browsers to tablet icons.

Simply go to Iconifier.net to bring up the main screen. All you need to do is select your image from Step 2 from your system and press the 'Iconify' button like this:

Using iconifier for files

After a few seconds all of the necessary file sizes will be created for you as you can see here:

Creating the favicon

The file you're most interested in for Blogger is the one I've circled entitled 'favicon.ico' - this will be the one you'll use for blogger. You can either right-click and download (Save Image As...) the zip file with all icons or just right-click the one I've circled and save it to your system.

Step 4: Installing the Favicon into Blogger

At last the final step is to add your downloaded file, 'favicon.ico', to Blogger. This is a very simple step using the Blogger main menu. Just go to your Blogger Layout menu item and find the Favicon gadget in the layout like this:

Blogger layout menu

Select the 'Edit' link to bring up the icon selection screen. Use the 'Choose File' button to find the downloaded 'favicon.ico' file you just created in Step 3 and then press 'Save' like this:

Blogger template layout favicon dialog

Just save your Layout by pressing the 'Save arrangement' button on the Layout screen (this might be an unnecessary step but I do it anyway) and you are done!! The favicon is now added to your Blogger blog.

Don't worry - you can modify this any time.  Here's my test blog with our example that I created:

Final favicon added to Blogger


This will add a professional flare to your blog!

Posted By my pwiki12:32 PM

Tuesday, June 25, 2013

How to Post Blogger Automatically to Facebook

Facebook Logo
When I started this post I had the preconceived notion that automatically posting from Blogger to Facebook would not be an issue at all. For some reason in the back of my mind this was as simple as using email notification to the Facebook email-to-post feature, or using Google's Feedburner.

Well, I was quite wrong about this. Trying to use the email-to-post feature in Facebook only added the blog name and title to my Facebook wall with no content or links. From Feedburner, it looked like Facebook might work but they're only supporting Twitter in their socialize feature.

Now, there are a number of Facebook plug-ins such as RSS Graffiti you can use to grab your blogger RSS feed and post it to your wall. However, I found another tool so useful that I think this might be the easiest path for anyone to use.

If This then That - or, If Blogger then Facebook

A new online utility has appeared that can simply move your social postings around between sites called IFTTT.com (or, in other words, If This, Then That). It is so incredibly intuitive and easy to use that I had no issues setting it up.

I won't lead you on how to setup an account - you'll just need a user name and password - that's very easy to do. As you start you'll just need to activate and register your Blogger account and select your desired blog like this:

Activate your Blogger account

And then tie your Blogger blog to the IFTTT account:


Tie your Blogger Blog to IFTTT
Once registered your first step is to 'Create a Recipe' - and in our case it is going to be from Blogger to Facebook:

Using IFTTT


Simply click on the blue 'this' text to select Blogger as you source choice:

Selecting Blogger as the This Choice

You can see that there are many options for source - I've highligted the Blogger button. Next, just 'Choose a Trigger' type. In this case we want new Posts to be published to Facebook. However, you might want the second label option:

Posting from Blogger for Any New Post
Go ahead and select 'Any new post' for now. Now you will see the Trigger that will kick off the event.

Blogger Trigger to Post

Just select the 'Create Trigger' button to continue. You're going to be directed now to the action that occurs when you trigger off a Blogger Post. Just select the 'that' blue link to continue:

Now you'll see the full list again of social media sites. There are some great options here - but, for our tutorial just click on the 'Facebook' icon:


If this is your first time into IFTTT then you'll need to register your Facebook account much like how you did your Blogger account. Be sure you're logged into your desired Facebook account first.

Activate your Facebook account

Now you'll have to make a selection if you want the Blogger post to be fully copied to Facebook, or, just a link back to the blog. I prefer the second option 'Create a link post'  - but you make your choice:

Triggering an Action to Post to Facebook

This is the tricky part - how you want the message formatted on your Facebook page. You can certainly experiment with this - but, you'll want to Create an Action that has the URL in the link field and the subject with your own text mixed with your blog post:

Action Fields for Facebook Wall

Just press 'Create Action' when done and you should have something like this:

Final Blogger to Facebook Action
You can see I used the PostContent field - but, you certainly don't have to fill your wall with the full Blogger post.  Your connection is now ready!!

If Blogger then Facebook

Now that your link is active you can test it by posting to Blogger, then jumping over to IFTTT.com and clicking on the Recipe you just created and selecting the 'Check' button on the right side of the screen like so:

This normally runs every 15 minutes - but, by clicking on Check your post will appear on Facebook in seconds.

A Great tool in my mind!  Enjoy!!

Posted By my pwiki5:53 PM

Sunday, May 19, 2013

How to Make Category Tabs in Blogger

blogger tab menuNOTE (March 2014): Blogger has moved the function to set the category URL from the Pages section below to the Pages Gadget. You don't add category links in the Page but add them in the Gadget - this will be updated soon. It was a great addition to Blogger when they added the tab menus as a feature. However, many times I've heard people asking how they can alter their menu tabs to be Blogger categories instead of Pages. Good news is that this is a very simple thing to do and only requires a few steps.

What you may not have realized is that in the Blogger Pages menu item is the ability to link to a URL instead of a Blogger Page and that Blogger categories (or labels) are just that - blogger URLs.

Getting the Category URLs

First thing you want to do is to make sure each of your posts have labels defined. If you want your posts to be seen in only one category then you can only give each post a single label. Next stepis to find the URL of one of your Blogger categories by clicking on the category directly like this:

blogger category labels
In my Wordpress test template blog you can see I have 2 labels or categories defined. Once you click on it go up to your browser's URL to see what the category link is. Interesting result -- they're just searches:

search url for blogger categories

You can sese that the label URL is just (yourblog)/search/label/(labelname). Make a copy of your label URL and save it off to the side for a moment.

Setting the Tabs to Point to a URL

Now, go to the Blogger main menu and select the 'Pages' item and 'New Page':

editing pages in blogger
What you'll see at this point is a drop down selection of if you want a new Blank page or to enter a Web address.  Select the 'Web address' like so:

What you'll want to do now is to enter your Lable/Category in the first text box and the URL you just saved in the 'Web address (URL)' box like this:

setting the web address to a search page

Press 'Save' to add this category page to your list of Pages. If you read some of my earlier tutorials you saw that in order for tab menus to appear on you blog, you first have to set the 'Show pages as' to 'Top tabs':


in order for them to show up on your blog. Be sure the 'Pages' widget is added as well in the Layout manu of your blog in the right spot - this is where the Tabs will show (ignore the 'Edit' button here - just make sure the Pages widget is there):


Once you save your template you should see your new tab at the top of your blog:

Blogger tab menu
If you click on this what happens is you're directed to the URL you entered in the Pages section. One thing you may notice right away, however, is this not so nice search result image at the top of your blog:


Removing the Search Label

If you don't like that appearing you can remove it by editing your template directly. Just go into the template editor and choose 'Edit HTML':

If you hadn't noticed there was a change in the html editor for Blogger. Key things to note are the expand triangle on the side, the new 'Jump to widget' dropdown, and the selections within:

new Blogger template editor

The search result image that we want to remove is located just above the Blog section of your template. In my case it is called 'Blog1' which is the default. However, yours may have a different name if you named your Blog widget different.  Just select that from the drop down and expand the triangles next to the lines that have widget: id='Blog1' and widget: id='main' like this:


What you're looking for is the ling that says b:include data='top' name='status-message'. That is the status image we want to disable. Just add the html comment characters (<!-- and -->) to both end like I've circled above to disable that message.  Save your template.

That's it! You now have a menu tuned to your categories rather than pages. This will be especially useful if you have a news site. You can look at my tab example called 'Backgrounds' on my Wordpress test template blog here:



Good luck!




Posted By my pwiki5:57 PM