Windows and Linux howtos

The Blogger platform, operated by internet giant Google, is actually a quite complete blogging solution, and currently millions of bloggers use it to publish anything from poetry to rants to tech news ans gossip, basically, if any topic is decent and useful, you can probably find a .blogspot blog about that topic.

But even though the userbase is huge, given the fact that blogger is mainly used by non-techie bloggers, some very useful functionalities are missing from the platform, and most often a year or more passes before any user  feedback or feature request gets actually turned into a new blogger function.

And and it’s every blogger’s wish to increase the number of people that usually read the blog’s posts, it’s curious, that it is particularly the subscription mechanisms used by blogger, that are lacking almost any semblance of currentness, the simple “subscribe to posts via atom” links and the very few widgets that can be added to a blogger blog, don’t really qualify.

Feedburner, also operated by google, does have a pretty good subscription management mechanism, but it’s often cumbersome to even link the two together, and the “Click to subscribe” option which opens a popup window in which you’ll have to enter an e-mail address, and confirm a captcha, doesn’t really have too many options, it’s just a popup window activated on a click.

The subscription dialog, however, can be made to appear to all NEW visitors to your blog (we don’t want to nag the visitor on every page, with the subscription dialog !), with the help of some simple, straight-forward jquery, some javascript, and some css styling.

The prerequisites:

-you have access to / permissions to edit the template of your blog in blogger.

-you can upload a piece of javascript (downloadable from below this article, have some patience 🙂 ) to a server of your own choosing (any hosting account will do) and call that javascript from your blogger template

-you know your way around in the blogger template, or at least, YOU CAN FOLLOW THE INSTRUCTIONS FROM BELOW, EXACTLY.

Needless to say, before editing your template, go to your blogger dashboard and save a complete copy of your template ! Go to dashboard, click on template (left column menu), and then click on the backup/restore button in the upper-right corner of the dashboard. Proceed to download the template, save it, just in case you mess something up while implementing the subscription popup.

Download this javascript file BY RIGHT-CLICKING the link and selecting “Save link as”, or “Save target as”, depending on what browser you are using. Upload the newly downloaded .js file to an online hosting provider, to the simplest access path possible. So for instance, if your server/online hosting domain is “someserver.com”, make sure you place it in the root folder, so “someserver.com/jquery.cookies.js” will be accessible in a webbrowser.

Next, go to your feedburner account, and note down your feedburner USER name for your feed. Go to “edit feed details”, and in the edit field, whatever text string comes after “feeds.feedburner.com/”, that is your username for that feed. (For “feeds.feedburner.com/someblog”, “someblog” is the username).

Now go to your blogger template. Click on “Edit html”. Click anywhere inside the template editor window first. Press CTRL+F to bring up the search/find input box inside that window. Click inside the find dialog, and type exactly this (without the quotes) : “</b:skin”.

Hopefully, the editor will jump to the collapsed section of <b:skin>….</b:skin> in your template. Click on the leftmost arrow in that row, to expand that section. Now press CTRL+G to jump to the </b:skin part of the expanded section.

Click above the </b:skin>, press enter a few times (so that you create space for the next lines to be entered, and some space around it – it’s easier to see the code that way).

Copy and paste the following CSS code, exactly as it is:

#dialog
{
background-color:white;
visibilty:hidden;
display:none;
padding:20px;
margin:10px;
width:340px;
height:200px;
border-radius:3px;
-moz-border-radius:3px;
-moz-box-shadow: 2px 2px 2px #111111;
-webkit-box-shadow: 2px 2px 2px #111111;
box-shadow: 2px 2px 2px #111111;
vertical-align:middle;
font:$(body.font);
}

#dialog img { position:relative; top:10px; }
.ui-dialog-titlebar-close
{
position:absolute;
top:90%;
left:42%;
}

Obviously, if you know your way around the template, and have a good understanding of CSS, HTML, javascript, jquery, etc., you are welcome to style the elements as you please. This is just a simple example styling, with simple white background, and nothing too fancy 🙂

Now, save your template, but don’t leave the editor window just yet.

Click inside the editor window anywhere, and then press CTRL+F again. The search/input box in the upper-right corner will be cleared.

Type this in the box, and press enter (without the quotes) :

“</body”

This will hopefully take you to the part in the template, where the HTML part actually ends. Again, press enter a few times before that line, so you’ll have easier visibility for the code you’re about to enter before it.

First, we have to call the three jquery scripts that will allow us to load a dialog. Copy/paste the following lines exactly as they appear here:

<script src=’http://code.jquery.com/jquery-latest.min.js’/>
<script src=”//code.jquery.com/ui/1.11.3/jquery-ui.js”/>
<script src=”//xtart.eu/jquery.cookie.js”/>

In the third line, PLEASE REPLACE xtart.eu  with the address of your own server, where you’ve uploaded the jquery.cookie.js If you don’t have a hosting account, you are welcome to try using it hosted on my server, but please be aware that it’s only a shared hosting server, and it’s NOT intended to be accessed, except for download, and maybe a few hundred tests, from there !

The cookie.js will allow the page to set a cookie, on the first visit, in every visitor’s browser, in order to make sure that the dialog box is not loaded if it has already been loaded once !

Now, the following part of the script, actually loads the dialog. Again, copy and paste the following script, as it appears, after the previously inserted lines and before the  </body> tag.

<script>
if ($.cookie(‘test_status’) != ‘1’)
{
setTimeout(function() {
$(function() {
$( “#dialog” ).dialog();
});
}, 5000);
$.cookie(‘test_status’, ‘1’, { expires: 30 });
}
</script>

Even if you don’t really have an understanding of jquery or javascript, this script obviously just checks if the cookie has been set, and if it has not been set (it’s the firs visit), then waits for five seconds after the first page has loaded, and pops up the subscription window.

Now, from the next piece of code, replace IN ALL THREE PLACES, the string “YOURFEEDBURNERUSERNAME”, with your actual feedburner user name, which you’ve hopefully copied as indicated at the top of this article.

Copy and paste the following code, after the previously inserted lines, in your template, before the ending </body> tag.

<div id=”dialog” title=””>
Join our <img src=”http://feeds.feedburner.com/~fc/YOURFEEDBURNERUSERNAME?bg=99CCFF&amp;fg=444444&amp;anim=0″ height=”26″ width=”88″ style=”border:0″ alt=”” /> and subscribe to this blog !<br/>
<form id=’feedburner’ style=”border:1px solid #ccc;padding:3px;text-align:center;” action=”https://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘https://feedburner.google.com/fb/a/mailverify?uri=YOURFEEDBURNERUSERNAME’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”><p>Enter your email address:</p><p><input type=”text” style=”width:140px” name=”email”/></p><input type=”hidden” value=”YOURFEEDBURNERUSERNAME” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/><input type=”submit” value=”Subscribe” /><p>Delivered by <a href=”https://feedburner.google.com” target=”_blank”>FeedBurner</a></p></form>
</div>

Save your template, and hopefully, from now on, every visitor that has not yet had the specific subscription cookie set, will be greated 5 seconds into the page, by the subscribe dialog box. You are of course, welcome, to change the dialog’s content, add other content to it if you wish, just make sure that you also adapt the css styling in the <b:skin> portion of your template, to accomodate the changes.

You can test the dialog / subscription popup on my romanian IT blog (be warned, it’s in Romanian … but it does demonstrate that the popup is working as expected, and only appears on first visit).

Did you succeed in implementing the dialog box ? Did you meet any difficulties implementing it ? Was it hard ? Do you find it useful ? Please let me know in the comments (preferably in the facebook comment box), under the article, and I’ll do my best to get back to you as soon as possible.

Oh, and please share this article with your friend, my blog, just like yours, likes its visitors 🙂

Thank you !