Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template

live demoTulisan saya sebelumnya tentang bagaimana Cara membuat Live Demo Template pada Template Blogger berisikan tentang bagaimana alasan dan inspirasi dalam membuat Live Demo menggunakan Java Script dan Laman Blogger Template, untuk lebih silangkat silahkan lihat demo, sedangkan cara membuat Live Demo menggunakan Java Script yang memanfaatkan Laman Blogger Template yang paling mudah adalah sebagai berikut :
01 Langkah pertama , silahkan buat menu Laman pada Blogger, dengan judul demo sehingga membentuk format http://namablog.blogspot.com/p/demo.html
02 Langkah kedua, silahkan cari kode </head>, kemudian ganti dengan kode dibawah ini :
<b:if cond='data:blog.url == &quot;http://namablog.blogspot.com/p/demo.html&quot;'>
<script src='http://reog.googlecode.com/files/jquery-1.js' type='text/javascript'/>
<script src='http://reog.googlecode.com/files/iframe.js' type='text/javascript'/>
<style type='text/css'>
html, #iframe{overflow: hidden;} 
iframe{position: absolute; width: 100%; height: 100%; border:none; overflow: visible;}
</style>
</b:if>
</head>
03Langkah ketiga, cari kode <body>, kemudian ganti dengan kode dibawah ini :
<body>
<b:if cond='data:blog.url != &quot;http://namablog.blogspot.com/p/demo.html&quot;'>
04Langkah keempat, cari kode </body>, kemudian ganti dengan kode dibawah ini :
</b:if>
<b:if cond='data:blog.url == &quot;http://namablog.blogspot.com/p/demo.html&quot;'>
<div id='iframe'><iframe src=''/></div>
</b:if>
</body>
05Selanjutnya simpan Template, kemudian silahkan coba live demo Laman Blogger yang telah dibuat dengan format http://namablog.blogspot.com/p/demo.html?iframe=alamat-url sebagai contoh : http://stylebloggertemplate.blogspot.com/p/demo.html?iframe=setneg.blogspot.com
Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template yang dibuat diatas merupakan cara yang sangat sederhana, silahkan dikembangan sendiri.

Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template
  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