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.