Adsense Link 728 X 15;
Home » Tutorial » Cara Membuat Live Demo di Blog

Cara Membuat Live Demo di Blog

Space Iklan Disini, silahkan Hubungi kami !




Kali ini bang gopar akan share tutorial tentang Cara Membuat Live Demo di Blog, live demo ini biasanya banyak di gunakan oleh situs penyedia template, dan juga blog tutorial, sepertinya wajib mempunyainya.kare supaya tutorialnya lebih jelas,sehingga pengunjung merasa mudah mengerti dengan tutorial yang di berikan. apalagi untuk situs penyedia template, Live Demo merupakan harga Mati yang harus dimilikinya. dan sepertinya sudah tahu semua alasannya. lansung saja ke cara pembuatannya.

Cara Membuat Live Demo

Langkah pertama , membuat menu Laman pada blogger Template, dengan format http://namablog.blogspot.com/p/demo.html , silahkan ikuti langkah cara membuat menu laman blogger.
Langkah kedua, silahkan cari kode </head>, kemudian ganti dengan kode dibawah ini :

<!-- Demo Style Blogger Template -->
<b:if cond='data:blog.url == &quot;http://namablog.blogspot.com/p/demo.html&quot;'>
<script src='http://reog.googlecode.com/files/jquery-1.js' type='text/javascript'/>
<script src='http://reog.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{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/AVvXsEiDHXc_SLLOZFAcEz1HeFCAyzYu2GmOLO3PACUJuJoaWtG1YUKGNIEXO_kT52IJUoFv3zDE_9Jo7IBVjhsrk4oacalQXl-vbe8ti_Z2Iqmb9IRgDUk7SZJ2dN9OTE3mG2VAg21XJt9yaec/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/AVvXsEiDHXc_SLLOZFAcEz1HeFCAyzYu2GmOLO3PACUJuJoaWtG1YUKGNIEXO_kT52IJUoFv3zDE_9Jo7IBVjhsrk4oacalQXl-vbe8ti_Z2Iqmb9IRgDUk7SZJ2dN9OTE3mG2VAg21XJt9yaec/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/AVvXsEgNxU1eBLCRQWqNTtC1zNs4KZTmbPN4t6mGzRUWUelMF7Ad-FyzjzEKqfAQVhgMdFvhcyo3GlqSmOhwBtgxi5CdJQdWC684A2LRcUAigGGiozM-kUnMmIjXi_O4jHarv47wvwWhO5S5QV4/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/AVvXsEgqlPynXMB8d0j0QPMUFQR2ufwXkwlOwCQ0XDQpl8aVOfB5sBrXS8wcJ3G1aKbXtL_FxVgs5OmiJ24AZYHnMJQH69a0zgfwbx2CchzsMrkndWmD6Takx0XCyVez9EUdRTGtf4gCou1H3boH/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>
Langkah ketiga, silahkan cari kode <body>, kemudian ganti dengan kode dibawah ini :
<body>
<b:if cond='data:blog.url != &quot;http://namablog.blogspot.com/p/demo.html&quot;'>
Langkah keempat, silahkan cari kode </body> kemudian ganti dengan kode dibawah ini dan selanjutnya silahkan save template :
</b:if>
<b:if cond='data:blog.url == &quot;http://namablog.blogspot.com/p/demo.html&quot;'>
    <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 == &quot;&quot;) {this.value = &quot;Search Template..&quot;;}' onfocus='if (this.value == &quot;Search Template..&quot;) {this.value = &quot;&quot;}' type='text' value='Search Template..'/>
                                    <input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdG54BH77ifcxtwmo3-TI2Og6dF3xINkMtl69hZnoxWE8Tuq0wQCEeNu-YmViC3-8b0_VkaaVOB-iU_2kECjyw8LyngqCr0E4j6ugbzH73CF9QywMl3y5FPjkRD8SR_chUd3OqEVOu7Aw/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 &#9660;</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 &#9660;</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 &#9660;</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 &#9660;</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 &#9660;</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 &#9660;</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 &#9660;</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>

Keterangan: 
Kode warna Kuning merupakan Java Script, untuk selebihnya jika dianggap perlu silahkan edit atau simpan pada hosting yang anda miliki.
Kode warna Coklat merupakan css dan HTML mega menu Blogger, silahkan edit sesuka anda.

Sekian dulu tutorial Cara Membuat Live Demo di Blog, semoga bermanfaat ilmu yang saya dapet dari style Blogger ini. semoga share saya bermanfaat juga buat sobat.
Description: Cara Membuat Live Demo di Blog Rating: 3.5 Reviewer: Unknown ItemReviewed: Cara Membuat Live Demo di Blog
Categories: ,

If You Like This Post, Share it With Your Friends & Peers

Digg
stumbleupon
Delicious
facebook
twitter
reddit
rss feed bookmark

Related Posts by Categories



15 comments:

Didin Supriatna ( Tukang Potret ) said...

kebetulan banget saya lagi butuh nih makasih ya.. sob..

Monday, July 02, 2012 3:14:00 AM
Jane Doe said...

Mesti di tes dulu nih.... Bookmark dulu deh. Makasih sob

Monday, July 02, 2012 3:48:00 AM
Misbah said...

weleh""..kodenya panjang banget sob..hehehe
mantep nich kyknya,.nice share sob :)

Monday, July 02, 2012 8:08:00 AM
Admin said...

ok sob, thenks atas infonya...kunjungan, follow disini sob, salam sukses...

Monday, July 02, 2012 8:52:00 AM
apurie said...

mantab tuh buat yg lagi butuh..

Monday, July 02, 2012 11:10:00 AM
Maverick said...

waah iyaa keren.. spseri yang menyediakan layann tempalte blog gitu.. sya juga jadi pingin baut. mantap lah sob mkASIH yaa :)D

Monday, July 02, 2012 11:23:00 AM
eka said...

itu live demo buat orang2 pinter yg ngshare ilmu ya

Monday, July 02, 2012 11:36:00 AM
Unknown said...

Ada demo hasil jadinya nya ga sob ?

Wednesday, July 04, 2012 12:12:00 PM
Unknown said...

ada sob, hasilnya akan seperti pada zoomtemplate

Wednesday, July 04, 2012 12:29:00 PM
Cak hadi said...

Mantepppp

Thursday, July 19, 2012 2:17:00 PM
yomaricoy17 said...

Cara menggunakannya gmna gan mohon bantuan terutama link downloadnya.

Sunday, August 26, 2012 2:28:00 PM
erlangga said...

cara penggunaanya gan..
jangan lupa gan http://angga-ps.blogspot.com

Thursday, November 01, 2012 4:16:00 PM
Unknown said...

keren sih, tapi rada ribet juga ya...

Thursday, November 29, 2012 8:44:00 AM
Anonymous said...

My brother recommended I might like this blog. He was entirely right.
This post actually made my day. You can not
imagine simply how much time I had spent for this info!
Thanks!

Also visit my homepage :: best forex signal provider

Sunday, March 17, 2013 8:59:00 PM
Anonymous said...

Aw, this was an extremely nice post. Taking the time and actual effort to make
a great article… but what can I say… I hesitate a lot and never seem to get anything done.


Also visit my web page ... best all inclusive vacations

Tuesday, March 26, 2013 6:43:00 AM

Post a Comment

Copyright © Zone Plus. All rights reserved.