Cara membuat Iframe demo
Hey teman teman! anda boleh melihat postingan saya kali ini...
Caranya hanya mudah.. karena anda tinggal copy paste code yang saya berikan nantinya. Demo blog sangat memudahkan kita seperti: loadingnya cepet, walaupun tampilannya di blog lain tetapi itu masih di blog anda. Dan anda nanti juga bisa mengedit sendiri isi Framenya!
Lasngsung saja
Copy code dibawah ini tepat diatas </head>,untuk memudahkan mencari kode itu, tekan Ctrl+F atau F3.
Selanjutnya Copy dan paste code dibawah ini dibawah kode <body>;
Anda bisa mengedit Kode yang berwarna hijau... atau anda juga bisa mengedit semua kode diatas.
Yang terakhir yaitu cara meng-aplikasinya ketik misalnya http://01eleven46.blogspot.com/p/demo.html?iframe=http://bloggerest-btemplates.blogspot.com/ yang biru ganti dengan url blog anda dan yang hijau ganti url tujuan demo anda
tolong bantu diSHARE :)
Caranya hanya mudah.. karena anda tinggal copy paste code yang saya berikan nantinya. Demo blog sangat memudahkan kita seperti: loadingnya cepet, walaupun tampilannya di blog lain tetapi itu masih di blog anda. Dan anda nanti juga bisa mengedit sendiri isi Framenya!
Lasngsung saja
Copy code dibawah ini tepat diatas </head>,untuk memudahkan mencari kode itu, tekan Ctrl+F atau F3.
ganti http://01eleven46.blogspot.com/ dengan url blog kamu;<!-- Demo --><b:if cond='data:blog.url == "http://01eleven46.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/AVvXsEgccpGi0jxEEk7Rjo2ycQNTXga6J8Fdv0ulavyVt1nkiOsJiHl6zqCMzdY4JjxbmkTzwF3DdSXjEMSUEK361oi7hBZCJ1IbxPXVakPuwWwVDfkCK71OqZH85vrsnkVt9BKu1ekqrn4rDmw/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/AVvXsEgccpGi0jxEEk7Rjo2ycQNTXga6J8Fdv0ulavyVt1nkiOsJiHl6zqCMzdY4JjxbmkTzwF3DdSXjEMSUEK361oi7hBZCJ1IbxPXVakPuwWwVDfkCK71OqZH85vrsnkVt9BKu1ekqrn4rDmw/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/AVvXsEjpZkirlHokDlfliVQvOFZoiHEQV2P4Bqz9zhnWv4Q46MDHMiGU-OVc8XfFa8wb2Df49Vygn6NdDuiDNS3JH33jFvua2_gPYQ6X-N4PeuYtF9XPC6dhXFzorHDyxAJvt0TGbB7iDklP7Sw/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/AVvXsEg_qIRQbSoXUwdrgfBhnihf0fSJDgrbQgR0eDwxmK1spxQBRVBPSJRv4pB-FEQUBo-ZUaVemVPct8ytvKT4hv0MML7SP2-z4ntIDgFIJi3IH2PJdnrLbkA-NqdCADHodBdnYgC7-qO205cP/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><!-- Demo End -->
Selanjutnya Copy dan paste code dibawah ini dibawah kode <body>;
<b:if cond='data:blog.url != "http://01eleven46.blogspot.com/p/demo.html"'>
Setelah itu copy dan paste kode di bawah ini diatas kode </body>.
</b:if>
<b:if cond='data:blog.url == "http://01eleven46.blogspot.com/p/demo.html"'>
<title>Demo-01eleven46</title>
<div id='toolbar'>
<div id='mta_bar'>
<div class='mta_bar bar_logo'>
<a expr:href='data:blog.homepageUrl'>Home</a>
</div>
<div class='mta_bar bar_search'>
<div id='tsrc-bar'>
<div id='src-bar'>
<form action='data:blog.homepageUrl + "search/"' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s-bar' name='s' onblur='if (this.value == "") {this.value = "cari...";}' onfocus='if (this.value == "Search Template..") {this.value = ""}' type='text' value='cari... 01eleven46'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwFuxLhRKfgGxhlr_rsVTv7MyGrermWHxI9rEvrHGmeEMOtMG_aLtQ5DjTaPiUVOGgtAXbntJpOttYuVmajKnsDjOOvch-4nxn8gWCJMytGiFi3GjPKggRy52NEkYkOOC8TG__f37jpfw/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
</form>by wafi idlal
</div>
</div>
</div>
</div>
</div>
<div style='clear: both;'/>
<div id='iframe'><iframe src=''/></div>
</b:if>
Yang terakhir yaitu cara meng-aplikasinya ketik misalnya http://01eleven46.blogspot.com/p/demo.html?iframe=http://bloggerest-btemplates.blogspot.com/ yang biru ganti dengan url blog anda dan yang hijau ganti url tujuan demo anda
tolong bantu diSHARE :)



