How To Create a Demo Page In Blogger

Posted by OG Superman in: How To
How to create a demo and download page in blogger-earcontra.com

I have always thought of writing this a post on this topic for a while now. It came to my mind when I wanted to sell a template on themeforest and I was asked for the Demo page which there was no way I an have access to the root directory of my blogger blog. Unlike Wordpress, you just have to get to the file directory of on your website to implement a demo theme.

In this post I will show you how to do it also on blogger with a few easy steps, everything will be working in no time. Take a look closely at the url of the demo example link of a newspaper template I created sometime ago.


  • Step 1. Create a new page. Name this page DEMO

  • Step 2. Under the Page settings >> Options >> Readers comment, Select "Interpret typed HTML" and "Use <br> tag."

  • Step 3. Switch to the HTML editor and paste the below code inside the text field and publish the page.

<div height="100%" id="iframe-container" width="100%">
< style>
body { padding: 0!important; background: none!important; }
#iframe-container { overflow: hidden; background: none!important; }
#frame { border: 0; }
< /style>
< iframe frameborder="0" id="frame" src="" width="100%"> </iframe>
< /div>
< script>
document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no"; // ie only
var query = window.location.search.substring(1);
query = query.replace("url=", "");
$('#frame').attr('src', query);
var str = $('#iframe-container').html();
$('#EARCONTRA-REDIRECTION').html(str);
$('iframe').height($(window).height());
< /script>

What you have to do now again is create the same another page and. This time, name the page DOWNLOAD.



Make sure you repeat the above steps again. for the download page. Don't forget to set the Page settings as mentioned above.

The next step now will be getting into your blogger HTML template. To do this, Login to your Blogger Dashboard. Head over to Template >> Edit HTML.



Select the HTML box and use crtl + F on your keyboard to search for the opening <body> tag. Paste the below code immediately below it.



<div id='EARCONTRA-REDIRECTION'>&#160;


Again, search for the closing </body> tag and paste the below code immediately above it.



</div><!--Redirection ends-->



Now, you are going to have to search for ]]></b:skin>  tag and place the below code immediately below the tag.

<script>
//<![CDATA[
$(document).ready(function () {
$('[data-Earcontrademo]').click(function (e) {
e.preventDefault();
var target = e.target || e.srcElement;
if ($(target).attr('target') == "_blank") {
window.open("http://www.earcontra.com/p/demo.html?url=" + $(target).attr('href'), '_blank');
} else {
window.location = "http://www.earcontra.com/p/demo.html?url=" + $(target).attr('href');
}
});

$('[data-Earcontradownload]').click(function (e) {
e.preventDefault();
var target = e.target || e.srcElement;
if ($(target).attr('target') == "_blank") {
window.open("http://www.earcontra.com/p/download.html?url=" + $(target).attr('href'), '_blank');
} else {
window.location = "http://www.earcontra.com/p/download.html?url=" + $(target).attr('href');
}
});
});
//]]>
</script>

Note: replace the red and blue highlights with your own page link

Now, when creating a post and you want to include a demo and download link, Just follow the below steps. Switch to the HTML editor and paste the below code for your Demo or Download button.

For Demo link, replace the hash symbol with the url of the page you want to use as demo

<a href="#your-demo-page.html?url=#the-website-you-are-showing-as-demo/" target="_blank"  rel="nofollow" data-Earcontrademo="true">DEMO</a>

For Download link, replace the bolded hash symbol text with the url of  the demo page you created earlier and the other hash symbolic text with the link of the website you are showing as demo. Same goes for the download link.

<a href="#your-download-page.html?url=#the-website-you-are-showing-as-download/" target="_blank"  rel="nofollow" data-Earcontrademo="true">DOWNLOAD</a>

That's how to implement the demo and download link page. If you have any questions or need extra help, please use the comment box below.


0 comments:

Post a Comment

Note: only a member of this blog may post a comment.