Cara Membuat Halaman Demo Template di Blogger

Berikut ini cara Cara Membuat Halaman Demo Template di Blogger atau Membuat Page Demo Template di Blog. Khususnya bagi Anda yang membagikan template blog gratis.

#1. Cara Membuat Halaman Demo Template di Blogger

Langkah 1:

Buat Halaman Statis dengan judul Demo atau Demo Template dll.

Pada bagian isi, terserah tulis apa saja, atau kosongkan juga tidak apa-apa. Lalu publish.

Langkah 2:

Masuk ke Template -> Edit HTML. Simpan kode CSS ini di atas ]]></b:skin> atau </style>

#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/AVvXsEjyfMlvP39rmY9ppgd60TRoH9BKL7px_dJ_5aJB7Iz8y9KY20xRaVJQxB5IJfyrCv99KhMNmT8vPBCJfF2dFPv6MfAXVUVBDz3DAMoGnFkLoWNDdmHJ6g07DbUnCzrGBGK4QN9b43-9pNE/s1600/loader.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:#66af33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQKTspeybTxyg5lwsPTk0QwW1YuqK1SPH5NPniDGnv8dG-6M_snYHI9XSQgCh0RAUy6DzLhxckkuRX_pYI2HJRLMXLC09vTkUO-BEjHXIhtY6SM6QSESZaEWO6B7LaPSh3zu94wo4eY0/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:pointer;

color:white;

}

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

.closebutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQKTspeybTxyg5lwsPTk0QwW1YuqK1SPH5NPniDGnv8dG-6M_snYHI9XSQgCh0RAUy6DzLhxckkuRX_pYI2HJRLMXLC09vTkUO-BEjHXIhtY6SM6QSESZaEWO6B7LaPSh3zu94wo4eY0/s1600/close.png)no-repeat 15px 50%}

.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXRXTX-DBodPCxJdBqE9BLa5gjdCKSn84U8AU_mWM9831MRiz_Euyb7G-T0UPAbeNnUHwZ7pI9UhYZDL4PXsQdfymV-tnM-1p-LkfcX0soD888U6hOOoCI4fG_MBpwscm3Pmo4_2nfvRM/s1600/download.png)no-repeat 15px 50%}

.dlbutton, a.dlbutton {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXRXTX-DBodPCxJdBqE9BLa5gjdCKSn84U8AU_mWM9831MRiz_Euyb7G-T0UPAbeNnUHwZ7pI9UhYZDL4PXsQdfymV-tnM-1p-LkfcX0soD888U6hOOoCI4fG_MBpwscm3Pmo4_2nfvRM/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:pointer;

color:white;

text-decoration:none;

}

.demologo, a.demologo {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4KkCr9IqTlWLgTjP6uRCTRN_E9jgSO4_KU7Rd6PFyQh94SVhBh4m8PM8aV1FIxlhrjxhMMniuwgOlMwe3xhvzyXKdtXnTzQi4cCKhSY0xfUXAFDkfQ96dag3Z46K9KjQXm4xTds08iHM/s1600/ki-logo.png)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;

text-decoration:none;

}

Langkah 3 :

Simpan kode ini tepat di bawah <body>

<b:if cond='data:blog.url != "https://template.contohblog.com/p/template-demo.html"'/>

Langkah 4 :

Simpan kode ini tepat di atas </body>

</b:if>

<b:if cond='data:blog.url == "https://template.contohblog.com/p/template-demo.html"'>

//<![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>

<a class='demologo' href='https://template.contohblog.com/'>Template Demo</a>

<a class='dlbutton' href='' id='dl'>Download</a>

<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById('tab-demo').style.display='none';document.getElementById('view').style.top='0';document.getElementById('view').style.height='100%''>Remove Frame</a>

</div>

<style>

body {

background:white;

}

</style>

</b:if>

Ganti lagi kode yang ditandai dengan URL halaman blog demo sobat.

Format Penulisan

Untuk pemanggilan URL template dan link download, buat tombol Demo & Dowload dan masukkan link dengan format ini:

http://blogsobat.blogspot.com/p/demo.htm?url=URL_Blog_Demo&download=URL_Download

Sumber

#2. Cara Membuat Halaman Demo Template di Blogger

Berikut ini Cara Membuat Halaman Demo Template Di Blogger Dengan Responsive Tool.

Langkah Pertama

Buat halaman statis untuk menampilkan demo, lalu simpan kode di bawah ini di dalam postingan HTML, lalu publikasikan.

<style type='text/css' scoped=''>
/*<![CDATA[*/
.mega-wrapper,.post-title,.postmeta,.creditpic{display:none}
body {background:white;overflow: auto;}
#tab-demo,#view{width:100%;left:0}
.closebutton,.dlbutton,a.dlbutton{text-align:center;cursor:pointer;top:0;height:50px}
#view{padding:0;margin:0;border:0;position:fixed;top:50px;right:0;bottom:0;height:calc(100% - 50px);background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyfMlvP39rmY9ppgd60TRoH9BKL7px_dJ_5aJB7Iz8y9KY20xRaVJQxB5IJfyrCv99KhMNmT8vPBCJfF2dFPv6MfAXVUVBDz3DAMoGnFkLoWNDdmHJ6g07DbUnCzrGBGK4QN9b43-9pNE/s1600/loader.gif) center center no-repeat;transition:all .4s ease-out;box-shadow: 0 0 40px rgba(0,0,0,0.2);}
#tab-demo{height:50px;top:0;background:#222;color:#fff;font:400 13px Arial,sans-serif;z-index:99999;position:fixed}
.closebutton,.demologo,.dlbutton,a.demologo,a.dlbutton{line-height:50px;position:fixed;color:#fff}
.closebutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQKTspeybTxyg5lwsPTk0QwW1YuqK1SPH5NPniDGnv8dG-6M_snYHI9XSQgCh0RAUy6DzLhxckkuRX_pYI2HJRLMXLC09vTkUO-BEjHXIhtY6SM6QSESZaEWO6B7LaPSh3zu94wo4eY0/s1600/close.png) 15px 50% no-repeat #66af33;padding:0 20px 0 50px;right:0}
a.closebutton{color:#fff;text-decoration:none}
.closebutton:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQKTspeybTxyg5lwsPTk0QwW1YuqK1SPH5NPniDGnv8dG-6M_snYHI9XSQgCh0RAUy6DzLhxckkuRX_pYI2HJRLMXLC09vTkUO-BEjHXIhtY6SM6QSESZaEWO6B7LaPSh3zu94wo4eY0/s1600/close.png) 15px 50% no-repeat #579c26}
.dlbutton:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXRXTX-DBodPCxJdBqE9BLa5gjdCKSn84U8AU_mWM9831MRiz_Euyb7G-T0UPAbeNnUHwZ7pI9UhYZDL4PXsQdfymV-tnM-1p-LkfcX0soD888U6hOOoCI4fG_MBpwscm3Pmo4_2nfvRM/s1600/download.png) 15px 50% no-repeat #579c26}
.dlbutton,a.dlbutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXRXTX-DBodPCxJdBqE9BLa5gjdCKSn84U8AU_mWM9831MRiz_Euyb7G-T0UPAbeNnUHwZ7pI9UhYZDL4PXsQdfymV-tnM-1p-LkfcX0soD888U6hOOoCI4fG_MBpwscm3Pmo4_2nfvRM/s1600/download.png) 15px 50% no-repeat;padding:0 20px 0 55px;right:158px;text-decoration:none}
.demologo,a.demologo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4KkCr9IqTlWLgTjP6uRCTRN_E9jgSO4_KU7Rd6PFyQh94SVhBh4m8PM8aV1FIxlhrjxhMMniuwgOlMwe3xhvzyXKdtXnTzQi4cCKhSY0xfUXAFDkfQ96dag3Z46K9KjQXm4xTds08iHM/s1600/ki-logo.png) left center no-repeat;padding-left:55px;font-size:17px;font-weight:400;font-family:Oswald,Arial,Sans-serif;text-transform:uppercase;left:15px;text-decoration:none}
.logo{display:inline;float:left;}
ul.resize-tool,ul.resize-tool li{list-style:none}
ul.resize-tool{display:inline;float:left;margin:0 0 0 50px!important}
ul.resize-tool li{display:inline;float:left;height:50px;line-height:50px;margin:0 20px 0 0}
ul.resize-tool li svg{vertical-align:middle}
ul.resize-tool li a:active svg path,ul.resize-tool li a:focus svg path{fill:red}
.w1024{width:1024px!important;height:600px!important;position:absolute!important;margin-bottom:50px!important}
.w960{width:600px!important;height:960px!important;position:absolute!important;margin-bottom:50px!important}
.w600{width:960px!important;height:600px!important;position:absolute!important;margin-bottom:50px!important}
.w414{width:414px!important;height:736px!important;position:absolute!important;margin-bottom:50px!important}
.w736{width:736px!important;height:414px!important;position:absolute!important;margin-bottom:50px!important}
.w320{width:320px!important;height:480px!important;position:absolute!important;margin-bottom:50px!important}
.w480{width:480px!important;height:320px!important;position:absolute!important;margin-bottom:50px!important}
/*]]>*/
</style>

<div id='tab-demo'>
<a class='logo' href='https://template.contohblog.com/'><img alt='cb templates' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrYFzn3OEDrzXYvyI_5ALyqil9Oe1pdt_fgQe1cG9-5uWxht0kPaP2JkksPAo1aYTudxcdSyqjhGZdtMgS-KhoZYxdC8d_zuvX4a8n6QfLjGIpUXeSmduFkrnKaj46kfXPS-RLfUA04I8/s1600/cb+fav.png' title='cb templates' width='212'/></a><ul class='resize-tool'>
<li>
<a href='javascript:;' onclick='w1024();'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M21,14H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10L8,21V22H16V21L14,18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z' fill='#fff'/>
</svg></a>
  </li>
<li>
<a href='javascript:;' onclick='w960();'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M19,19H4V3H19M11.5,23A1.5,1.5 0 0,1 10,21.5A1.5,1.5 0 0,1 11.5,20A1.5,1.5 0 0,1 13,21.5A1.5,1.5 0 0,1 11.5,23M18.5,0H4.5A2.5,2.5 0 0,0 2,2.5V21.5A2.5,2.5 0 0,0 4.5,24H18.5A2.5,2.5 0 0,0 21,21.5V2.5A2.5,2.5 0 0,0 18.5,0Z' fill='#fff'/>
</svg></a>
<a href='javascript:;' onclick='w600();'>
<svg style='width:24px;height:24px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-bottom:-7px' viewBox='0 0 24 24'>
    <path d='M19,19H4V3H19M11.5,23A1.5,1.5 0 0,1 10,21.5A1.5,1.5 0 0,1 11.5,20A1.5,1.5 0 0,1 13,21.5A1.5,1.5 0 0,1 11.5,23M18.5,0H4.5A2.5,2.5 0 0,0 2,2.5V21.5A2.5,2.5 0 0,0 4.5,24H18.5A2.5,2.5 0 0,0 21,21.5V2.5A2.5,2.5 0 0,0 18.5,0Z' fill='#fff'/>
</svg></a>
  </li>
<li>
<a href='javascript:;' onclick='w414();'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z' fill='#fff'/>
</svg></a>
<a href='javascript:;' onclick='w736();'>
<svg style='width:24px;height:24px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-bottom:-10px' viewBox='0 0 24 24'>
    <path d='M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z' fill='#fff'/>
</svg></a>
  </li>
<li>
<a href='javascript:;' onclick='w320();'>
<svg style='width:20px;height:20px' viewBox='0 0 24 24'>
    <path d='M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z' fill='#fff'/>
</svg></a>
<a href='javascript:;' onclick='w480();'>
<svg style='width:20px;height:20px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-bottom:-10px' viewBox='0 0 24 24'>
    <path d='M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z' fill='#fff'/>
</svg></a>
  </li>
<li>
<a href='javascript:;' onclick='refresh();'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z' fill='#fff'/>
</svg></a>
  </li>
  </ul>
<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>

<script type='text/javascript'>
//<![CDATA[
function getQueryVariable(e){for(var t=window.location.search.substring(1),n=t.split("&"),r=0;r<n.length;r++){var a=n[r].split("=");if(a[0]==e)return a[1]}return!1}function w1024(){document.getElementById("view").className="w1024";var e=getQueryVariable("url");document.getElementById("view").src=e}function w960(){document.getElementById("view").className="w960";var e=getQueryVariable("url");document.getElementById("view").src=e}function w600(){document.getElementById("view").className="w600";var e=getQueryVariable("url");document.getElementById("view").src=e}function w414(){document.getElementById("view").className="w414";var e=getQueryVariable("url");document.getElementById("view").src=e}function w736(){document.getElementById("view").className="w736";var e=getQueryVariable("url");document.getElementById("view").src=e}function w320(){document.getElementById("view").className="w320";var e=getQueryVariable("url");document.getElementById("view").src=e}function w480(){document.getElementById("view").className="w480";var e=getQueryVariable("url");document.getElementById("view").src=e}function refresh(){location.reload()}window.onload=function(){var e=getQueryVariable("url");document.getElementById("view").src=e};

//]]>
</script>
<iframe id='view'></iframe>

Silahkan sesuaikan untuk URL homepage dan logo blognya pada kode berikut:

<a class='logo' href='https://template.contohblog.com/'><img alt='cb templates' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBcX2rWt-WnETpQmmq5L1VgYQvOY18aNszQ2bPt3YIf7xa5QwsrKDABQoJ8N_5n1iiCPQxDml-XBPsKKKp7_sTH_pWf8QGxjVwaTjxepmFqQT6s8SG2DwD-FDUqpT47E5McMBqeGdJMI/s1600/mfemplates.png' title='mftemplates' width='212'/></a>

Langkah Kedua

Ini adalah untuk format penulisan di dalam postingan untuk menampilkan tombol demo template. Silahkan gunakan format di bawah ini untuk URL link demo template:

url_halaman_static_demo_template.html?url=url_demo_template

Contoh:

https://template.contohblog.com/p/demo-template.html?url=http://cbtheme.blogspot.com/

Itu dia

Sumber

Desain Blog

Blogger Bandung

Cara Membuat Halaman Demo Template di Blogger

#1. Cara Membuat Halaman Demo Template di Blogger

#2. Cara Membuat Halaman Demo Template di Blogger

Related Posts

Post a Comment

Post a Comment

Contact Form

Posting Terbaru

Label

Terpopuler