Home

Cara Membuat Halaman Demo Statis Done Update !

Cara Membuat Halaman Demo Statis Done Update ! Cara Membuat Demo Website. Banyaknya tutorial web disekitar untuk membuat halaman statis web blogger blogspot. Biasanya blogger membuat halaman ini ingin mendapatkan tambahan dari ikut berjualan desain theme atau template web lewat link affiliasi.  Dengan menggunakan halaman demo ini bertujuan untuk demo template yang akan dibagikan, maka hal ini berkesan lebih fokus dan profesional. Halaman demo template ini saya update dari tutorial Kompi Ajaib blogger senior yang telah meraup dolar adsense.

Untuk menampilkan demo website atau blog lain di dalam blog sendiri adalah memanfaatkan istilah dalam blogging "iframe', nah responsive tool yang saya tambahkan ini sangat sederhana yaitu dengan mengatur tinggi dan lebar iframe sesuai dengan ukuran beberapa device yaitu netbook 10" (1024x600), Asus Nexus 7 (960x600), iPhone 6 plus (414x736), iPhone 3 (320x480).

Untuk membuat halaman demo maka file Javascript dibutuhkan untuk tampil responsive. Javascript yang dibutuhkan sederhana yaitu menambahkan class pada iframe dengan style yang memiliki tinggi dan lebar untuk tiap-tiap ukuran device. Dan ditambahkan juga refresh iframe ketika klik ukuran device pada komputer pembaca, agar semua fungsi pada halaman demo blognya bisa berjalan dengan baik dan sempurna. Ditambahkan juga tombol atau icon reload untuk merefresh  pada ujung icon hal ini untuk mengembalikan ke ukuran sebenarnya.


DEMO 

Silahkan klik tombol demo pada halaman tersebut.

Bagaimana, Anda ingin mencobanya juga?

Silahkan ikuti langkahnya di bawah ini.

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(http://2.bp.blogspot.com/-inJ_59r9FJ0/UuEXr4IQn0I/AAAAAAAAGWg/OSIKdAm4Wwg/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(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/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(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png) 15px 50% no-repeat #579c26}
.dlbutton:hover{background:url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png) 15px 50% no-repeat #579c26}
.dlbutton,a.dlbutton{background:url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png) 15px 50% no-repeat;padding:0 20px 0 55px;right:158px;text-decoration:none}
.demologo,a.demologo{background:url(http://2.bp.blogspot.com/-3Z-HuFDHOOg/UuDyIp8DZaI/AAAAAAAAGWQ/81Ev67C13hM/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://keluarga-madinah.blogspot.com'><img alt='mftemplates' height='50' src='https://3.bp.blogspot.com/-Wt1MJ_SdldQ/WLY0Bxme0UI/AAAAAAAApuE/-nRzTRP21rQiOuePJTBwgg88LaOERmBYACLcB/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>