Membuat Demo Live,
Demo live biasa digunakan para desaign Template, biasanya digunakan buat demo template, dimana alamat url tidak ketempat template demo tersebut akan tetapi tetap pada alamat url pembuat template tersebut,
selain itu agak sulit men source kode dari template tersebut termasuk mencek kelebihan atau kekurangan template yang didemokan karena alamat urlnya bukan alamat template demo tersebut,
namun memasang kode ini bagi yang tidak ada keperluan sedikit akan memperberat loading blog kecuali buat asyik-asyikkan, hehehe..
langsung ke TKP:
Cara Membuat Demo Live:
1. Pertama, Buat laman kosong beri judul copy link urlnya misal:
http://namablog.blogspot.com/p/demo.html, maka sesuaikan dengan kode pada langkah selanjutnya
2. Kedua, Cari dan ganti kode:
</head> dengan kode dibawah ini:
<!-- Demo Style Blogger Template -->
<b:if cond='data:blog.url == "http://namablog.blogspot.com/p/demo.html"'>
<script src='https://script-rushdie.googlecode.com/files/jquery-1.js' type='text/javascript'/>
<script src='https://script-rushdie.googlecode.com/files/iframe.js' type='text/javascript'/>
<style type='text/css'>
a{outline-style:none; color:#0696cb; font-size:11px;text-decoration:none;}
#navbar-iframe{display:none}
html, #iframe{overflow: hidden;}
/* iframe */
#iframe, iframe{position: absolute; width: 100%; height: 100%; border:none;}
#iframe{margin-top:31px;}
/*-- DROPDOWN MENU --*/
.likefb, .google_plus, .twitter{float:left;margin:0 3px 0 0 !important;padding:4px 0 0 1px; }
.likefb {width:90px !important;}
.google_plus {width:63px !important;}
.twitter {width:95px !important;}
#toolbar {position:fixed; top:0;left:0; width: 100%; height:30px !important; margin: 0; padding:0; z-index:50}
#nav-menu-label{float:right; margin:0px; padding:0px; }
.text-style{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXVwlhY_HMWqOfnjkOjt4GhseJUTq5BJSDjQK6XG_6eXIQnVlkTjvIeHtjfgZAA5WEfp6PG-1Q0s0B2NIXcAYhymhDk7PX7APmwTW6vV0XASGp90UcmRctyi40haXNtocPa_0-IqVwCNs/s200/bc_separator.png) no-repeat;color:#333; display:block; font-size:12px; font-family:arial,verdana,georgia; font-weight:normal; text-transform:normal; margin:0; border-left:0px solid #CDCDCD; padding:8px 4px 8px 14px; height:14px }
.text-style:hover{color:#FF6600; cursor:pointer;height:14px}
/*-- (Menu Nav LABEL) --*/
#nav-menu-label{float:right; margin:0px; padding:0px}
#nav-menu-label ul{float:left; list-style:none; margin:0px; padding:0px}
#nav-menu-label li{list-style:none; margin:0px; padding:0px}
#nav-menu-label li a, #nav-menu-label li a:link, #nav-menu-label li a:visited{color:#333; display:block; font-size:12px; font-family:arial,verdana,georgia; font-weight:normal; text-transform:normal; margin:0px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXVwlhY_HMWqOfnjkOjt4GhseJUTq5BJSDjQK6XG_6eXIQnVlkTjvIeHtjfgZAA5WEfp6PG-1Q0s0B2NIXcAYhymhDk7PX7APmwTW6vV0XASGp90UcmRctyi40haXNtocPa_0-IqVwCNs/s200/bc_separator.png) no-repeat ; padding:8px 3px 6px 14px}
#nav-menu-label li a:hover, #nav-menu-label li a:active{color:#FF6600; margin:0px; padding:8px 3px 6px 14px; text-decoration:none}
#nav-menu-label li li a, #nav-menu-label li li a:link, #nav-menu-label li li a:visited{background:#f5f5f5; width:90px; color:#333; font-size:11px; font-family: arial,Times New Roman; font-weight:normal; text-transform:normal; float:none; margin:0px; padding:4px 10px 4px 10px; border-top:1px solid #fff; border-bottom:1px solid #CDCDCD;border-left:1px solid #CDCDCD; border-right:1px solid #CDCDCD}
#nav-menu-label li li a:hover, #nav-menu-label li li a:active{background:#fff; color:#FF6600; padding:4px 10px 4px 10px}
#nav-menu-label li{float:left; padding:0px}
#nav-menu-label li ul{z-index:999; position:absolute; left:-999em; height:auto; width:100px; margin:0px; padding:0px}
#nav-menu-label li li{}
#nav-menu-label li ul a{width:100px}
#nav-menu-label li ul a:hover, #nav-menu-label li ul a:active{}
#nav-menu-label li ul ul{margin:-31px 0 0 100px}
#nav-menu-label li:hover ul ul, #nav-menu-label li:hover ul ul ul, #nav-menu-label li.sfhover ul ul, #nav-menu-label li.sfhover ul ul ul{left:-999em}
#nav-menu-label li:hover ul, #nav-menu-label li li:hover ul, #nav-menu-label li li li:hover ul, #nav-menu-label li.sfhover ul, #nav-menu-label li li.sfhover ul, #nav-menu-label li li li.sfhover ul{left:auto}
#nav-menu-label li:hover, #nav-menu-label li.sfhover{position:static}
/* -- SEARCR BOX -- */
#src-bar{border:1px solid #C9D7F1; height:18px; width:130px; padding:0; background:#f6f4f4; }
#src-bar input{border:0; background:none; color:#575757}
#s-bar{font-size:11px; width:120px; padding-left:4px; margin:0; background:none}
#tsrc-bar #src-bar{margin-top:0px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;background-color:#FFFFFF;border:1px solid #CDCDCD;}
#tsrc-bar #s-bar{width:105px}
#mta_bar{background:#E7E7E7 url(http://3.bp.blogspot.com/_C6KkooKXCEw/TUP2QV3Ut4I/AAAAAAAAH5w/MYcoSss0M28/s400/bg.png) repeat-x; overflow: hidden; padding-top:0px; width:100%; height:30px;display:block; border-bottom:1px solid #cdcdcd}
#mta_bar .bar_logo{float:left; padding-left:8px; text-align:left; font-family:Arial; font-size:15px; font-weight:bold; font-style:normal; color:#333; width:148px; padding-top:7px}
#mta_bar .bar_logo a{background:url(https://dev.twitter.com/sites/all/themes/twitter_commons/favicon.ico) 0px no-repeat; text-decoration:none; color:#333; padding-left:21px; }
#mta_bar .bar_logo a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar_search{float:left; padding-top:5px; margin:0px; text-align:left; font-family:tahoma; font-weight:bold; font-style:normal; color:#333; width:140px}
#mta_bar .bar_search a{text-decoration:none; color:#333; padding-left:10px; padding:0}
#mta_bar .bar_search a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar-menu-label{float:right; text-align:left; font-family:tahoma; font-size:13px; font-weight:normal; font-style:normal; color:#333; width:520px; padding:0px}
#mta_bar .bar-menu-label a{text-decoration:none}
#mta_bar .bar-download{float:left; text-align:left; font-family:arial; font-size:13px; font-weight:normal; font-style:normal; color:#333; padding:6px 3px; width:65px}
#mta_bar .bar-download a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1BdkiAWMfZ6wSLGdEoX7zVSO5q4fPzSRMWJx6nQJribpnjAzyEGk01CeZrYeKWgWfdxlPhdmEtW4in4U1zWtdL-c6y6508Kd55fjuMGBrGbr6ZNv3ALLCGoqDgdNd5ZbQcdExQ-DeOwM/s200/submit-c.png) 0px no-repeat; text-decoration:none; color:#333; padding-left:17px; }
#mta_bar .bar-download a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar_hide{float:right; text-align:left; font-family:arial; font-size:13px; font-weight:bold; font-style:normal; color:#333; padding:7px 0 0 5px; width:20px}
#mta_bar .bar_hide a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinkdp-qTIOizYxGdAJx89Do4Sxi57ILJgPRynXK6501YrCr6JmLUaS1N5m6CcT55cvZ178arBzbZODtQyfrgxPZBUWyh1xeN3G7gGcGrGndvjI8T7RGmqBxypO9EVVOSCWZvhyjX-N32Qv/s400/delete.png) no-repeat; text-decoration:none; color:#333; padding-left:20px; }
#mta_bar .bar_hide a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar_fb {float:left; width:70px;padding-top:6px; padding-left:2px; margin:0px;}
</style>
</b:if>
</head>
3. Ketiga, cari dan ganti kode
<body> sehingga menjadi:
<body> <b:if cond='data:blog.url != "http://namablog.blogspot.com/p/demo.html"'>
4. Keampat, cari dan ganti kode
</body>
</b:if><b:if cond='data:blog.url == "http://namablog.blogspot.com/p/demo.html"'>
<div id='toolbar'>
<div id='mta_bar'>
<div class='mta_bar bar_logo'>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</div>
<div class='mta_bar bar_search'>
<div id='tsrc-bar'>
<div id='src-bar'>
<form action='http://www.zoomtemplate.com/search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s-bar' name='s' onblur='if (this.value == "") {this.value = "Search Template..";}' onfocus='if (this.value == "Search Template..") {this.value = ""}' type='text' value='Search Template..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvRMJzioFP9CLFsT-Z19NMRw5gnEnFKrwKFEP-wv3Xjv8iGOZ768hy516ER3qTtMHKmVhTU0h0KZ82N4tL6RbHc4mYchKpIupD7-TUtyJq82zGnmCkggY7Q8U1umEGJtWsH1UKKIyp1so/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
</form>
</div>
</div>
</div>
<div class='mta_bar bar-download'>
<a href='http://box.zoomtemplate.com/?dl=' rel='nofollow'>Download</a>
</div>
<div class='mta_bar bar_hide'>
<a href='javascript:void(0);' id='close'/>
</div>
<div class='mta_bar bar-menu-label'>
<div id='NavbarMenuleft'>
<ul id='nav-menu-label'>
<li>
<div class='text-style'>Coloums ▼</div>
<ul>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
</ul>
</li>
<li>
<div class='text-style'>Sidebars ▼</div>
<ul>
<li><a href=''>1 Left Sidebar</a></li>
<li><a href=''>2 Left Sidebar</a></li>
<li><a href=''>1 Left Sidebar</a></li>
<li><a href=''>2 Left Sidebar</a></li>
</ul>
</li>
<li>
<div class='text-style'>Colors ▼</div>
<ul>
<li><a href='#'>Black</a></li>
<li><a href='#'>Blue</a></li>
<li><a href='#'>Brown</a></li>
<li><a href='#'>Green</a></li>
<li><a href='#'>Gray</a></li>
<li><a href='#'>Orange</a></li>
<li><a href='#'>Pink</a></li>
<li><a href='#'>Red</a></li>
<li><a href='#'>Violet</a></li>
<li><a href='#'>White</a></li>
<li><a href='#'>Yellow</a></li>
</ul>
</li>
<li>
<div class='text-style'>Styles ▼</div>
<ul>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
</ul>
</li>
<li>
<div class='text-style'>Topics ▼</div>
<ul>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
</ul>
</li>
<li>
<div class='text-style'>Features ▼</div>
<ul>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
<li><a href='#'>Style</a></li>
</ul>
</li>
<li>
<div class='text-style'>Width ▼</div>
<ul>
<li>
<a href='#'>Fixed</a>
</li>
<li>
<a href='#'>Fluid</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div style='clear: both;'/>
<div id='iframe'><iframe src=''/></div>
</b:if>
</body>
5. Kelima, Selesai
Judul : Membuat Demo Live
Deskripsi : Membuat Demo Live, Demo live biasa digunakan para desaign Template, biasanya digunakan buat demo template, dimana alamat url tidak ketem...