Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Tuesday, June 12, 2012

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


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..This is a respond to blog reader Jennifer Farris.

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/'.
<!-- 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:
.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:
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.



70 comments:

  1. Thanks so much for your help! It worked like a charm. :)

    ReplyDelete
  2. Ha, that's an awesome hack mate.

    ReplyDelete
  3. Thanks for all your hints n' tips related to Dynamic Views, There seems to be a bit of a vacuum when it comes to good info related to them. Really glad you are changing that fact.
    Just an FYI I just finished a post of my own with a couple tips on Dynamic views. Tip one is check out your site ;)
    It is scheduled for tomorrow on www.bloggerwitha.com
    Thank you again for your awesome content.
    Tim

    ReplyDelete
    Replies
    1. Hi Tim,

      I'm honored! Looking forward for your post :)

      Cheers!

      Delete
  4. Thanks for the "Extra". Worked for me!

    ReplyDelete
    Replies
    1. Excellent! Thanks for informing about the absence of Send Feedback button in custom domain :)

      Delete
    2. Looks like Blogger has enabled the pagecounter gadget for DV and this one may no longer needed.

      They have also enabled several other gadgets like the popular post one.

      Wonder when/if Blogger will be making any major updates to DV?

      Hope your week has been great one!

      Delete
    3. Hi Bob,

      You're right. Blogger is finally recognizing the need for these gadgets. Maybe we'll see more compatible gadgets for DV templates, but nothing major is on the table for now :)

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hi KP,

      None of the things you asked is possible. The tweaks that you can apply to Dynamic Views are limited to minor touches only. I'm sorry I couldn't be much more of a help.

      Delete
  6. Hi How to add you might also like at the end of the posts and the reply box in comments??

    Thanks!

    ReplyDelete
    Replies
    1. Hi there,

      The 'you might also like' widget is known as LinkWithin. Looks like you've already got this sorted, as I can see this widget in your blog.

      What do you mean by reply box in comments?

      Delete
  7. Hello! I have a little problem... I have centered everything on my blog but I can't figure out how to center the reactions widget, could you help me please?:)

    ReplyDelete
    Replies
    1. Maybe I could, but not without inspecting your blog first. What's your blog's address?

      Delete
  8. Hey brother I tried but the attempt was not sucessfull. Could you help me Then please contact me at vpsinghmouti@gmail.com for assistance

    ReplyDelete
    Replies
    1. Yo bro.. You've left some bits out of your code.. Use the following. I've already customised it for you, so just copy and paste to your 'Add CSS' box:

      .feedback{
      background-image: url('http://c.statcounter.com/8057392/0/120bbdbe/0/') !important;
      font-size: 0px;
      min-width: 10px;
      width: 45px !important;
      height: 15px !important;
      border: 0px !important;
      background-repeat: no-repeat !important;
      }

      Cheers :)

      Delete
  9. That's a great one, Yoga! but I haven't got that many visitors yet on my blog. I wonder if I could replace the Send Feedback button with a "Follow me on Bloglovin" one. The code should be quite similar to the counter one, right?

    ReplyDelete
    Replies
    1. Hi Tina,

      Here's the thing. In the tweak above, though the 'Send Feedback' button is converted to a statcounter, you can still click on it to send actual feedback. In other words, the button's link is still pointing to the original script. You can replace the button with something else, but you won't be able to change its link.. I assume that's not what you're lookin for?

      Cheers

      Delete
    2. Oh I get it.. no, that's not what I want. I'd like the visitors to be able to click on the button and be redirected to bloglovin website. Thanks for the reply!

      Delete
    3. Hi Tina,

      That's what I meant. It is not possible to change the link of the button.

      Delete
  10. Hi, you have a great help site for us blogger :) I used "Forced gadget to stay" and it works fine. Now I tested the script for the StatCounter. I have read carefully how to do, but it don't work...the 'Send Feedback' is still there...Can you help me...

    ReplyDelete
    Replies
    1. Hi Birgitta,

      I've checked your template's source, and I can see the code for forcing gadgets to remain visible. However, I can't find the statcounter code anywhere in your template. Probably it didn't get saved or something. Could you give it another try and make sure the code saves?

      Cheers :)

      Delete
  11. Thanks for answer so fast :)
    I have the code on the page now and saved!

    ReplyDelete
    Replies
    1. I see the code now, but it ain't right. This is what you have:

      <noscript><div class="statcounter"><a title="counter for blogspot" href="http://statcounter.com/blogger/" class="statcounter"><img class="statcounter" src="http://c.statcounter.com/8077449/0/59ab6e64/0/" alt="counter for blogspot" /></a></div></noscript>
      .feedback{
      background-image: url('http://c.statcounter.com/8077449/0/59ab6e64/0/') !important;
      font-size: 0px;
      min-width: 10px;
      width: 45px !important;
      height: 15px !important;
      border: 0px !important;
      background-repeat: no-repeat !important;
      }

      This is what you should have:
      .feedback{
      background-image: url('http://c.statcounter.com/8077449/0/59ab6e64/0/') !important;
      font-size: 0px;
      min-width: 10px;
      width: 45px !important;
      height: 15px !important;
      border: 0px !important;
      background-repeat: no-repeat !important;
      }

      Replace the wrong one with the right one and you're all set :)

      Delete
  12. Yes! It works now! Thanks so very much :)

    ReplyDelete
  13. What if I don't want an image but text? I mean the counter won't be the black-white image but it will be presented by normal text

    ReplyDelete
    Replies
    1. It has to be a background image. That's how the loophole works.

      Delete
  14. Hi Yoga!
    Thanks for all the job there... but i just can't get it to work.
    Could you help me? Where do could send you my info?
    Thanks a lot!

    ReplyDelete
    Replies
    1. Hi Gonzalo,

      Yes I can help, and I have all the info that I need. This is what you have now in your Add CSS box:

      .feedback{
      http://c.statcounter.com/8129270/0/0c7974af/0/"
      </noscript>
      font-size: 0px;
      width: 60px !important;
      height: 18px !important;
      border: 0px !important;
      background-repeat: no-repeat !important;
      }

      And this is what you should have:

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

      Let me know how it goes :)

      Delete
  15. Perfect!Thank you very much for getting it to work and for the quick response!!!

    One last question, ¿is there a way to get the visits that shows me the blogger statistics in this new counter? I really think is not, but maybe...

    Thanks a lot again...

    ReplyDelete
    Replies
    1. Nope, it isn't possible. The only stat that we can show in Dynamic View is page view via Statcounter, which you've already got installed :)

      Delete
  16. Hello, another fan of your Dynamic tutorials, thank you so much. I've managed to customize my blog to something I like, that keeps the clean look of the Dynamic template, all with your help!

    I also love seeing what other people have achieved with the Dynamic template, I think the customizations look really good as people can be creative without going overboard as I sometimes see with 'simple' templates.

    http://gladley.blogspot.com

    ReplyDelete
    Replies
    1. Isn't CSS tweaks lovely? You get to modify your template without doing anything that could end up breaking it :) And thanks for your kind words, appreciate it very much :)

      Cheers and God bless..

      Delete
  17. Hi Yoga, Thank you for sharing so many good tips for Dynamic template. I already applied two of them. The one mentioned here have a small problem for my blog. The counter shown missing the right most digit. Is there a way to fix it? The counter also count faster than the "stats" shown.
    http://jameshuangphoto.blogspot.tw/?view=magazine

    Have a nice weekend!

    ReplyDelete
    Replies
    1. Hi James,

      The actual counting action is being controlled by StatCounter, we have no power over it even if it isn't accurate..

      As for the last digit, here's how you can fix it. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .feedback{
      width: 52px !important;
      }

      Let me know how it goes.. Cheers :)

      Delete
    2. Hi Yoga,

      You are amazing. It works and I really appreciate your help. Regarding the counter, I have to wait until there is other counters I can use.

      Regards,

      Delete
    3. Hi James,

      No problem at all.. Let's keep our fingers crossed :)

      Cheers!

      Delete
  18. Hey Yoga,

    Thanks, it worked out perfectly. Just had a question though.

    The stats are starting again from 1. Is there any way for it to have the same number as my blogger pageviews.

    www.a-shared-thought.blogspot.com

    Currently it's only showing about 5 pageviews, when in reality I have a lot more.

    Thank you
    Kiara

    ReplyDelete
    Replies
    1. Hi Kiara,

      Not possible. The StatCounter is a new counter all together, and it is in no way associated to your native Blogger page count. Blogger's page count is automatically started when you start your blog, whereas the StatCounter only start when you create an account with them. There isn't a way to use Blogger's Page Count with the tweak in this tutorial.

      Cheers :)

      Delete
    2. Oh I see ☺

      Thank you for letting me know!

      Cheers!

      Delete
  19. Hey Yoboy,

    Is there any possiblity to get a geocounter on snapshot dynamic view ?

    Thank you.

    ReplyDelete
    Replies
    1. Hi Tefenkgi,

      If I'm not mistaken geocounter runs on flash. But we need a counter that displays the stats in image form if we are to incorporate it into Dynamic Views. Can't see a way forward with GeoCounter.. Sorry about that.

      Cheers :)

      Delete
  20. hi Yoga, I tried the steps U suggested but after adding the CSS it shows "invalid project". what's wrong?
    My blog : http://the-prodigal-paradox.blogspot.in/

    ReplyDelete
    Replies
    1. Hi Sushovan,

      Your counter is appearing fine from my end. Where exactly are you seeing this 'invalid project' error?

      Delete
    2. It's working fine now Bro.. I missed a bit of code last time so couldn't see the counter,
      One more thing I want to share with you, these dynamic views seem to be something against SEO, i think the googlebot finds it tough to crawl blog with dynamic views, as soon as I switched back to the old simple template i could see my blog in search engine

      Delete
    3. Could be true.. I've heard this myth before..

      Delete
  21. Can any1 tell me that how we can install wibiya toolbar in dynamic views,,no luck till nw..
    pls help me

    ReplyDelete
    Replies
    1. Hi Jen,

      It isn't compatible with Dynamic View templates at the moment..

      Cheers..

      Delete
  22. Hi Yoga, Thank you!

    Appreciate your work!

    All

    ReplyDelete
    Replies
    1. And I appreciate the support and feedback. Thanks Allyson :)

      Delete
  23. Hello! I have added your stat counter successfully, but does this stat counter include my views when I look at the page? If so, can I make it so it doesn't count my own views?

    ReplyDelete
  24. Hello! I have successfully added the statcounter. Thank you very much! I was wondering though, does it consider my views towards the stat counter? If it does, can I make it so it doesn't? Thanks!

    ReplyDelete
    Replies
    1. Hi Hung Kieu,

      Yes it does count your own view, and fortunately, there is an option to exclude your own view from being counter. Go to www.statcounter.com, login, and click on the settings icon on your project's name (the wrench icon). Click on 'Edit Project Settings', and under 'IP Blocking', insert your IP there (you should see your IP displayed above the box)..

      Cheers :)

      Delete
  25. Hello, firstly thx you very much for all the tuto's I used in order to make up my blog in flipcard views. Work is still in progress :) I try to set up the counter as you said but it doesn't appear on the bottom of my page. I have a costum domain at this adress www.leutchi.fr (the adress I input in the start counters fields) So could you help me in this case ?
    Best regards E Tchi.

    ReplyDelete
    Replies
    1. Hi Eric,

      First of all, there's a broken piece of code in your 'Add CSS' box that you need to remove. It's rendering all your newer codes useless. This is the line that I'm referring to:

      #pages::before { border-left: 0px !important;

      Next, use the following code to add your counter:

      body{
      background-image: url('https://c.statcounter.com/8524559/0/d54cb882/0/');
      background-position: right bottom !important;
      background-attachment: fixed !important;
      background-repeat: no-repeat !important;
      }

      Cheers :)

      Delete
  26. This is a great post. It worked perfectly for me. Thanks for sharing! In my dreams if someone put their mouse pointer over the stats in the corner a little popup would read "Total pageviews". Maybe someday Blogger will give us this option. :(

    @Kiara, I was given the option to customize the size, amount of digits, etc. of my statcounter.com counter and I chose to start it at 339!

    daves80s.blogspot.com

    ReplyDelete
  27. That's a gr8 tips @yoga!!!!!!!! thanks!!!! :)

    ReplyDelete
  28. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Things look fine from my end. What kind of problem are you facing?

      Delete
  29. Thanks a lot for all tutorials! And thanks for answering everyone here... I even didn't need to ask to solve my problem! =D

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.