The Importance of Creating a Preview Page in Blogger
When it comes to downloading Blogger templates, users often face a dilemma. They want to ensure that the template they choose matches their needs and expectations, but they don't want to waste time downloading and testing multiple templates. This is where a preview page comes in – a crucial element allowing users to see a template before downloading it.
Why Create a Preview Page?
A preview page is vital in helping users make informed decisions about the templates they download. By providing a sneak peek into the template's design, layout, and features, a preview page enables users to:
- - Ensure the template aligns with their blog's content and vision
- - Avoid wasting time downloading and testing unsuitable templates
- - Make informed decisions about the template's customization options
How to Create a Preview Page in Blogger
Creating a preview page in Blogger is a straightforward process. Here's a step-by-step guide:
Step 1: Create a New Page
- Log in to your Blogger account and navigate to the Pages section.
- Click on the New page button.
- Enter a title for your preview page (e.g., "Preview Page").
- Set the page type to Web page.
Step 2: Add the Preview Page Code
- From within the page you created, click on the HTML tab.
- Copy the following code and paste it into the page:
<style type="text/css">
/*<![CDATA[*/
body {
overflow: hidden!important
}
body:before {
content: "";
background: #fff;
position: fixed;
z-index: 99999;
left: 0;
right: 0;
bottom: 0;
top: 0
}
#preview-iframe {
box-shadow: 0 0 20px rgba(0,0,0,.15);
z-index: 99999;
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 54px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
transition: all .4s ease-out;
margin: 0 auto
}
#nav-demo {
width: 100%;
top: 0;
left: 0;
color: #fff;
position: fixed;
-webkit-transform: translateZ(0);
font-size: 12px;
height: 54px;
background-color: #ffffff;
z-index: 100;
line-height: 47px;
margin-bottom: 1px;
z-index: 99999999;
border-bottom: 1px solid #e6e6e6
}
.preview__logo {
border-right: 1px solid var(--linkB)
}
.preview__actions a:hover {
background-color: #e6e6e6;
color: #e05a2f
}
.preview__actions a i,.preview__action--close a i {
margin-right: 9px
}
.preview__info {
float: right;
padding: 0 8px;
overflow: hidden;
height: 100%
}
.preview__actions,.preview__logo,.preview__action--close {
float: left;
padding: 0 10px
}
.preview__action--close {
border-right: 1px solid var(--linkB)
}
.preview__logo a,.preview__action--close a {
vertical-align: super;
font-size: 15px;
text-decoration: none;
display: inline-block;
padding: 0 10px
}
.preview__actions a {
font-size: 14px;
line-height: 1.5;
background-color: var(--linkB);
color: #fff;
box-sizing: border-box;
display: inline-block;
margin: 0;
border: none;
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
padding: 9px;
-webkit-box-shadow: 0 2px 0 #e6e6e6;
box-shadow: 0 2px 0 #e6e6e6;
position: relative;
transition: all .4s ease-out;
margin-right: 5px
}
.responsive {
float: left;
height: 30px;
margin: 12px 0 0 29%
}
.responsive .btn_responsive {
cursor: pointer;
float: right;
width: 30px;
height: 30px;
padding: 0;
margin: 0 5px 0 0;
border-radius: 3px;
outline: 0;
border: 0;
background: rgba(230, 230, 230) url(https://bit.ly/2NW4ghE);
transition: background-color .15s ease,background-position .15s ease
}
.responsive .btn_responsive.desktop {
background-position: 0 -30px
}
.responsive .btn_responsive.desktop:hover,.responsive .btn_responsive.desktop.active {
background-position: 0 0
}
.responsive .btn_responsive.iPad {
background-position: -30px -30px
}
.responsive .btn_responsive.iPad:hover,.responsive .btn_responsive.iPad.active {
background-position: -30px 0
}
.responsive .btn_responsive.tab-square {
background-position: -60px -30px
}
.responsive .btn_responsive.tab-square:hover,.responsive .btn_responsive.tab-square.active {
background-position: -60px 0
}
.responsive .btn_responsive.phone {
background-position: -90px -30px
}
.responsive .btn_responsive.phone:hover,.responsive .btn_responsive.phone.active {
background-position: -90px 0
}
.responsive .btn_responsive.portrait-phone {
background-position: -120px -30px
}
.responsive .btn_responsive.portrait-phone:hover,.responsive .btn_responsive.portrait-phone.active {
background-position: -120px 0
}
.responsive .btn_responsive:hover {
background-color: var(--linkB)
}
.responsive .btn_responsive.active {
background-color: var(--linkB)
}
a.postbutton.toggle i {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.preview__actions a[href='undefined'] {
display: none
}
.preview__actions a[href=''] {
display: none
}
/*]]>*/
</style>
<script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(".nia-Preview").each(function() {
var s = {};
document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function() {
function e(s) {
return decodeURIComponent(s.split("+").join(" "))
}
s[e(arguments[1])] = e(arguments[2])
});
var e = s.dl
, a = s.buy
, t = s.demo
, i = '<div id="nav-demo"><div class="preview__logo"><svg fill="#000000" height="256px" width="256px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-4.25 -4.25 32.13 32.13" xml:space="preserve" stroke="#000000" stroke-width="0.00023631" transform="matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)"><path transform="translate(-4.25, -4.25), scale(2.008125)" fill="#7ed0ec" d="M9.166.33a2.25 2.25 0 00-2.332 0l-5.25 3.182A2.25 2.25 0 00.5 5.436v5.128a2.25 2.25 0 001.084 1.924l5.25 3.182a2.25 2.25 0 002.332 0l5.25-3.182a2.25 2.25 0 001.084-1.924V5.436a2.25 2.25 0 00-1.084-1.924L9.166.33z" strokewidth="0"></path></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#ffffff" stroke-width="0.614406"> <g> <g> <polygon points="0,0.663 9.401,0.663 15.882,7.146 15.882,14.127 5.307,3.608 5.274,22.969 0,22.969 "></polygon> <polygon points="23.631,22.969 14.232,22.969 7.752,16.485 7.752,9.501 18.327,20.018 18.359,0.662 23.631,0.662 "></polygon> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </g> </g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon points="0,0.663 9.401,0.663 15.882,7.146 15.882,14.127 5.307,3.608 5.274,22.969 0,22.969 "></polygon> <polygon points="23.631,22.969 14.232,22.969 7.752,16.485 7.752,9.501 18.327,20.018 18.359,0.662 23.631,0.662 "></polygon> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </g> </g></svg><a class="demologo" href="' + window.location.origin + '"><b>NiaDzgn</b></a></div><div class="preview__info"><div class="preview__actions"><a class="dlbutton" href="' + e + '">Download <i class="fa fa-download"></i></a><a class="buybutton" href="' + a + '">buying<i class="fa fa-shopping-cart"></i></a></div><div class="preview__action--close"><a class="closebutton" href="javascript:void(0)">Delete frame<i class="fa fa-close"></i></a></div></div><div class="responsive"><button class="btn_responsive desktop active"></button><button class="btn_responsive tab-square"></button><button class="btn_responsive iPad"></button><button class="btn_responsive portrait-phone"></button><button class="btn_responsive phone"></button></div></div>';
$("body").prepend(i + '<iframe id="preview-iframe" src="' + t + '"></iframe>'),
$(".closebutton").click(function() {
$("body").removeClass("toggle"),
$("body").removeClass("toggle2"),
document.getElementById("nav-demo").style.display = "none",
document.getElementById("preview-iframe").style.top = "0",
document.getElementById("preview-iframe").style.height = "100%"
}),
$(".responsive .btn_responsive").on("click", function() {
$("body").removeClass("toggle");
var s = $(".responsive .active")
, e = $("iframe#preview-iframe");
$(this).hasClass("desktop") ? (s.removeClass("active"),
$(this).addClass("active"),
e.css({
width: "100%"
})) : $(this).hasClass("tab-square") ? (s.removeClass("active"),
$(this).addClass("active"),
e.css({
background: "rgb(255,255,255)",
width: "1024px"
})) : $(this).hasClass("iPad") ? (s.removeClass("active"),
$(this).addClass("active"),
e.css({
width: "783px"
})) : $(this).hasClass("portrait-phone") ? (s.removeClass("active"),
$(this).addClass("active"),
e.css({
width: "495px"
})) : $(this).hasClass("phone") && (s.removeClass("active"),
$(this).addClass("active"),
e.css({
width: "335px"
}))
})
})
});
function loadCSS(e, t, n) {
"use strict";
var i = window.document.createElement("link");
var o = t || window.document.getElementsByTagName("script")[0];
i.rel = "stylesheet";
i.href = e;
i.media = "only x";
o.parentNode.insertBefore(i, o);
setTimeout(function() {
i.media = n || "all"
})
}
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
<div class="nia-Preview"></div>
Preview page link generator tool:
Step 3: Save and Publish
- Click Save to save the changes.
- Publish the page to make it visible to the public.
By following these simple steps, you can create a preview page in Blogger that showcases your template in action. This will help users make informed decisions about downloading your template, ultimately leading to a better user experience.
