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.
CONCLUSION
In this article, I shared with you Unlock the Power of Preview Pages in Blogger: A Beginner's Guide. I hope you found it helpful and informative. Please share it with your friends and follow our blog for more updates.
If you face any problems in demo, download, or have any questions, feel free to ask me in the comments section or join our Telegram Channel to get the latest posts and updates daily.
Note: All posts shared here are only for educational and informational purposes. We respect the rights of original creators. If you are the content owner and have any concerns, please contact us for review.