Ads are pain !! But this is only way to manage server cost. Join Group!

How to Create a Preview Page in Blogger

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


Preview page in Blogger

The preview page on sites specialized in downloading a Blogger template is important because it provides users with a preview of the template before downloading and without leaving the landing page. However, many have trouble downloading and using the right templates correctly. Here comes the importance of creating a preview page to clarify the final appearance of the template before downloading and using it.

What is the importance of creating a preview page?

The preview page plays a crucial role in making users ascertain that the template they intend to download matches their needs and expectations. Instead of randomly trying out templates and testing them live, users can see a preview of the template and make sure it fits with their content and blog vision.

How to create a preview page

If you own a blog, download a template, and want to create a preview page. I present to you this code that provides a preview of the template with a download button from the same page.

To create a preview page in Blogger, you can follow these steps:

  • Go to the home
  • Then click on the menu on the right side and go to Pages.
  • Create a new page and name it Preview Page.
  • From within the page you created, click on the HTML tab.
  • Now copy the following code paste it on the page and save the work.

<style>.blogMn{display:none;}.navS{display:none;}.footer{display:none;}.wvC{display:none;}.header{display:none;}.mobMn{display:none;}.brdCmb{display:none;}.pTtl{display:none;}#view{padding:0;margin:0;border:0;position:fixed;top:50px;left:0;right:0;bottom:0;width:100%;height:93%;background:url( center center;transition:all .4s ease-out;}#Preview-Page{width:100%;height:50px;top:0;left:0;background:var(--notifC);transition:var(--trans-1);color:white;font:normal 13px;z-index:99999;position:fixed;}.closebutton{background:var(--themeC) url( 15px 50%;text-align:center;height:50px;padding:0 20px 0 50px;position:fixed;top:0;right:0;line-height:50px;cursor:pointer;color:white;}a.closebutton{color:white;text-decoration:none;}.closebutton:hover{background:#579c26 url( 15px 50%;}.dlbutton:hover{background:#579c26 url( 15px 50%;}.dlbutton,a.dlbutton{background:url( 15px 50%;text-align:center;height:50px;padding:0 20px 0 55px;position:fixed;top:0;right:158px;line-height:50px;cursor:pointer;color:white;text-decoration:none;}.demologo,a.demologo{padding-left:30px;font-size:17px;font-weight:normal;text-transform:uppercase;line-height:50px;left:15px;position:fixed;color:white;text-decoration:none;}</style>
<script type='text/javascript'>
function getQueryVariable(variable) {
  var query =;
  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("dl")
 document.getElementById('view').src = url;
 document.getElementById('dl').href = download;
<div id='Preview-Page'>
  <a class='demologo' href=''>Homepage</a>
  <a class='dlbutton' href='' id='dl'>Download</a>
  <a class='closebutton' href='javascript:void(0)' onclick='document.getElementById('Preview-Page').style.display='none';document.getElementById('view')'0';document.getElementById('view').style.height='100%''>Remove Frame</a>
<iframe id='view'/>

Now copy the following address and modify it with your website links

Our topic on “ How to create a preview page in Blogger ” ends here, and we will meet on a new topic on Jirale blog. May you always be safe :)



In this article, I shared with you How to Create a Preview Page in Blogger. I hope you have liked It. Please do share it with your friends and follow our blog for more.

If you face any problems in Demo, Download or have any questions so feel free to ask me in comments section or join our Telegram Channel to get the lastest posts updates daily.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.

Jirale offers expert insights on technology, gadgets, software, and more. Explore our articles to stay ahead in the fast-paced world of tech.


  1. This blog gonna very helpful for me. I stuck in some type of this problem. But now I am very grateful! couple rings
  2. Sorry I forgot to mention that please keep posting this type of blog in up coming days. digital marketing consultant
  3. Best content so far i've seen, You're always inspiring us , keep going like that. how to start dropshipping for free on amazon
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.