Cara Membuat Frame Live Demo di Blog

Cara Membuat Frame Live Demo di Blog

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/AVvXsEgeowxUL90NZiqRs0GKMso1vVGL9_A5GIBeXh_Tykx1IN0yVP41Rx7vcAAaZWV4WfrIzHMK_M-ODST8qOD3N_39ck2ASoxT7Ut5CzkB_QbXSZRTbOPxZaEwZolIv3H50NxIGXQ3JXgHBuQ/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/AVvXsEgeowxUL90NZiqRs0GKMso1vVGL9_A5GIBeXh_Tykx1IN0yVP41Rx7vcAAaZWV4WfrIzHMK_M-ODST8qOD3N_39ck2ASoxT7Ut5CzkB_QbXSZRTbOPxZaEwZolIv3H50NxIGXQ3JXgHBuQ/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/AVvXsEi4N3yFj85WImKQjWwc4vpZOhDZ5j6FisPteH7WjDDszG5wvhb2sshKzb0QNpVTEeFmWS-1mwjPQADd0nJBqTx4tThECFOKl4s4NkdkjWaGWjGG-0rr7fstqRGWMcUqFTF6uXbJGV-sAaU/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(http://2.bp.blogspot.com/_C6KkooKXCEw/Si0hpItyl-I/AAAAAAAAEYQ/kmsk9iVM9HM/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/AVvXsEhRGpBrU2mQqGoQyeeZuGlEcbJgGBKH-60YKAwWXe7zKM-02ClYfMzUncH6x4Id-WfHeG9QfOfixkMyDTFz2G4rOJ6M0tKLIWJghF5JHYQWM2pD-Dsn7KnWXDNvbFS1uCmibzByIIUIToE/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.

Source

Cara Membuat Frame Live Demo di Blog

0 komentar:

Posting Komentar