Skip to main content

Add A Fixed Location "Subscribe" Button To Your Blog

To encourage email subscriptions, and other social connections, some blog owners provide gadget toolbars, with useful links.

Some blog owners would like to position their gadgets in fixed screen positions.
I want to have a subscribe button hover at the top of the page, while people read my blog.
This blog has a hovering AddThis toolbar, which provides selected social sharing options. And, it has a hovering "Top of Page" button.

Adding a custom subscription gadget, in a fixed screen location, is not complicated.

AddThis has a large library of social sharing gadgets, with their icons - but they don't have any email subscription selections. But you can add an icon based "subscribe" button, "hovering" at the top of the page.

An occasional request suggests using a popup window, containing a subscription form. We don't recommend using a popup window - but a subscription form, on a FeedBurner hosted page, will provide the same function.

  1. Add FeedBurner "Subscribe by Email".
  2. Add a "Subscribe by Email" FeedBurner hosted form, and a link.
  3. Add a suitable icon, containing the FeedBurner subscription link.
  4. Try It.

See below "See the code asssembled.", for the detailed procedure.

Add FeedBurner "Subscribe by Email".

Using the dashboard Layout page, and "Add a Gadget", add a "Subscribe by Email" gadget. This creates a blog posts FeedBurner hosted feed.

FeedBurner provides the "Subscribe by Email" gadget, with the choice to display either an on screen form - or a simple link to a FeedBurner hosted form page.

Add a "Subscribe by Email" FeedBurner hosted form, and a link.

Once a "Subscribe by Email" gadget has been added, get the gadget link from the FeedBurner dashboard, at Publicize - "Email Subscriptions" - "Subscription Management" - "Preview Subscription Link…".


Start from the dashboard, at Publicize - "Email Subscriptions" - "Subscription Management".




The "Preview Subscription Link…" window contains the code, that we need.



Add a suitable icon, containing the FeedBurner subscription link.

Choose an attractive icon to contain the FeedBurner supplied link. Add an HTML gadget using "Add a Gadget", containing the icon with the link to the FeedBurner form - and displayed in a fixed location.


Try It.

I added a button, and a new subscription, to my test blog, "Chucks Tech World".


See the icon, in the top right margin?




See how the new icon floats?




See how it floats from the top - and from the right?





See the code, assembled.

A floating subscription button is simply an "HTML / Javascript" gadget, containing button code, linking to a FeedBurner subscription form. I position my gadget, in the footer, out of sight. The code "top:40px;right:60px;" positions the button to display relative to the top right corner - regardless of where the HTML gadget is positioned.

  1. Upload a suitable icon.
  2. Add the FeedBurner Subscription link code.
  3. Add the button code.

Start with an icon, uploaded:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT6OA-IWV5h460PXicfr8kRGGfg3D1wZThfHg1FiMncJ0nYktHPrCkqpeSUD2vShIZFHX3yrzs6MDDS3b0PQwmoEYa8rWINfoqqUtgJQGf07FHsuisBkwgc482bwkIJr7NbpEVag/s1600/Subscribe+Icon.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT6OA-IWV5h460PXicfr8kRGGfg3D1wZThfHg1FiMncJ0nYktHPrCkqpeSUD2vShIZFHX3yrzs6MDDS3b0PQwmoEYa8rWINfoqqUtgJQGf07FHsuisBkwgc482bwkIJr7NbpEVag/s320/Subscribe+Icon.png" /></a>

Here's the FeedBurner Subscription Link:

<a href="https://feedburner.google.com/fb/a/mailverify?uri=ChucksTechWorld&loc=en_US">Subscribe to Chucks Tech World by Email</a>

Here's the Floating Top Of Page Button:

<a style="display:scroll;position:fixed;bottom:20px;right:60px;" href="#" title="Top"><img border="0" height="60" width="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqd02Wljw9Mbhw35kjXfCJfsdWP4B7ITNDDExWz5AcUKbbRWmhBYGvV3ebzzJNoEb03JqocenQ5BcH8OuVtyWIdRstuAetcRiiC4mL78vYMm3R00upng_RVor6a7tJDavAwCW_g/s320/Up+Arrow+4.jpg" /></a>

And put them all together:

<a style="display:scroll;position:fixed;top:40px;right:60px;" href="https://feedburner.google.com/fb/a/mailverify?uri=ChucksTechWorld&loc=en_US" title="Subscribe by Email" target="_blank"><img border="0" height="60" width="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT6OA-IWV5h460PXicfr8kRGGfg3D1wZThfHg1FiMncJ0nYktHPrCkqpeSUD2vShIZFHX3yrzs6MDDS3b0PQwmoEYa8rWINfoqqUtgJQGf07FHsuisBkwgc482bwkIJr7NbpEVag/s320/Subscribe+Icon.png" /></a>

And that's it.

I now have a hovering subscription icon, in this blog. Given a collection of icons, carefully arranged, you can have a hovering toolbar - to maybe complement a social media button toolbar.



Some #Blogger blog owners would like a hovering button or toolbar, to provide an email subscription form. This is an accessory that is not difficult to add.

Comments

Popular posts from this blog

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".

Add A Custom Redirect, If You Change A Post URL

When you rename a blog, the most that you can do, to keep the old URL useful, is to setup a stub post , with a clickable link to the new URL. Yo! The blog is now at xxxxxxx.blogspot.com!! Blogger forbids gateway blogs, and similar blog to blog redirections . When you rename a post, you can setup a custom redirect - and automatically redirect your readers to the post, under its new URL. You should take advantage of this option, if you change a post URL.

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.