Thursday, February 16, 2012

HOW TO: All Time Top 10 on Blogspot

You may have recently seen that I created an All Time Top 10 link in my Pages List (Favorites Bar, Menu Bar, whatever you call it) and it is available here : http://itsmynd.com/p/mynd-top-10.html

Notice too that I already have a Monthly Top 5 on the right side of my normal post pages.

This is surprisingly easy to do and only a little more difficult to do right.

First, HUGE UPS to the inspiration page that set me on the right path.  I could simply link you to that page and you'd be set, but she deals with moving the Archive to a page and I wanted to create a totally different page to make a list of the most popular posts. She also uses a post page instead of a static page which for my purposes wouldn't work correctly. Maia's page is http://www.colormagicphotography.com/2011/03/create-separate-archive-page-move.html

At First

My initial page setup had 5 of my all time popular posts on the right, but I started thinking (as I often do) "if I link to the 5 all time favorites, people will click them and they will remain the top 5 all time favorites."  I think I only want to show the last month favorites so that people see a different selection month in and month out. So I changed the Popular Posts widget to reflect that desire.


When I discovered there were static pages, I immediately thought, "that would be a great place for an all time popular posts to appear." Thus started the research and frustration.  You can't just take the widget and post it into a page and you can't copy the content of the widget (the script language) into a post either.

And Now


So, WHY a page and not a post like the Maia from colormagicphotography?  Well, unlike Maia who is doing a separate page for Archive, simply removing the name from a post will remove it from showing up in the archive list.  I want to do a Popular Post count and if I made my Top 10 list on a post page, presumably that might get enough clicks to appear IN the Top 10 list.  A Static Page is not supposed to show up in that count, so I want to go with a Page.  In retrospect, Maia could probably also use a Static Page as well.

So Here is My Current "Posts" Page:
#1 Is just a representation to show you that I have a Facebook Like Area
#2 Another Widget for "Followers"
#3 This is the Popular Posts Widget that shows my Monthly Top 5. No Images, No Snippets.
#4 This is the "archive" or listing of older posts.


Here is my All Time Top 10 page.
#1 Here is the link to the Static Page
#2 Here is the Popular Posts widget again.  No Images, but this time I have included the Snippet.
#3 Note, there isn't a Monthly Top 5 or an Archive on this page.

    

HERE'S HOW: 

So, I start by creating a Static Page that will be the page.  Give it a easy title like "Top 10" which will be translated by Google to "Top-10.html" as the page URL.  You can always go back and change the actual title later.  Go ahead and publish it for now to get that page URL.  You should now have a page at http://<yourblogname>.blogspot.com/p/Top-10.html.




Then I need to Add the Popular Posts Widget (again) and set the settings how you want them.  I chose 10 posts and Snippets, but no images (mainly because occasionally I have a post that doesn't have an image and it looks weird in the list).  When you add the Widget, it will likely appear on the right area (depending upon where you create it).  Now, DRAG it "inside" the Post area.  Once dropped, it should appear below the Post.



If you were to look at your blog now, you would see your Top 10 below your posts, which isn't really what you want, but you can see that we're very close.

This next part is the ADVANCED part of the tutorial, so pay close attention so you can see what is done.  Everything your page does is part of the template that you've built up.  So it is the template that we need to hack a little.  So, we're going to be very careful.
1. Go to the Blogger Dashboard
2. Go to Template section
3. You will see "Live on Blog" - Click on Edit HTML
4. A dialog box will open and you will click Proceed (ignoring the warning, but being careful)
5. Don't Expand Widget Templates on the ensuing window.
6. Click somewhere in the window and hit Ctrl-A which should highlight the entire text
7. Click Ctrl-C which should copy the entire text
8. Open Notepad (don't use Word as that will add other formatting)
9. Click Ctrl-V which should paste all that wonderful text into your Notepad window.
10. Now would be a GREAT time to save it before you edit it.  Just give it a name like  "MyBlog.txt"

BREATHE!

Now within Notepad Hit Ctrl-F and try to find "</b: template-skin>" without the quotes.  If you don't find that one, look for </b: skin> but it is most likely that you have that.  You can also search for "</head>" which should be the line after one or the other. Now there is a snippet of code here that you can paste just above that </head> tag and it will need to be modified.  I included my code so I can show you what I did. You will want to edit the highlighted areas appropriately for your pages.  The Green areas are just placeholders, they should already be in your code.


</b:template-skin>
      <b:if cond='data:blog.url == &quot;http://yourblogname.blogspot.com/p/top-10.html&quot;'>
        <style>
          #Blog1 {display:none;}
          #PopularPosts1 {display:none;}
          #BlogArchive1 {display:none;}
          #BlogList1 {display:none;}
        </style>
      <b:else/>
        <style>
          #PopularPosts2 {display:none;}
        </style>
     </b:if>
  </head>



OK, so let me give you the lowdown of the code so you can understand what each line is doing:
Line 1 is the IF statement which basically says, If a user hits the Top 10 page, we're going to do something special
<b:if cond='data:blog.url == &quot;http://yourblogname.blogspot.com/p/top-10.html&quot;'>

Line 2 is saying that the special thing is to alter the style of the page:
<style>
 
Line 3 says that on the Top 10 page, we're going to NOT display Blog1, which is code for "posts" or "pages"
          #Blog1 {display:none;}
 
Line 4 says that on that same page we aren't going to display the Monthly Top 5.  Now this gets a little confusing, but because the Top 5 existed first, it is automatically the PopularPosts1, whereas the Top 10 is PopularPosts2.
          #PopularPosts1 {display:none;}
 
Line 5 says we aren't going to display the Archive on our Top 10 page.
          #BlogArchive1 {display:none;}
 
Line 6 says we aren't going to display the Blog Roll on the top 10 page.
          #BlogList1 {display:none;}
 
Line 7 says we're done with the special styling for our special page.
        </style>
 
Line 8 says "for EVERYTHING ELSE" We have another special rule
      <b:else/>
 
Line 9 says we are altering the style for all the other pages.
        <style>
 
Line 10 says we AREN'T going to display the Top 10 anywhere else.
          #PopularPosts2 {display:none;}
 
Line 11 says that's all the special style for today.  If we wanted to make another static page with say the archive we could have added some more stuff at line 8 and bumped all this down, but in the end we would likely hide our second special page of stuff at Line 10.
        </style>
 
Line 12 ends the IF statement.
     </b:if>

Now, I went into a lot of detail about the code mainly because I wanted you to become familiar with why all the stuff is in there, because I initially was confused about how to add additional hidden objects.

I hope this helps all of you out there and I look forward to your comments on how this could be made better and easier.

11 comments:

  1. Your frustration is my gain :)

    This is an excellent idea. 

    I was thinking about my blog and how I can make better use of pages to show some of my stand up footage (there is not much there for now, but I will be filming more this year). I have a links page to my youtube channel, but I have found people are more likely to click videos on the page rather than following links.
    Then that got me thinking, my most "popular" post is not my best (it got hit by a spam bot and that skewed the statistics) and was wondering how I could re-arrange stuff.Cheers!

    ReplyDelete
  2. justkeepinitrealfolksFebruary 16, 2012 at 7:00 PM

    Holy crap you are WAY above my pay grade dude!!!!! That post is like reading a foreign language to me. Guess that's why I went to that third rate college WVU.

    ReplyDelete
  3. Ah, and of course you read me on the day I post a How To! You should check out some of the others.

    ReplyDelete
  4. Workin' for you Rusty!

    ReplyDelete
  5. That caused me enormous anxiety. I couild never do any of that....but congratulations on your savvy. I am now sucking my thumb in the fetal position

    ReplyDelete
  6. That was... very technical and codey, but appreciated.  I am just a young paduan to your jedi master here in the blogsphere, but since you seem eager to offer lessons  I want to know how you make each blog appear separately complete with comments instead of all running together back to back with hidden comments.

    ReplyDelete
  7. Only the best for you Susan, everyone knows the fetal position is great for your back...

    ReplyDelete
  8. Click on the title of the blog post and you'll see what you see on my page. Your settings allow you to choose how many posts on your front page. I set mine to 1.

    ReplyDelete
  9. Hi Wily,
    I'm Maia. Great writing with the all times top 10.

    I landed at your page by searching for something else but now that I'm here,  I want to thank you for the link to my page and also to give you an answer on why choosing a post page, in my case;

    For some reason, widgets don't work the same way on pages as they do on posts, at least that's what happened with the archive widget on my template.
    I had no time to research, so I simply moved the archive to a post page.

    I'm using a popular widget installed in my footer that never updates either but it's not worth the time to find out why.

    I like your posts and your sense of humor.

    ReplyDelete
  10. Thanks Maia, I was thrilled when I found your page. It was that out-of-the-box thinking that gave me hope for what I was attempting to do. I believe that Google is a moving target for pages both Static and otherwise. They keep trying to get me to move to Dynamic Views. UGH.

    ReplyDelete
  11. Your idea coincides with mine.and I think it's better.

    ______________________________________________________________

    Rc Hobby|Rc Helicopter|Mini Rc Helicopter
     

    ReplyDelete

Share

Widgets

All Time Most Read