Quality of the content for the user could not be denied to be the most powerful weapon to increase the traffic of your website or blog. In order to provide the best thing for the user sometimes must provide something that paid should be free. It makes the user feel very satisfied for that. But we could not expected the kindness of user to subscribe or just like that being valuable feedback to our website or blog in the perception of the world (google).
On the grounds of this thinking comes an idea that necessity the user to subscribe if they want to see the links that they feel important. If any user concerned what does it mean just a subscribe or like to get things that are beneficial to them. If you are familiar with the joomla, this kind of script is available for free, you just need to setup for user registers. But for other website, blog and other CMS, that is requires additional script depending on internal system the site.
On this time I will explain how to create your own Offer Subscribe to Download Link for your blog. This is not absolutely to lock the link when the user not subscribe yet but just suggest to offers subscribe when someone want to get download link. But I've made view position as a necessity, but when user do click on "ok" button without entering their email address download link will appear as well. But this position has a tendency the user to subscribe, if entering their email address. Here is how to make it.
1. Add the additional javascript in the head section of your blog template. Go to the dashboard and click Template> Edit HTML on the head section there should be any link jquery.min.js that is the library of javascript. Ctrl + F type min.js. on this section may be there are any other javascript. Just add the script code below!
Simple Javascript Code :
<script type='text/javascript'>
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}
</script>
2. Define the CSS Rule that related with the new javascript above. Still on the edit html script code template that you use. Find the section skin, by pressing Ctrl + F and typing ]]></b:skin> and insert additional css rule below on the last part of the skin ]]></b:skin>
As shown like above add the following css rule before the last part of the skin ]]></b:skin>
div.hidden {
display: none;
}
div.promptshow {
display: block;
}
3. The last is adding div tags on particular articles which require offer subscribe to download link.
The Pictured above is the last part of the particular article in html code that you wish to offer subscribe to download link. Div tag offer subscribe to download below integrated with javascript and css rule above, the script like this
<div align="center">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=AgratitudesignImpression', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="border: 0px solid #ccc; padding: 3px; text-align: center;" target="popupwindow">
<div align="center">
<table><tbody>
<tr><td><input name="email" placeholder="Enter your email address" style="margin-top: 0px; width: 220px;" type="text" />
<input name="uri" type="hidden" value="AgratitudesignImpression" /><input name="loc" type="hidden" value="en_US" /></td>
<td><div style="text-align: center;">
<a href="https://www.blogger.com/null" onclick="change('hidden', 'promptshow');"><input style="margin-top: 3px;" type="submit" value="OK" /></a>
</div>
</td></tr>
<tr></tr>
</tbody></table>
</div>
<div class="hidden" id="hidden" type="button">
<div align="center">
<table align="center"><tbody>
<tr><td><a href="http://agratitudesign-template.googlecode.com/svn/tags/perada.zip"><button type="button">download1</button></a></td>
<td><a href="http://agratitudesign-template.googlecode.com/svn/tags/bedeg%20style.zip"><button type="button">download2</button></a></td></tr>
</tbody></table>
</div>
</div>
</form>
</div>
<form action....> is a popupwindow feedburner script from feedburner of your blog url, if you do not have feedburner click here.
<a href="http://....> is the download link of the file, adjust with your needs.
value="AgratitudesignImpression" is the sitename from your site/blog
Related Articles
Thank you .. I was looking for this for a long time.
ReplyDeleteI am asking how did you made the download link working immediately? I mean hosting files on blogger?
These link files have uploaded to the google code project server, it is not from blogger server. Thanks for your comment, make me do improvements on subscribe to download that have a problem to show the file links because losing snippet of javascript for this implementation, and now i have already fix it.
DeleteThank You so Much! Now I can share my eBook with my readers! This is one of the best tutorial I had so far for blogger. Love it
ReplyDeleteThis comment has been removed by the author.
ReplyDeletenot working properly.
ReplyDeleteonce you type the e-mail and the pop-up opens, also de download button become available.
all you have to do is click on the page and download, without subscribing.