A Tutorial on Display A StatCounter In Blogger Dynamic Views

Ever since Blogger introduced the Dynamic Views Template, nothing much has changed. If not for a few generous and clever Blogger users with their hacks and customizations, we’d be pretty much left with the same old Dynamic Views design that we were given in the first place (i.e. template designs, and widgets).
One simple but good example of these custom hacks is today’s featured tutorial from Blogger user K.P. of dynamictweak. His tutorial will let you turn Blogger’s “Send Feedback” button into a StatCounter. What’s nice about his trick is that, unlike other StatCounters, this one won’t mess up your default Dynamic Views background.
So how would you go about it? Follow the steps below:

• Go to http://statcounter.com and create an account. If you already have one then just log in.

• Click on Add Project.

• Provide all of the necessary info such as URL, Title, Group, etc. on the left hand side portion of the screen. While on the right hand side, you can leave things as it is unless you don’t want to receive any emails from StatCounter, feel free to set “Email Reports” to “none.”

• Click on Add Project.

• Choose Blogger from the list of websites, and you’ll be presented with a similar code as shown below:

<!-- 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><a title="blogger counter" href="http://statcounter.com/blogger/">

<img src="http://c.statcounter.com/8024715/0/185651ec/0/" alt="blogger counter" /></a></div></noscript>

<!-- End of StatCounter Code for Blogger / Blogspot -->     

• Copy the highlighted part only (which is the/your counter’s URL address) from the code that it gives you. You don’t need the entire code to accomplish this tutorial.

• Paste the address you copied in the following CSS code below.

.feedback{

background-image: url('YOUR_URL’s_STATCOUNTER') !important;

font-size: 0px;

width: 60px !important;

height: 18px !important;

border: 0px !important;

background-repeat: no-repeat !important;

}  

• You’ll then put the above code in your template’s CSS. You can do this simply by going to your Blogger dashboard, then Template > Customize > Advanced > Add CSS. (Remember to press Enter after the last character of the last line.)

• Click on the ‘Apply to Blog’ and that’s it. You’re done!