-->

Membuat Halaman Demo Template Di Blogger Dengan Responsive Tool

Langkah Pertama Silahkan buat halaman static untuk menampilkan demo, lalu simpan kode di bawah ini di dalam postingan HTML lalu publikasikan halaman.


<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/AVvXsEjslw_emOOFYy88DAgLBF1x5Uv6gRWRYOhXOfqqoOf1Y7aBVW61DXEymV2eA77EFhO8vTaeVEmUfJjbrzAbkjT1fTJvWj-inIt-azm5wPgvMZtt6peSivsb3ObLI75E_uEfY4bgZ3PZ36Q/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/AVvXsEjRKYAcRMaaBxmLrJ1J6fQUWsLFAHvd2rcB1P3uoxJPRLYeZCcz4O4jIKijpfT-V3vLeYHkfjEc35e4wN440kpCZDWqJnTFtTpMN1LHueNQeTOvS046gQVKsHfbviv7QktQcXsRb0q8V34/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/AVvXsEjRKYAcRMaaBxmLrJ1J6fQUWsLFAHvd2rcB1P3uoxJPRLYeZCcz4O4jIKijpfT-V3vLeYHkfjEc35e4wN440kpCZDWqJnTFtTpMN1LHueNQeTOvS046gQVKsHfbviv7QktQcXsRb0q8V34/s1600/close.png)
 15px 50% no-repeat #579c26}

.dlbutton:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRR4_Tp3v1B9D84-oRjo-u0i3Jp8usJDyudTgn8qDPuzGxzSBD2KKYpGOQhyphenhyphenMWgl1dSkqHQ6rgCxjk6xvKt9NJA6a9PiJhR267EkBV4TzkifKsJ-ODN-xoC1Sre01D69iJV0DhBSNhPmk/s1600/download.png)
 15px 50% no-repeat #579c26}

.dlbutton,a.dlbutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRR4_Tp3v1B9D84-oRjo-u0i3Jp8usJDyudTgn8qDPuzGxzSBD2KKYpGOQhyphenhyphenMWgl1dSkqHQ6rgCxjk6xvKt9NJA6a9PiJhR267EkBV4TzkifKsJ-ODN-xoC1Sre01D69iJV0DhBSNhPmk/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/AVvXsEgNA_DghuJbFPLvCh_ZaVwA9eyqc6Hv0wFwNb_Z4yCoIwXxKD5ZdR9mOAkLaks8dVdOhRnNV9DuUeKMy13N90VOj8_Gra8YQZ0SyrJYPztzvRZNX-z_BLpE_M0bw4JgXtVXL7mMMrf5Blk/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='http://www.mftemplates.us/'><img 
alt='mftemplates' height='50' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJ7MdXRGrQIGJzbxQhBa2YZKYhF_nN3lN9NNnzZ7cHwI7fYxuirAtb7kyNigHt1-5I69mc_xQ_aoa_Y6rJMbTlpRjM_61l9gVGEAdfHDS2oEErPuDa-tmbA2Rzn2qUaeB0QUL4UCmoJ4/s1600/mfemplates.png'
 title='mftemplates' 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='http://www.mftemplates.us/'><img 
alt='mftemplates' height='50' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJ7MdXRGrQIGJzbxQhBa2YZKYhF_nN3lN9NNnzZ7cHwI7fYxuirAtb7kyNigHt1-5I69mc_xQ_aoa_Y6rJMbTlpRjM_61l9gVGEAdfHDS2oEErPuDa-tmbA2Rzn2qUaeB0QUL4UCmoJ4/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:


http://kompisimplev2.blogspot.com/p/demo-template.html?url=http://www.kompisafelinkv2.ga/

Selamat mencoba....

Sumber : kangismet

Read Also:

Related Posts
Disqus Comments