Membuat Live Demo Wordpress Theme

Gambar
Kang Ismet
Jan 24, 2014
88
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.




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/AVvXsEjsWNhdGehyGDakedK5RBfF4GkTiavwMu1HlNACm6vr1hnXKK8GmQsAcYJU_6JteSmdXrqMektSEpyj2VUzPNUPHA4IKLwX5F6bsFIu6EVAi2TWmR8zBb8BqwNGCgobB0qqbtWqULyNctY/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/AVvXsEjOByFScAKHYw0PORDZR6zGBHbSBfKnRXluk9C71k__KXGFY1GIklLlz6q9EPF4l1A9R7osYeSoecjCfZO44xpXC891PRau1AcuOTJAfdtjvSXE50grdOjJjpCAkcVX1_rOzt5EM2wk5Eo/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/AVvXsEjOByFScAKHYw0PORDZR6zGBHbSBfKnRXluk9C71k__KXGFY1GIklLlz6q9EPF4l1A9R7osYeSoecjCfZO44xpXC891PRau1AcuOTJAfdtjvSXE50grdOjJjpCAkcVX1_rOzt5EM2wk5Eo/s1600/close.png)no-repeat 15px 50%}
    .dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3aGruErSgYJa75nAlHMlL552zE90t6L30d5ofAUk0rsliQDS7fvzWJnM_9R1u9QNocPA-TJsoHF9VIu9DrJi_KT0uJzMWgFPkl5G9TBcSiEB0he5DSrT0dl_-gAnpASMfV_o5vNnMA3w/s1600/download.png)no-repeat 15px 50%}
    .dlbutton, a.dlbutton {
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3aGruErSgYJa75nAlHMlL552zE90t6L30d5ofAUk0rsliQDS7fvzWJnM_9R1u9QNocPA-TJsoHF9VIu9DrJi_KT0uJzMWgFPkl5G9TBcSiEB0he5DSrT0dl_-gAnpASMfV_o5vNnMA3w/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/AVvXsEjEX4Z9wEj1P2FxN8gTM7gSMfMGuxiP_I4MRbP11Ez8wMY5SXQqazatVu6Elz9A2tq7fB59RfXGUu7VzLKofvh1BZNEC7Lrs1e386EZBc2hX_Rl-uR-qsCoPMxFPqXz0dFj1O4IEd-rBD4/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(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>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>

Cara Penulisan


Untuk penulisan demo, sama dengan blogger seperti ini

http://namablog.com/demo/?url=URL-Demo-disini&download=URL-Download-disini

Semoga bermanfaat...
Berita Lebih Baru Berita Lebih Lama