Cara Membuat Demo Tetap Di Alamat Sendiri (Live)

Tulisan saya sebelumnya tentang bagaimana Cara membuat Live Demo Template menggunakan Java Script pada blogger berisikan tentang bagaimana alasan dan inspirasi dalam membuat Live Demo menggunakan Java Script dan Laman Blogger Template , untuk live demo tentang tutorial silahkan lihat http://stylebloggertemplate.blogspot.com/p/demo.html?iframe=setneg.blogspot.com dan sedangkan Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template yang paling mudah adalah sebagai berikut :

01 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.

02 Langkah kedua, silahkan cari kode </head>, kemudian ganti dengan kode dibawah ini:

<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{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/AVvXsEihgBbCWoa8WibORCRjXB84GraeK_qwiMaBj13RKLZxdiouqGdGrH3XNZXDLdbOWAQCYqqLax9WJqnoVdGHJQRM2Q5t-QQLXR8f7WQI4viMe5XWHPlHvJxC800fdpTbhrvLqXE3NfPDCjQ/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/AVvXsEihgBbCWoa8WibORCRjXB84GraeK_qwiMaBj13RKLZxdiouqGdGrH3XNZXDLdbOWAQCYqqLax9WJqnoVdGHJQRM2Q5t-QQLXR8f7WQI4viMe5XWHPlHvJxC800fdpTbhrvLqXE3NfPDCjQ/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/AVvXsEhhwFGh0EIpYwrKp2CywKcXF4iudm-2IpeJsgmpSr63VJl9K65vBBHyNC8IniMhxxBYVyoCCCqNMur9lgcHf4lW49k68SHdfMvR-AyAB3ThEN57LL9N0YI8urPI3blJurx__XsH_kVoCrQ/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/AVvXsEirGwfzWEHawe9Z94UjtWTIX-x_XP7KBr2diB6d6BQD857cINtBV3A6iABd1KQKvMX5dJErlIHmPsrzXazz_NDPlofrIlqAsHv3KbyDgjVNtUn_X1Qt7qK_YUyLKY5ZwcKR7MwqQtK9X5IO/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>

Dan 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"'>

Kemudian 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqGGKJU-F3qd4zICYggKNf1D4uVckUhNOSThTngLvM-yZ9-UxzrXTDLPisl1QJnehCpn_9zGI1DhNhq1MvX5m5tBZ43gWVjPyuhkDds6T-Bv5E2ajsAWdz1UwLg4COlyk7CZPi8TTUmrE/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>

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

Selesai.

Sumber: Link

Cara Membuat Demo Tetap Di Alamat Sendiri (Live)

0 komentar:

Posting Komentar

Random Post

Label

Popular Posts