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 pageBlogger.com.
- 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhivn-h9cSqwW58P01ubXWkDTCsPjfgr3W5EPW_BTA6q_rwQF3ClbYDmOs7E2fwXibEncchTikoVVCdWHPddvmRp72TpOdU6470qnjcpGc0iU4Hw2ahwckSZMb60eXuABPUextBBqcP_kE/s0/loader.gif)no-repeat 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxX_KOkfVusfBO8ZLTJLjpJauFWXYLAC3huROzUD_UFPF2CYGk_F7Z7IsTtiX6txGk46EC6agAJNXDTK1ubn5LCIZB2jJFMsMn9twTCYACE7PHA5aXpd7ASnUzl6zVJ_llWizjIqBnWA/s0-rw/close.png)no-repeat 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxX_KOkfVusfBO8ZLTJLjpJauFWXYLAC3huROzUD_UFPF2CYGk_F7Z7IsTtiX6txGk46EC6agAJNXDTK1ubn5LCIZB2jJFMsMn9twTCYACE7PHA5aXpd7ASnUzl6zVJ_llWizjIqBnWA/s0-rw/close.png)no-repeat 15px 50%;}.dlbutton:hover{background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMIFdWB_emySw_J1KE5_qRpPxqw0bYTSOiLhXZYPj_esJWXv2GEk1aRmWQZE9laYWS101p-mSeHAmjwIdKlwSO_WRIBWJPAHAt4_terioU1fFH0HRuydDb9_XHU7YFxIbdmzGHoud15qs/s0-rw/download.png)no-repeat 15px 50%;}.dlbutton,a.dlbutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMIFdWB_emySw_J1KE5_qRpPxqw0bYTSOiLhXZYPj_esJWXv2GEk1aRmWQZE9laYWS101p-mSeHAmjwIdKlwSO_WRIBWJPAHAt4_terioU1fFH0HRuydDb9_XHU7YFxIbdmzGHoud15qs/s0-rw/download.png)no-repeat 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'>
//<![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("dl")
document.getElementById('view').src = url;
document.getElementById('dl').href = download;
};
//]]>
</script>
<div id='Preview-Page'>
<a class='demologo' href='https://www.jirale.com'>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').style.top='0';document.getElementById('view').style.height='100%''>Remove Frame</a>
</div>
<iframe id='view'/>Now copy the following address and modify it with your website links
https://www.jirale.com/p/preview.html?url=https://www.jirale.com&dl=https://drive.google.com/drive
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 :)
Telegram
CONCLUSION
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.
©Copyright: Jirale.com™