How to create a stylish template demo or live preview page on Blogger

bySetyo Wibowo ID - 0
How to create a stylish template demo or live preview page on Blogger

 Most theme sharing sites have a demo or live preview page where users can preview the demo of the template they are interested in buying.

If your template sharing site is on Blogger, you may be thinking of how to create a stylish demo page like the one we have here.

Today, we are going to show you how to create a stylish template demo or live preview page on Blogger. And what's good about this template demo or live preview page is that, just like the case with many sites, it's got a download button and option to remove the frame.

Features of this Blogger widget

  • Responsive
  • Light-weight code
  • Direct template download button on the demo page
  • Remove or close the frame button
  • Site logo.
  • Stylish

Creating the demo or live preview page

sample demo page


Now let's talk about the steps involved in creating your template demo or live preview page on Blogger.

Create the demo page

The first thing you will have to do is create a new page a name is "Demo" or "Live Preview" it will depend on your taste!

Adding the CSS code to your template

  • After creating the new page, publish it and then from your Blogger Dashboard, go to theme > Edit HTML
  • Next, search for the tag ]]></b:skin> and paste the following CSS code just above (BEFORE) it.


/*  Blogger demo page*/

#view {
   padding: 0;
   margin: 0;
   border: 0;
   position: fixed;
   top: 50px;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 93%;
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMvQCPcGeFlQzh8lue8wMyxfp9sgwuoFrAiRBb4G_pO58jq7Z6yxaYYKRDBNB6jmI9MQItgCuqCOJx4GqIvMP_u7dWK36fJ6Q__URmOzJN8YVcDTvDj2rTfIBPbotqBNZmUgLAIKPc25s/s1600/hourglass.gif)no-repeat center center;
   transition:all .4s ease-out;
}

#tab-demo {
   width:100%;
   height:50px;
   top:0;
   left: 0;
   background:#222;
   color:white;
   font:normal 13px Arial, sans-serif;
   z-index:99999;
   position:fixed;
}

.closebutton {
   background:#BCFF8B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRjHb_h3M7F29heCnLIVcG-7yAg3x7QHS27DhcWonEfSqV1GXMkRB8s8_9O11PY6gsaFockmQpDzml58cyjleo6BrAelj1kyHJ5bor7_7DQ8fp_GFNRvtFeJE9OZPZ7d5mEa5rUADZMWE/s1600/close.png)no-repeat 15px 50%;
   text-align:center;
   height:50px;
   padding:0px 20px 0px 50px;
   position:fixed;
   top:0;
   right:0;
   line-height:50px;
   cursor:default;
   color:white;
}


a.closebutton {color:white;text-decoration:none;}

.closebutton:hover {background:#FF0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRjHb_h3M7F29heCnLIVcG-7yAg3x7QHS27DhcWonEfSqV1GXMkRB8s8_9O11PY6gsaFockmQpDzml58cyjleo6BrAelj1kyHJ5bor7_7DQ8fp_GFNRvtFeJE9OZPZ7d5mEa5rUADZMWE/s1600/close.png)no-repeat 15px 50%}

.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCnEEWolQg_0AxSK8SjLT-SWxQ2eHyEBO6kVPbGFvv_gL7ilBwSzpFeR8F7UEIGPv-H_hFBkd0OLjkNK8JW0N5g1x_qU0zQbSHvA2mydlXUd6GELu00sGoN_HIjCCxh28Ja1YohM7cRvM/s1600/download.png)no-repeat 15px 50%}

.dlbutton, a.dlbutton {
   background:#66af33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCnEEWolQg_0AxSK8SjLT-SWxQ2eHyEBO6kVPbGFvv_gL7ilBwSzpFeR8F7UEIGPv-H_hFBkd0OLjkNK8JW0N5g1x_qU0zQbSHvA2mydlXUd6GELu00sGoN_HIjCCxh28Ja1YohM7cRvM/s1600/download.png)no-repeat 15px 50%;
   text-align:center;
   height:50px;
   padding:0px 20px 0px 55px;
   position:fixed;
   top:0;
   right:158px;
   line-height:50px;
   cursor:default;
   color:white;
   text-decoration:none;
}

.demologo, a.demologo {
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpsMMle37WmeOnkNmOkmQM3-2cHbSfzZuy-G8gfYoZcIyD_kqutdiJB_zKeePiy7neNrrbQjjNnrtBDZgme9itTSS04RhU1iN6bdfjZHPJdZzRfkz1siSzJi8BR05sXEFvPC6exYAzddtR/s50/photo_2020-07-09_01-45-24.jpg)no-repeat left center;
   padding-left:55px;
   font-size:17px;
   font-weight:normal;
   font-family:Oswald, Arial, Sans-serif;
   text-transform:uppercase;
   line-height:50px;
   left:15px;
   position:fixed;
   color:white;
   cursor:default;
   text-decoration:none;
}
  • After pasting the above code, proceed to the next step.

Adding HTML & JavaScript code for the demo or preview page

The next thing will want to do after adding the CSS code unique to our demo page will be adding the  HTML code and JavaScript code.

Also, for the demo page to show as a full-page without all the other gadgets and blog sections like the sidebars, footer, header, will make use of the Blogger conditional tag to exclude all other website sections from the demo page.
  • Start by searching for the opening body tag <body
  • Now just after the opening body tag, paste this line of code. You will have to change the link (in green) to that of you demo page you created earlier
<b:if cond='data:blog.url != &quot;https://www.bloggercustomiz.com/p/demo.html&quot;'>
  • Next, we will have to close the conditional tag code we just pasted below the opening body tag. Search for the closing body tag </body> and paste this code just above it.
</b:if>
  • And finally, adding this line of code  again just before the closing body tag

<b:if cond='data:blog.url == &quot;https://www.bloggercustomiz.com/p/demo.html&quot;'>
<script type='text/javascript'>
//<![CDATA[
function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    }
    return (false);
}
window.onload = function() {
 var url  = getQueryVariable("url");
 var download  = getQueryVariable("download")
 document.getElementById('view').src = url;
 document.getElementById('dl').href = download;
};
//]]>
</script>

<div id='tab-demo'>
  <a class='demologo' href='https://www.bloggercustomiz.com'>Blogger Customiz</a>
<a class='dlbutton' href='' id='dl'>Download</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Remove Frame</a>
</div>
<iframe id='view'/>
<style>
body {
background:white;
}
</style>
</b:if>

You will have to make these changes;
  1. Change the demo page link in green to that of your demo page you created earlier
  2. Also, change the blog link in red to that of your blog
  3. and finally the blog Title in Orange
Save your template.

Creating a demo link for templates

Now to create a demo link or preview link use this format


https://www.bloggercustomiz.com/p/demo.html?url='Demo_Site_Link'&download='template_download_link'

Make these changes:
  1. template_download_link = Downoad ink for the template
  2. https://www.bloggercustomiz.com/p/demo.html: Replace with your demo page link
  3. Demo_Site_Link = Link of demo iste to be previewed.
An example of a demo link for the App Business template and the download link is

https://www.bloggercustomiz.com/p/demo.html?url=https://appbusiness-goomsite.blogspot.com&download=https://bit.ly/35NQ8T4
Tags:

Post a Comment (0)

أحدث أقدم