Membuat Live Demo Wordpress Theme - Seperti janji saya pada artikel sebelumnya, saya akan membagikan tutorial Cara Membuat Halaman Demo untuk WordPress.
Sebetulnya, tidak hanya pengguna WordPress, tapi bisa diaplikasikan
pada Joomla atau Drupal atau Web berbasis PHP. Intinya menggunakan self
hosted.
Secara detail, sebetulnya sudah saya jelaskan caranya pada tutorial Membuat Halaman Demo dengan Toolbar di Blogger. Akan tetapi ada penempatan kode berbeda dan tidak diperlukan tag kondisional, karena bisa membuat halaman terpisah.
1. Buat folder baru atau subdomain baru untuk demo.
2. Simpan kode dibawah ini dengan nama
atau sobat bisa download source nya yang sudah saya buat.
Untuk penulisan demo, sama dengan blogger seperti ini
Semoga bermanfaat...
Secara detail, sebetulnya sudah saya jelaskan caranya pada tutorial Membuat Halaman Demo dengan Toolbar di Blogger. Akan tetapi ada penempatan kode berbeda dan tidak diperlukan tag kondisional, karena bisa membuat halaman terpisah.
Cara Pembuatan
1. Buat folder baru atau subdomain baru untuk demo.
2. Simpan kode dibawah ini dengan nama
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Theme Demo</title>
<style>
body {
background:#fff url(http://2.bp.blogspot.com/-inJ_59r9FJ0/UuEXr4IQn0I/AAAAAAAAGWg/OSIKdAm4Wwg/s1600/loader.gif)no-repeat center center;
font:normal normal 13px/normal Arial,Sans-serif;
color:white;
text-align:center;
margin:0;
padding:0;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url(http://www.ajaxload.info/cache/FF/FF/FF/64/5B/5B/25-1.gif)no-repeat center center;
transition:all .4s ease-out;
}
#tab-demo {
width:100%;
height:50px;
top:0;
left:0;
background:#222;
color:white;
font:normal 13px Arial, sans-serif;
z-index:99999;
position:fixed;
}
.closebutton {
background:#66af33 url(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 50px;
position:fixed;
top:0;
right:0;
line-height:50px;
cursor:pointer;
color:white;
}
a.closebutton {color:white;text-decoration:none}
.closebutton:hover {background:#579c26 url(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 55px;
position:fixed;
top:0;
right:158px;
line-height:50px;
cursor:pointer;
color:white;
text-decoration:none;
}
.demologo, a.demologo {
background: url(http://2.bp.blogspot.com/-3Z-HuFDHOOg/UuDyIp8DZaI/AAAAAAAAGWQ/81Ev67C13hM/s1600/ki-logo.png)no-repeat left center;
padding-left:55px;
font-size:17px;
font-weight:normal;
font-family:Oswald, Arial, Sans-serif;
text-transform:uppercase;
line-height:50px;
left:15px;
position:fixed;
color:white;
text-decoration:none;
}
</style>
</head>
<body>
<div id='tab-demo'>
<a class='demologo' href='http://blog.kangismet.net'>KI WP Theme Demo</a>
<a class='dlbutton' href='' id='dl'>Download</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById('tab-demo').style.display='none';document.getElementById('view').style.top='0';document.getElementById('view').style.height='100%''>Remove Frame</a>
</div>
<iframe id='view' src=''></iframe>
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
window.onload = function() {
var url = getQueryVariable("url");
var download = getQueryVariable("download")
document.getElementById('view').src = url;
document.getElementById('dl').href = download;
};
</script>
</body>
</html>atau sobat bisa download source nya yang sudah saya buat.
Cara Penulisan
Untuk penulisan demo, sama dengan blogger seperti ini
http://namablog.com/demo/?url=URL-Demo-disini&download=URL-Download-disiniSemoga bermanfaat...
0 Komentar untuk "Membuat Live Demo Wordpress Theme "