Home » blogger tutorial » template hack » Cara Membuat Frame Live Demo di Blog

Cara Membuat Frame Live Demo di Blog - Sahabat blogger, pada kesempatan kali ini bang dadan akan coba membahas artikel tentang Cara Membuat Frame Live Demo di Blog, sahabat blogger mungkin sering atau pernah menemukan live demo ini misalnya pada blog penyedia template gratis, biasanya ketika kita hendak mendownload template tersebut kita bisa melihat dulu template yang nanti akan di download dalamnya seperti apa, ketika kita klik demo otomatis kita dibawa pada template yang akan kita download nanti. namuun tetap dalam url blog tersebut tidak langsung pada url demo template, dan biasanya live demo ini mempunyai navbar/menu horizontal diatas blog tersebut.

Ketika kita hendak membuat live demo ini salah satu pendukung adalah laman/pages, ruang laman itulah yang nantinya dipake buat demo tersebut.

Oke langsung saja bagi sobat yang ingin mencoba memasang live demo diblog nya silahkan ikuti langkah-langkahnya berikut:

Cara Membuat Frame Live Demo di Blog

1. Pertama sobat harus membuat laman terlebih dahulu pada blog dengan URL berikut http://blogkamu.blogspot.com/p/demo.html

2. Selanjutnya cari kode </head> lalu copy kode dibawah ini tepat diatas </head>:

<b:if cond='data:blog.url == "http://blogkamu.blogspot.com/p/demo.html"'>
<script src='http://codecbd.googlecode.com/files/jquery-1.js' type='text/javascript'/>
<script src='http://codecbd.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/AVvXsEjJA-wxErnYbbkZC9hgDSSPt6N6j7v6n_DUNkxw2RZHzgoXXprtu6vXp28Tb908MAQp2go6nsUrVMb6pUtp-q6vc6SRC3SR-Hz5EWUa4O-pzzRoo3ARnE9F6tffiNiQJwZGgokwEs_1gaM/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/AVvXsEjJA-wxErnYbbkZC9hgDSSPt6N6j7v6n_DUNkxw2RZHzgoXXprtu6vXp28Tb908MAQp2go6nsUrVMb6pUtp-q6vc6SRC3SR-Hz5EWUa4O-pzzRoo3ARnE9F6tffiNiQJwZGgokwEs_1gaM/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/AVvXsEgzIU-DUTtaAW_AmwA79-5pTnc1OA6xLATdqcVJumQTs1x6gppqPG5H9wwmgROdeafTfClOLibx2QyeQhLqJToqdC1BkigTdRIlyjzKMvGISrnhS859JbDE4ngi4K0rK0y4X0BKgaROuVk/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/AVvXsEie8RuBdBekkjr1mx2qKaLcB0bA9uo4k5acK1xl_8-0JQkpu-tOTaDm2c3OMvuqPDUXqGwooLCNJuc-jNzWkRBMb7o08WNVmTLZi3WdFGqK8Glt39izcWGKhgFmqnlmMlq9aNu61kCPTwpf/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>

3. Selanjutnya cari kode <body>, taruh kode berikut ini tepat dibawah <body>

<b:if cond='data:blog.url != "http://blogkamu.blogspot.com/p/demo.html"'>

4. Setelah itu cari lagi kode </body>, dan copy kode berikut tepat diatas kode </body>

</b:if>
<b:if cond='data:blog.url == "http://blogkamu.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/AVvXsEiN3xvjkaKyxYroU62OEH7HOpkIp4hKIIPiynsW8Be_K61JYlOMtNhsMn1QZNxsZszZ4DdgiVRwq06vzkNytL6PkPHltCyBMiR0uK39Y_yqspdZmWDbIaNkjZhGfwrm2EcBU2PYI_UmUEc/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>

Keterangan:

Silahakn anda ganti tulisan yang berwarna merah dengan URL Blog sobat masing-masing.
Kode yang berwarna biru merupakan menu horizontal, silahkan sobat edit sesuka hati.

Nah mungkin sekian dulu pembahasan kita kali ini tentang Cara Membuat Frame Live Demo di Blog, semoga artikel ini bermanfaat buat anda semua. terimakasih..!!

Dadan DR 2:43 PM Admin Bandung Indonesia

Cara Membuat Frame Live Demo di Blog

Coretan Bang Dadan on

Wednesday, January 16, 2013