Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template


Sebuah blog yang mengupas #tips blogger yang sering malakukan edit template untuk dijual dalam bentuk Template Premium atau hanya sekedar dibagikan dalam bentuk Free template untuk menarik pengunjung, pasti akan memerlukan sebuah halaman demo (live view) untuk membuat tampilan blog lebih terlihat profesional.

Live Demo pada template blogger dibuat dengan menggunakan Java Script yang memanfaatkan Iframe yang dibuat pada salah satu Laman Blogger Template (bersifat statik) untuk menampilkan halaman website/website lain dalam suatu tampilan blog/website.

Membuat halaman laman blogger untuk membuat live menu demo sangat disarankan untuk blogger yang sering membagikan template atau menjual template, tetapi tidak dianjurkan kepada blogger yang hanya menulis artikel dan tidak memerlukan live demo karena beresiko adanya perubahan tampilan, hingga dapat membuat loading menjadi berat.
Live Demo
Untuk kalian yang ingin membuat Live Demo menggunakan Java Script yang memanfaatkan Laman Blogger Template, silahkan ikuti cara berikut :

1. Langkah Pertama

Sebagai langkah pertama, silahkan buat menu Laman Blogger, dengan judul demo sehingga membentuk format http://namablog.blogspot.com/p/demo.html

2. Langkah Dua

Letakkan kode css dibawah ini tepat diatas kode ]]></b:skin>, saya menggunakan svg icon :
/* START:Live_Demo */
#view {padding:0;margin: 0;border: 0;position: fixed;top:50px;left:0;right:0;bottom:0;width:100%;height:calc(100% - 50px);
transition:all .4s ease-out;}
#tab-demo{width:100%;background:linear-gradient(-50deg,rgba(242,193,78,.95),rgba(247,129,84,.95));
box-shadow: 0 4px 12px 0 rgba(0,0,0,.2);height:50px;top:0;left: 0;color:#e2e2e2;font-size:13px;z-index:99999;position:fixed;}
#tab-demo a{color:#fff;text-decoration:none;}
.dm{position:relative;text-align:center;line-height:50px;}
.lg{float:left;padding-left:20px;text-transform:uppercase;font-weight:600;font-size:20px;}.btn{float:right;padding-right:20px;}
.btn a{border:1px solid #fff;border-radius:50px;padding:7px 13px;margin:0;margin-left:5px;transition:background-color 1s ease-out 0s;}.btn a:hover{background-color:#f78154;border-color:#f78154;color:#fff !important;}
.btn .close, .btn .dl{position:relative;padding-left:30px;}
.btn .close:after,.btn .dl:after{content:'';display:inline-block;vertical-align:top;position:absolute;top:0;left:2px;line-height:30px;height:30px;width:30px;}
.btn .close:after {background:url("data:image/svg+xml,<svg height='15' width='15' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M255,0C114.75,0,0,114.75,0,255s114.75,255,255,255s255-114.75,255-255S395.25,0,255,0z M382.5,346.8l-35.7,35.7 L255,290.7l-91.8,91.8l-35.7-35.7l91.8-91.8l-91.8-91.8l35.7-35.7l91.8,91.8l91.8-91.8l35.7,35.7L290.7,255L382.5,346.8z' fill='rgb(255, 255, 255)'></path></svg>") no-repeat center center;}
.btn .dl:after {
background:url("data:image/svg+xml,<svg height='15' width='15' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M437.1 165.8C429 90.6 365.4 32 288 32c-51.2 0-96.3 25.6-123.4 64.7-8.3-3.4-17.4-5.3-26.9-5.3-39.1 0-70.8 34.4-71.4 73.4C26.4 177.5 0 216.5 0 257.5 0 307.7 40.7 352 90.9 352H243V211c0-7.2 5.8-13 13-13s13 5.8 13 13v141h152.1c50.2 0 90.9-44.3 90.9-94.5 0-44.7-32.3-84.1-74.9-91.7zM243 435.9l-47.9-47.2c-5.1-5-13.3-5-18.4.1-5 5.1-5 13.3.1 18.4l70 69c2.5 2.4 5.8 3.7 9.1 3.7 1.7 0 3.4-.3 5-1 1.5-.6 2.9-1.6 4.1-2.7l70-69c5.1-5 5.2-13.3.1-18.4-5-5.1-13.3-5.2-18.4-.1L269 435.9V352h-26v83.9z' fill='rgb(255, 255, 255)'></path></svg>") no-repeat center center;}
/* END:Live_Demo */

3. Langkah Tiga

Selanjutnya letakkan kode dibawah ini tepat dibawah <body> :

<b:if cond='data:blog.url != &quot;http://namablog.blogspot.com/p/demo.html&quot;'>

4. Langkah Empat

Selebihnya kita buat iframe, dengan meletakkan kode dibawah ini tepat diatas <body> :

<b:else/>
<script type='text/javascript'>
        //<![CDATA[
        function getQueryVariable(e) {
            for (var r = window.location.search.substring(1), t = r.split("&"), n = 0; n < t.length; n++) {
                var a = t[n].split("=");
                if (a[0] == e) return a[1]
            }
            return !1
        }
        window.onload = function() {
            var e = getQueryVariable("url"),
                r = getQueryVariable("download");
            document.getElementById("view").src = e, document.getElementById("dl").href = r
        };
        //]]>
    </script>

    <div id='tab-demo'>
    <div class='dm lg'>
  <a href='javascript:void(0)' itemprop='url'><data:blog.title/></a>
    </div>
    <div class='dm btn'>
        <a class='dl' href='javascript:void(0)' id='dl'>Download</a>
        <a class='close' 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</a>
    </div>
    </div>
    <iframe id='view'/>
</b:if>

5. Langkah Lima

Simpan Template → kemudian coba live demo Laman Blogger yang telah dibuat dengan format :
https://warokdesign.blogspot.com/p/demo.html?url=URL_Demo&download=URL_Download

Sebagai contoh penulisan Live Demo Laman Blogger :
https://warokdesign.blogspot.com/p/demo.html?url=https://setneg.blogspot.com&download=http://setneg.blogspot.com/p/download.html
Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template yang dibuat diatas merupakan cara yang sangat sederhana, silahkan dikembangan sendiri.

Baca juga :

30 comments:

  1. Replies
    1. # Fajri Alhadi : Termakasih , mohon koreksi ..... :)

      Delete
    2. Mantap mas, LIKE..!!! oh saya pengen menu horizontalnya tetap gak hiden meskipun ke homepage atau ke postingan juga, kira2 harus digimanain mas??
      mohon pencerahannya. nice share.. thanks..!!!

      Delete
  2. wahhhh thanks infonya gan...ijin coba dlu

    ReplyDelete
  3. Mantab mas, terima kasih sharingnya. saya nyoba2 ngarang beberapa kode tapi g bisa. akhirnya di share juga :) thanks yah mas

    ReplyDelete
  4. Minta koreksi http://zonaduka.blogspot.com/p/demo.html?iframe=setneg.blogspot.com padahal tinggi iframe udah 100%

    ReplyDelete
    Replies
    1. Coba OM, diulangi lagi langkah diatas,. :)

      Delete
    2. #iframe, iframe{width: 100%; height: 100%; border:none;} ganti saja dengan kode #iframe, iframe{position: absolute; min-width: 100%; min-height: 100%; border:none;}

      Delete
  5. saya udah coba dan berhasil mas... skrg gmn caranya menambahkan link download pada toolbar?? makasih bnyak atas tutorialnya... sangat bermanfaat sekali mas...

    ReplyDelete
  6. saya minta solusi donk bang kok saya malah jadi kaya gini
    Link

    ReplyDelete
    Replies
    1. Raditz DS : Diperkirakan itu karena Laman Blogger "http://namablog.blogspot.com/p/demo.html" belum dibuat atau sudah dibuat belum dipublish, sehingga muncul "Maaf, laman yang Anda cari di blog ini tidak ada."

      Delete
    2. makasih mas @fianhar udah ngasih tutorial'a sekarang udah bisa mas
      salam kenal dair Keluarga Besar SMP PGRI 12 JAKARTA

      Delete
  7. mau nanya nih.. Aq kok ndak bisa menemukan kode < body > pada blogger yg versi baru?? mohon bantuannya,,

    terus kalo buat wordpress gimana ya??

    thanks

    ReplyDelete
  8. terimakasih mas. izin praktek :)

    ReplyDelete
  9. Nah.. ini dia yang saya cari, terima kasih gan tutornya..
    Sukses deh buat agan.. :)

    ReplyDelete
  10. mantabb sekali saya sangatt sangat berterima kasih mass

    ReplyDelete
  11. Maaf nih om kalo buat downloadnya gimana ? apa harus buat blog lagi ?

    ReplyDelete
  12. Untuk Demonya bisa : http://dblogtempate.blogspot.com/p/demo.html?iframe=dzarrganteng.blogspot.com

    Tapi Kalo downloadnya kok ga bisa : http://dblogtempate.blogspot.com/p/download.html?iframe=dzarrganteng.blogspot.com

    mohon penjelasannya om ?

    ReplyDelete
    Replies
    1. Maaf saya ga jadi nanya udah bisa sendiri :D, thank.

      salam SMP PGRI CITEUREUP 07

      Delete
  13. Mantap mas, LIKE..!!! oh saya pengen menu horizontalnya tetap gak hiden meskipun ke homepage atau ke postingan juga, kira2 harus digimanain mas??
    mohon pencerahannya. nice share.. thanks..!!!

    ReplyDelete
  14. gan mohon pencerahannya, kalau membuat templat demo live tuh gmna ya. bingung mah http://www.official-edu.ga/p/live-demo.html

    ReplyDelete

to Top