Tutorial Membuat Halaman Demo Template Blogger

Hai sahabat blogger. jika anda pernag mengunjungi situs Gooyabi Template, Themeforest dan lainnya mungkin anda akan melihat demo template tetapi masih dalam blog tersebut, nah untuk itu di tutorial ini kita akan mecoba membuatnya. kira kira demonya seperti di bawah :

Demo

Nah sebetulnya itu sangat mudah, okelah kalo begitu kita praktek saja langsung,
Langkah pertama silahkan anda buat Halaman baru pada blogger anda dan berinama DEMO

Masuk pada mode Compose / HTML kemudian masukan script di bawah ini :

<style scoped="" type="text/css">
/*<![CDATA[*/
#header2,.logo-blog,.creditpic,#credit,#menu,#comments-show,.post-upper,.postmeta{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/AVvXsEielQpybGU3gttpTFvOIV5TDQvoN16Hcb1HyNJDoaRoAM5db7QFVVH2LrIxECA-Vvik7UmaEqawIyqDIGlknuipCdYu5TT4HCdjMT85ejdzejPEV1N4szXQWpf-_mJwsbt6QQdsE2n0BpY/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/AVvXsEiRUbeMWWC-I7x11HauNfLiCKde25YKB4dKlsdrhEWeGzEHx9xJaheYLiV3Hy1oqfft7cl8_E4Uam8tZikTL0-JbL2ZYk_WQjTD_CME2314v4vGsRMMulJBdu3Nhz6WO9Qhth6MBLHwEnM/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/AVvXsEiRUbeMWWC-I7x11HauNfLiCKde25YKB4dKlsdrhEWeGzEHx9xJaheYLiV3Hy1oqfft7cl8_E4Uam8tZikTL0-JbL2ZYk_WQjTD_CME2314v4vGsRMMulJBdu3Nhz6WO9Qhth6MBLHwEnM/s1600/close.png) 15px 50% no-repeat #579c26}
.dlbutton:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie1EdrPdY2np2p5DuxY35ZLhzyRPmM7FA3pZb0PXD2Pl9RSDYiGZYijPYkQMs8IBcdyhBU6Adz3x_iFJ21SdwEMXFy2MiQiqRYTzmSAyRTGMYp9-RzbBZSQoCbPFBQMMwK2zernFJFg_I/s1600/download.png) 15px 50% no-repeat #579c26}
.dlbutton,a.dlbutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie1EdrPdY2np2p5DuxY35ZLhzyRPmM7FA3pZb0PXD2Pl9RSDYiGZYijPYkQMs8IBcdyhBU6Adz3x_iFJ21SdwEMXFy2MiQiqRYTzmSAyRTGMYp9-RzbBZSQoCbPFBQMMwK2zernFJFg_I/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/AVvXsEij-c5a2kqgy3F2WsHjAuPJ8XE4q60MOM_6FTJ88P5SKE8bIy9P-iWDALLzpRpp-jCfqmlO5mqQkw-rm5rQF8ZN7TUy6vIhtQSivbf9ac2dPLt1LhFh-q3Z1cRzcGNixbK1Q85Tde_WY2k/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>
<br />
<div id="tab-demo">
<a class="logo" href="https://www.blogscpot.com/"><img alt="Sheni" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOnzagEaA0RvywjlSoKS64Pc1e5ns13bQznQkSfSh7GwzfpOM0ANTTrMXe9xAQzgkbINtpEHIDvI5hojRss5MerPMl7tyKZxY4GNxUPqG95a3mHw2O_Fw_Exk0Tp4a-eByTQOBrPuBFlU/s1600/10.png" title="Sheni" width="212" /></a>
<br />
<ul class="resize-tool">
<li>
<a href="javascript:;" onclick="w1024();">
<svg style="height: 24px; width: 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">
</path></svg></a>
  </li>
<li>
<a href="javascript:;" onclick="w960();">
<svg style="height: 24px; width: 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">
</path></svg></a>
<a href="javascript:;" onclick="w600();">
<svg style="-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); height: 24px; margin-bottom: -7px; transform: rotate(90deg); width: 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">
</path></svg></a>
  </li>
<li>
<a href="javascript:;" onclick="w414();">
<svg style="height: 24px; width: 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">
</path></svg></a>
<a href="javascript:;" onclick="w736();">
<svg style="-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); height: 24px; margin-bottom: -10px; transform: rotate(90deg); width: 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">
</path></svg></a>
  </li>
<li>
<a href="javascript:;" onclick="w320();">
<svg style="height: 20px; width: 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">
</path></svg></a>
<a href="javascript:;" onclick="w480();">
<svg style="-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); height: 20px; margin-bottom: -10px; transform: rotate(90deg); width: 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">
</path></svg></a>
  </li>
<li>
<a href="javascript:;" onclick="refresh();">
<svg style="height: 24px; width: 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">
</path></svg></a>
  </li>
</ul>
<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>
<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>

Terakhir Save Halaman anda
Keterangan :

Silahkan rubah yang di beri tanda merah (www.blogscpot.com) dengan url blog anda
Untuk memposting halaman demo template blog, silahkan ikuti susunan alamatnya seperti berikut url_halaman_static_demo_template.html?url=url_demo_template. Sebagai Contoh : https://www.allsof21.com/p/demo.html?url=https://www.template.blogscpot.com/

Nah sobat mungkin itu dulu tips yang dapat saya berikan semoga bermanfaat