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.
- Add FeedBurner "Subscribe by Email".
- Add a "Subscribe by Email" FeedBurner hosted form, and a link.
- Add a suitable icon, containing the FeedBurner subscription link.
- 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.
- Upload a suitable icon.
- Add the FeedBurner Subscription link code.
- Add the button code.
Start with an icon, uploaded:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii2fCZTJEcS0rg0NliF0abn3LvuRvBFczagaR3aJo66JQ2X2VzNScrxHothiYOgP83ZrrLHN7fFcFeA5ihXLTdIHu8oO7kaxaILeNXcICvNkVNwj2pVG86bXn2qyvJd13-luA-hoijps09/s1600/Subscribe+Icon.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii2fCZTJEcS0rg0NliF0abn3LvuRvBFczagaR3aJo66JQ2X2VzNScrxHothiYOgP83ZrrLHN7fFcFeA5ihXLTdIHu8oO7kaxaILeNXcICvNkVNwj2pVG86bXn2qyvJd13-luA-hoijps09/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/AVvXsEh2eOcCRS3N1_JwNrk6zva82CQybo8TWCvgMs6lUtZhyl_6XrkbjWP8Ayf2eQLtg3KEaUMruYNMT3uHK7llf3gltPNd6PMaMEjSWXuTpPzCX-fAebzTg5xQTb9kdRRiRhVVm347DAyfZzdk/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/AVvXsEii2fCZTJEcS0rg0NliF0abn3LvuRvBFczagaR3aJo66JQ2X2VzNScrxHothiYOgP83ZrrLHN7fFcFeA5ihXLTdIHu8oO7kaxaILeNXcICvNkVNwj2pVG86bXn2qyvJd13-luA-hoijps09/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.
0 comments:
Post a Comment