Sabtu, 12 Maret 2016

Membuat Demo Toolbar di Blogger

Ini post ketiga saya hari ini, ya mumpung ada ide dan ngotak-ngatik template blog saya jadi sekalian bikin tutor. Jika blog kalian adalah penyedia template atau membuat tutorial dengan live demo, pasti tidak asing dengan "Demo Toolbar". Yup, bagi kalian yang suka mencari template dan melihat live demo pasti tidak asing dengan toolbar tersebut. Nah bagi kalian yang belum tau, simak terus ya biar jadi tau :).
Membuat Demo Toolbar di Blogger
Untuk mengobati rasa penasaran kalian, bisa dilihat hasil demo toolbarnya dengan klik tombol dibawah ini.

Demo

Sudah dilihat hasilnya? ya kurang lebih seperti itu hasilnya. Keren? bukan saya kok yang buat, pembuatnya adalah +Kang Ismet di artikel "Membuat halaman demo di blogspot blogger". Saya hanya mengubah warna-warnanya saja :).
Oke, jika kalian mau membuat demo toolbar seperti ini cukup ikuti langkah dibawah ini.
  1. Buatlah halaman demo di menu Page (Halaman Statis), isinya kosong atau bebas mau diisi apa :p.
  2. Jika sudah membuat New Page, klik menu Templateedit HTMLcopy and paste script dibawah ini tepat diatas kode ]]></b:skin>
    /* IMAJINASI ASHA DEMO TOOLBAR */
    #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;
    background:#104E5B;
    color:white;
    font:normal 13px Arial, sans-serif;
    z-index:99999;
    position:fixed;
    }
    .closebutton {
    background:#BB7E36 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUueeZEFkRCgzF227bFof_Y8g2hWifnDLt5tw02ezHINH4hyu6rMzMkqoeso4lrG19HSd7wrqYpjTB4pKVAUXDwL-pgMsABC1MGuhpoMdl7p1vBEhLgq6Jv0vzEyS2osinmP79zkFJeBA/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:#A66955 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUueeZEFkRCgzF227bFof_Y8g2hWifnDLt5tw02ezHINH4hyu6rMzMkqoeso4lrG19HSd7wrqYpjTB4pKVAUXDwL-pgMsABC1MGuhpoMdl7p1vBEhLgq6Jv0vzEyS2osinmP79zkFJeBA/s1600/close.png)no-repeat 15px 50%}
    .dlbutton:hover {background:#A66955 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXiz-YDPnaBXOTKHuDgsohpXkuCfpuU9t9Ipl1Y8m9zqFMJzPoG1cTECxCoG4TGG5rKpIh9U9GuXqELRfIycD95l9LZJmhTJbwvUCPfQE4Z8KUe1JhPZu2waBhb0Pl7zGilcuw0fGIlA/s1600/download.png)no-repeat 15px 50%}
    .dlbutton, a.dlbutton {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXiz-YDPnaBXOTKHuDgsohpXkuCfpuU9t9Ipl1Y8m9zqFMJzPoG1cTECxCoG4TGG5rKpIh9U9GuXqELRfIycD95l9LZJmhTJbwvUCPfQE4Z8KUe1JhPZu2waBhb0Pl7zGilcuw0fGIlA/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/AVvXsEivKeU1W-OCCTy5oPYtwe0OeYOiBJ41dNU43qnayNuX9WaS9mgMFpHngwzdmdReyRLpBIvwBI-7DYvpensV4fcO8iHBhWsbmUBq8am_cGQda448mVvqp0m5EvAUHAmLZ0KusKWhjZK49QY/s1600/logo-demo-template-imajinasi-asha.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;
    }
    
  3. Kemudian tambahkan script dibawah ini dibawah kode <body>
    <b:if cond='data:blog.url != &quot;http://www.imajinasiasha.web.id/p/demo.html&quot;'>
    
    Ubah alamat blog yang di mark biru dengan alamat demo blog kalian.
  4. Tambahkan script Javascript dibawah ini diatas kode </body>
    <b:if cond='data:blog.url == &quot;http://www.imajinasiasha.web.id/p/demo.html&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    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>
    <div id='tab-demo'>
    <a class='demologo' href='http://www.imajinasiasha.web.id'>Imajinasi Asha - 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'/>
    <style>
    body {
    background:white; }
    </style>
    </b:if>
    
    Jangan lupa untuk mengubah alamat blog yang di mark biru dengan nama blog kalian.
  5. Save Template.
  6. Untuk menampilkan demo toolbar ini, kalian cukup copy and paste script dibawah ini di link artikel kalian. Jangan lupa untuk mengubah nama blog dari saya. Untuk cara tes dengan cepat, kalian bisa langsung coba pada address bar browser kalian :)
    http://www.imajinasiasha.web.id/p/demo.html?url=URL Demo disini&download=URL Download di sini
    
    Jangan lupa untuk mengganti alamat blog saya dengan nama blog kalian ya

Selesai deh, ada pertanyaan? silahkan tanya deh ya :)

Poka! Do vstrechi~
Kucing lucu
Click for Comments

0 comments