-->

Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template

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.

Anda mungkin menyukai postingan ini

32 komentar

  1. Fajri Alhadi
    keren, makasih gan
    • Manuk Merak
      # Fajri Alhadi : Termakasih , mohon koreksi ..... :)
    • Dadan Natural
      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..!!!
  2. Unknown
    wahhhh thanks infonya gan...ijin coba dlu
  3. a
    Mantab mas, terima kasih sharingnya. saya nyoba2 ngarang beberapa kode tapi g bisa. akhirnya di share juga :) thanks yah mas
    • Manuk Merak
      Mohon koreksi ,,. :)
  4. Luar Kampus
    Minta koreksi http://zonaduka.blogspot.com/p/demo.html?iframe=setneg.blogspot.com padahal tinggi iframe udah 100%
    • Manuk Merak
      Coba OM, diulangi lagi langkah diatas,. :)
    • Manuk Merak
      #iframe, iframe{width: 100%; height: 100%; border:none;} ganti saja dengan kode #iframe, iframe{position: absolute; min-width: 100%; min-height: 100%; border:none;}
  5. arya susastra
    saya udah coba dan berhasil mas... skrg gmn caranya menambahkan link download pada toolbar?? makasih bnyak atas tutorialnya... sangat bermanfaat sekali mas...
  6. Unknown
    saya minta solusi donk bang kok saya malah jadi kaya gini
    Link
    • Manuk Merak
      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."
    • Unknown
      makasih mas @fianhar udah ngasih tutorial'a sekarang udah bisa mas
      salam kenal dair Keluarga Besar SMP PGRI 12 JAKARTA
  7. alfan
    mau nanya nih.. Aq kok ndak bisa menemukan kode < body > pada blogger yg versi baru?? mohon bantuannya,,

    terus kalo buat wordpress gimana ya??

    thanks
    • Unknown
      Mas minta tutor buat headernya dong , biar bisa langsung download gituh
    • fianhar
      Komentar ini telah dihapus oleh administrator blog.
  8. TituitBom.com
    terimakasih mas. izin praktek :)
  9. Admin - TheBerita
    masih belum berhasil :(
  10. Blog-Daslen[dot]Com
    Nah.. ini dia yang saya cari, terima kasih gan tutornya..
    Sukses deh buat agan.. :)
  11. BagongZ
    mantabb sekali saya sangatt sangat berterima kasih mass
  12. BagongZ
    eror nuyy gak bisa
    • Manuk Merak
      errornya seperti apa? @#$!%^&
  13. dzarr
    Maaf nih om kalo buat downloadnya gimana ? apa harus buat blog lagi ?
  14. dzarr
    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 ?
    • dzarr
      Maaf saya ga jadi nanya udah bisa sendiri :D, thank.

      salam SMP PGRI CITEUREUP 07
  15. Dadan Natural
    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..!!!
  16. Anonim
    gan mohon pencerahannya, kalau membuat templat demo live tuh gmna ya. bingung mah http://www.official-edu.ga/p/live-demo.html
  17. Anonim
    Komentar ini telah dihapus oleh administrator blog.
    • fianhar
      Komentar ini telah dihapus oleh administrator blog.
  1. Untuk menyisipkan sebuah kode gunakan <i rel="pre">code_here</i>
  2. Untuk menyisipkan sebuah quote gunakan <b rel="quote">your_qoute</b>
  3. Untuk menyisipkan gambar gunakan <i rel="image">url_image_here</i>