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 == "http://namablog.blogspot.com/p/demo.html"'>
<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(http://1.bp.blogspot.com/-VaJX0ShxH6c/TeUGQ0IGOWI/AAAAAAAAJGo/Qw7sIjc5MrQ/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(http://1.bp.blogspot.com/-VaJX0ShxH6c/TeUGQ0IGOWI/AAAAAAAAJGo/Qw7sIjc5MrQ/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(http://4.bp.blogspot.com/_C6KkooKXCEw/TIBn_s2bLjI/AAAAAAAAGyE/ONn17YW5G9o/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>
</head>
Langkah ketiga, silahkan cari kode <body>, kemudian ganti dengan kode dibawah ini :
<body>
<b:if cond='data:blog.url != "http://namablog.blogspot.com/p/demo.html"'>
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 == "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='http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/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>
Keterangan:
Kode warna Kuning merupakan Java Script, untuk selebihnya jika dianggap perlu silahkan edit atau simpan pada hosting yang anda miliki.
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.
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.
15 comments:
kebetulan banget saya lagi butuh nih makasih ya.. sob..
Mesti di tes dulu nih.... Bookmark dulu deh. Makasih sob
weleh""..kodenya panjang banget sob..hehehe
mantep nich kyknya,.nice share sob :)
ok sob, thenks atas infonya...kunjungan, follow disini sob, salam sukses...
mantab tuh buat yg lagi butuh..
waah iyaa keren.. spseri yang menyediakan layann tempalte blog gitu.. sya juga jadi pingin baut. mantap lah sob mkASIH yaa :)D
itu live demo buat orang2 pinter yg ngshare ilmu ya
Ada demo hasil jadinya nya ga sob ?
ada sob, hasilnya akan seperti pada zoomtemplate
Mantepppp
Cara menggunakannya gmna gan mohon bantuan terutama link downloadnya.
cara penggunaanya gan..
jangan lupa gan http://angga-ps.blogspot.com
keren sih, tapi rada ribet juga ya...
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
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
Post a Comment