Cara Membuat Live Demo Wordpress Theme
Memang aga menyimpang dari Tema blog ini, tapi saya cuman sekedar sharing doang. Tentang Cara Membuat Live Demo Wordpress Theme di Fansublogger. Biarlah, kali ini kita share saja.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgec484rKDMJzW1DZYH4ErF6nWCmQEKP7nK4hcLniC57vjIP9sb-CMGlE6SZiNRr_Hvc0iq9CjwotuPRqwRVC0Ho9xntbwxkUp696j8vnlFuSSCC6qRDSCh338a2oZQHUzT4qruia_LEqw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz5h3yFNRZvPAFZkpvxR2yc5y77LnxyrZOOfjbXik73jEEsMivy5h_FoivbV9ymsoIOxltkMV9_MRwS3QnwJdOfjpHaCOlDfM3kyuRbUy3Yq7GuCGkTcSVLqWTbFK1A2Ip_wY0-mL_ooo/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz5h3yFNRZvPAFZkpvxR2yc5y77LnxyrZOOfjbXik73jEEsMivy5h_FoivbV9ymsoIOxltkMV9_MRwS3QnwJdOfjpHaCOlDfM3kyuRbUy3Yq7GuCGkTcSVLqWTbFK1A2Ip_wY0-mL_ooo/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmrBhg_ZJzWe5H5xRVLS6eVtHRBbgS-mWKQ-1rGFKoZuF0YE3vl7Fa6EYnTHph-k-Vpmq4OWL5IHm7R-caGvkJgYQwFf7M6xc04vzo2B_InpbHtJT9nHzFI1NAJnc9rDFxVlt9fsw1dhA/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmrBhg_ZJzWe5H5xRVLS6eVtHRBbgS-mWKQ-1rGFKoZuF0YE3vl7Fa6EYnTHph-k-Vpmq4OWL5IHm7R-caGvkJgYQwFf7M6xc04vzo2B_InpbHtJT9nHzFI1NAJnc9rDFxVlt9fsw1dhA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70tBSP-wIvASco71T1GaDYeoX3-yx8S0_LbM9i3ldJClqz5GX1u2Nn_hXDRQaaOFu2AfXjILkfsMuJ5sVyyR9ycpmxe4Qph9H1OmbnTd8n07IVHafb9jnRTs_b0vxEpoO4vNRC1qZcC8/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>Format Penulisan
Untuk penulisan demo, sama dengan blogger seperti inihttp://namablog.com/demo/?url=URL-Demo-disini&download=URL-Download-disini
Cara Membuat Live Demo Wordpress Theme
Reviewed by Michael William J
on
Selasa, April 28, 2015
Rating:
Reviewed by Michael William J
on
Selasa, April 28, 2015
Rating:
![Phi Brain: Kami no Puzzle S1 - Ep 01-25 [END] Subtitle Indonesia](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixrWr8YF5LfG1PtaujzBKhOB-kLQ5hpWWgG1Jg9i2Uwf37LGhF_v5R0iLNaclFZDBo3ez5mIQTzQ7AShxNrcy6GHDmzYT9VghyphenhyphenWdf4ioLVCDeXoHP5AF548i6HMB34KldpmFa8oDUiwkP8/s72-c/phi+brain.jpg)
![Ichiban Ushiro no Daimaou BD 1-12 [END] Subtitle Indonesia](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYeMX-r9GfmGFYYCUm42KgzRuaVa6K8Ncf0JK4FYIsQaBQU02Ve_EmEUlcbkDVv2k05QXXfjGIz7IFpGaAqQOxgwecIYUIMEYKXzd1zsJAyIj86ZZGXWBpc6w2fhiKljbOXUIG8x84eOyU/s72-c/Ichiban_Ushiro_no_Daimaou_1.jpg)
![Naruto Shippuden 382 [720p] [MEGA]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilEzDHyzki925uUSfrM3tswiU8UhjuvH2EDyHNAn-jJ8hOJPo3Y1TX3u8DPDUJYOGvOGTUL5VbS8R-XWkF6xwCg4d3C9pbC_bLLl_eAtAoEfdzqxH99MAvF-K_zE_08EiLowzdGG7rCDc/s72-c/Sinopsis.png)
![Movie Fate/Stay Night: Unlimited Blade Works [BDrip] [720p]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_R4TOjEoPUiuVxns9_scP4m2mA73HHbAPVvcJoRnzvljLf4E7kAwXPDKoj_Qh_dXJhEuNgwWYsurKufeYZXktZeqbgP3FXFk1dwFhCzAwiCNzz6tFtcJSe0IVR5OtGWXUyvzFmJa0qTg/s72-c/ibggiENQrtWLiA.jpg)
Tidak ada komentar
Terima Kasih