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.
Tidak ada komentar:
Posting Komentar