Convert 'Send Feedback' button to StatCounter in Blogger Dynamic Views Template

Several gadgets have been introduced to Dynamic Views now, but a stat counter isn't one of them. I thought it'd be awesome if the space occupied by the 'Send Feedback' button at the bottom-right of your blog can be utilized for showing a stat counter. Those that have tried adding StatCounter to Dynamic Views before might be wondering if this approach will mess up your default Dynamic Views background - nope, it won't. In this tutorial, you will learn how to convert the redundant 'Send Feedback' button that you can find in your blog to a Stat Counter button..

Step 1: 

Go to http://statcounter.com, register an account and login. Once you're in, click on Add Project.

Step 2: 

Fill in your blog details on the left hand side . This is pretty straight forward.

Step 3: 

On the right hand side, leave things as it is, although you might wanna set 'Email Reports' to none if you don't want to receive any emails from StatCounter. You can click on 'Customize' under 'Visible Counter' if you want to change the background and text color of your counter.

Click on 'Add Project' when you're done.

Step 4:

Choose 'Blogger' from the list of website, and you'll be presented with this code. This is a very important step. You don't need the whole thing except for the address in the line that I've highlighted below (Line 9). In my case, the address is 'http://c.statcounter.com/8024715/0/185651ec/0/'.

?

1 2 3 4 5 6 7 8 9 10

<!-- Start of StatCounter Code for Blogger / Blogspot --> <script type="text/javascript"> var sc_project=8024715; var sc_invisible=0; var sc_security="185651ec"; </script> <script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script> <noscript><div class="statcounter"><a title="blogger counter" href="http://statcounter.com/blogger/" class="statcounter"> <img class="statcounter" src="http://c.statcounter.com/8024715/0/185651ec/0/" alt="blogger counter" /></a></div></noscript> <!-- End of StatCounter Code for Blogger / Blogspot -->

Step 5:

Use the address that you've gotten from Step 4 to replace the address in the following CSS code:

?

1 2 3 4 5 6 7 8

.feedback{ background-image: url('http://c.statcounter.com/8024715/0/185651ec/0/') !important; font-size: 0px; width: 60px !important; height: 18px !important; border: 0px !important; background-repeat: no-repeat !important; }

Now that your code is ready, go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog. 

You're done. Have fun!

Extra:

If you're running your Dynamic View blog on a custom domain, you will not see the 'Send Feedback' button. If you'd still like to have the StatCounter button in your page, here's an alternative solution for you. You still have to perform Steps 1 to 4 above. In addition, if you have a default background for your body, get the direct link of your background. In Firefox for example, you can get the direct link for your background by simply right clicking on the background of your blog - 'View background image'.

Once you have the address of your statcounter from Step 4, and the directlink of your background, add this to your CSS:

?

1 2 3 4 5 6 7

body{ background-image: url('http://c.statcounter.com/8024715/0/185651ec/0/') ,url('http://themes.googleusercontent.com/image?id=1xW5NSq22Id4x2EgfmiclCzFsu3av_xEjndeCpM0D_rSk6Ms14va4nUBDVs7hvlpTTOhF') ;background-position: left bottom, center top !important; background-attachment: fixed !important; background-repeat: no-repeat !important; }

Replace Line 2 with the address that you've gotten from Step 4, and replace Line 3 with the address of your background's directlink. If you don't have a background, remove Line 3 from the code above.