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

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(&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>

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-disini

Semoga bermanfaat...

90 komentar

saya menyimak aja krn blm punya wordpress, hehehe :D

Balas

cuma kebagian solar nih..

Balas

coba aja buat yang gratisan... buat pembelajaran

Balas

wkwkkw.. solar ga disubsidi

Balas

saya gak punya wordpress... baca next tutorial yang lain aja di blog ini banyak tutorial untuk blogger yg keren2

Balas

wah kebetulan saya punya WP, tapi bukan untuk bagi tempe atau tips :D nyimak aja, menunggu post selanjutnya

Balas

kebetulan nih kang saya pakai wordpress, untuk http://namablog.com/demo/?url=URL-Demo-disini&download=URL-Download-disini bisa kasih contoh penempatan url demo dan url downloadnya gak kang

Balas

Langsung saya praktekkan Kang .. :)

Balas

coba klik demo dan lihat addressbar nya

Balas

silahkan di acak2 aja sob :)

Balas

Wah saya gak kebagian apa-apa =D
Cuma dapat demo wordpress :)

Balas

Saya punya WP Tapi belum ada artikel yang berbobot
Ijin simak artikel nya Kang untuk pembelajaran :)

Balas

mangga kang.. sok we bilih bade belajar cobian heula

Balas

baru sadar kalo ada artikel baru hehe , sip kang walaupun saya bukan pengguna wordpress , biar bisa dijadikan pelajaran :D

Balas

Met pagi Kang... Maaf baru bisa mampir :)

Balas

weh, mantep kang. :-bd sayangnya saya ga bagi2 theme :ngakak:
nyimak aja lah, sambil nunggu tutorial wp yg selanjutnya(berharap) wkwkwk

Balas

Fourtamax wkwkwk :D
Sama seperti mas saud cuma dapat wordpress ehey :D

Balas

Ijin coba, biar gak penasaran terus!

Balas

Sama ni sama mbak indri :)
Tapi kalau bikin wordpress pusing harus tema apa :(

Balas

Sip .. mantap nih ..
boleh dicoba deh kayak nya

Balas

hihi,. ngiringan komen w ah kang, soal na teu gaduh WP, hehe, tapi ilmu na ma bade di comot supaya nambah wawasan,. hehe :D

Balas

Haduh .. padahal ma malam OL, tapi drum nya ketinggalan.. haha
jadi ga kebagian pertamax,. hihi

Balas

ohohoho, ini baru lagi, ilmu baru :D ( izin nyimak kang ) @@,

salam damai

Balas

hehe kamana wae atuh kang

Balas

hehhe.. blom tau berlanjut apa ngga tutorial wpnya.. soalnya wp banyak plugin :D

Balas

mangga kang, tapelkeun ka na naon we lah bebas :D

Balas

haha bener kang, banyak plugin. dan banyak pula cela2 bagi para penrobos wkwkwk :ngakak:

Balas

Postingan lalu Membuat Halaman Demo dengan Toolbar di Blogger, sekarang Membuat Live Demo Wordpress Theme. Mantep lah kang, lagi episode demo wkwkwk :ngakak:

Balas

sepertinya lebih simple ya kang di WP ketimbang di blogger :-bd

Balas

ini dia yang saya cari kang :) hatur nuhun udah di share disi juga :)

Balas
Komentar ini telah dihapus oleh pengarang.

kan udah janji sebelumnya mau share yang buat WP

Balas

betul jeng.. lebih simple.. :D

Balas

sama2 sob.. semoga bermanfaat

Balas

saya sudah hubungi Anda via email

Balas

:ngakak: di tempel keun kana tompel w.. hihi

Balas

Halaman demonya kok error ya Kang ?

WEB - Irfan

Balas

makasih gan ane acungkan jempol ni web sampean ranknya mantap keren abis jangan lupa gan berikan komen di blog saya ini mohon pentunjuk http://www.operaja.com

Balas

Mkasih kang infonya, sangat membantu
Lebih banyakin tutor tentang WP dunk kang...hehehe mkasihh
Salam
gigihkurniawan.net

Balas

Sampai Saat ini saya belum punya nyali untuk menyentuh wordpress. =(

Balas
Komentar ini telah dihapus oleh pengarang.

petromax mamang ismett :D .. postinganna bercahaya tuluy , selalu , dan terus menerus .. hahai :D

Balas

nitip rekomendasi aja dah :

install wordpress gratisan ! regist dimari mba indri : http://idhostinger.com .. semoga bermanfaat :)

Balas

ganti pake bmw makannya om! jangan pake fuso :D wkwkk

Balas

cuman bisa berdo'a kang saya mah!

"Ya allah, kapan saya pertamax..?" :(

Balas

jangan pesimsi gan! .. baca quote of the day nya kang ismet! :D #semangat #optimis #pastibisa :)

Balas

Mau liat demonya kok henteu bisa kang @@,

Balas

Keren kang, bisa saya coba :D

Balas

Mantap kang,,,tapi, blog saya yang berplatform wordpress sekarang sudah nggak tau lagi nasibya. Udah gk keurus.

Balas

sixtamax wokwokwkoo :ngakak:

Balas

wah cucok buat tema wordpress
tapi, bedanya Live demo ama demo apandah?

Balas

kang ismet hapunten, bade naros, mun rek konsultasi nu terprivasi secara real time jeung instan jeung kang ismet lewat naon kitu ?? , apa boga socmed nu aktif keur chat ?? dibales nya :-D ti : nandalubis182@gmail.com

Balas

mantap kang, makasih atas ilmunya :)
Tapi bisa gak kang kalo format penulisannya jangan terlalu panjang seperti itu supaya lebih mudah diingat kang dan lebih menyatu ke domain utama. Misalkan jadi seperti ini kang hxxp://blog.kangismet.net/demo/luminus.

Mkasih sebelumnya kang n slamat malam ^_^

Balas

sama.. domain utama saya juga ga ke urus

Balas

sama aja sih kayaknya :D

Balas

abdi tos males nganggo sosmed :D aya BBM / whatsapp?

Balas

bisa aja.. tapi butuh hosting dengan space yang lumayan, kalau seperti itu biasanya diinstall di folder langsung

Balas

Ooo jadi gitu yang kang. Dengan metode yang sama ga bisa ya, harus install di folder langsung. Kalo script yang akang kasih di paste ke halaman wordpress langsung bisa ga ya kang?

Balas
Komentar ini telah dihapus oleh pengarang.

kalau dibuat halaman langsung, hasilnya acak2an.. bisa aja di simpan di halaman utama, tapi filenya ganti demo.html

Balas

Kang Ismet pami page contactna eror?ku abdi di klik teh naha janten kanu homepage :D

Balas

ada live streaming, ada live demo ada live chat....
wordpress belum paham banget ini edit-editannya.

Balas

mantep .. mksh dah berbagi kang

Balas

kata orang jerman karl max kang :D

Balas

Kang Postingan apa'an sih nih ? Nggk Ngerti :ngakak:
Hehehe... Sesuatu yg Susah Di mengerti, lol

Balas

Bang ane ijin pake logonya dulu bentaran soalnya logo ane masih di proses. hehe

Balas

belum terlambat kan buat belajar Blog Pemula seperti sy ?

Nyimak & Belajar

Balas

Kang Saya Request kalau cara membuat navigasi disis blog gimana kang ? :D saya Mau Tau

Balas

Tapi biar kayak themes-id gimana ya kang, kan itu ada #namathemes ?

Balas

kang ismet gmn ya, akang ko bisa domain kangismet.net di blogger dan wordpress??

Balas

kalau gak salah, ini domain di taruh di hosting, yang blogspot (blog.kangismet.net) adalah subdomain.

Balas

Saya punya wordpress ni kang, kebetulan sekali dan bisa saya paraktekkan di blog saya nanti.

Balas

Mantap Artikelnya Sangat Bermanfaat Kunjungi Blog Ini ya http://ornoxlous.blogspot.com/ thank (y)

Balas

Poskan Komentar


×
Chat