Dedicated Blogger Followers Page

So you have lots of followers to show to your visitors. And the sidebar is too small to display them all. You'd put it at the top of the blog, but it looks awkward. You'd put it in a dedicated page, but you're afraid the gadget will be hidden there. So what do you do?

Have one followers gadget in your sidebar, and one in a dedicated page! Live demo here!

Step 1:

If you don't already have a Followers gadget, go add one.

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget - Followers.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget - Followers.

Step 2:

Let's create a dedicated page for your gadget.

If you're using the old Blogger interface: Go to Dashboard - Edit Posts - Edit Pages - New Page

If you're using the new Blogger interface: Go to Dashboard - Pages - New Page - Blank Page

Name it accordingly and publish page. Leave the content of the page blank.

Once you've published the page, click on 'View Page' and get the address (URL) of the page.

Step 3:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -



Find for this line:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

And add the following line above it:

<b:widget id='Followers999' locked='false' title='Followers' type='Followers'/>

The code in place:

Step 4:

Next, under the same page, find for this line:

<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>

And paste the following below it:

<b:widget id='Text999' locked='false' title='' type='Text'/>

The code in place:

Step 5:

Under the same page, find for </b:skin>, and paste the following lines directly below </b:skin>:

<b:if cond='data:blog.url != "http://www.southernspeakers.net/p/followers.html"'>
<style>
#Followers999{
display:none;
}
</style>
<b:else/>
<style>
#Blog1{
display:none;
}
</style>
</b:if> 

Change the address in the code above to the address that you have gotten in Step 2. Click on 'Save Template' when you are done.
The code in place:

Step 6: 

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements 

If you're using the new Blogger interface: Go to Dashboard - Layout


Click Edit on the Text gadget below your default Followers gadget - Click on Edit HTML (as opposed to Rich Text) - and paste the following code:

<a href="http://www.southernspeakers.net/p/followers.html">Click here to check out full list of Followers.</a>
 

Change the address in the code above to the address that you have gotten from Step 2.

Step 7:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. 

#Followers1 {
border: none;
}

#Text999{
text-align: center;
margin-top: -40px;
font-size: 12px;
border: none;
}

And that will be all. It is recommended to have either a Pages gadget or a Linklist gadget installed in your blog so that your dedicated Followers page can be accessed easily from your homepage. Have fun!