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.

Terdapat 29 komentar pada " Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template ".

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

      Hapus
    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..!!!

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

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

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

    BalasHapus
    Balasan
    1. Coba OM, diulangi lagi langkah diatas,. :)

      Hapus
    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;}

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

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

    BalasHapus
    Balasan
    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."

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

      Hapus
  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

    BalasHapus
    Balasan
    1. Mas minta tutor buat headernya dong , biar bisa langsung download gituh

      Hapus
  8. terimakasih mas. izin praktek :)

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

    BalasHapus
  10. mantabb sekali saya sangatt sangat berterima kasih mass

    BalasHapus
  11. Balasan
    1. errornya seperti apa? @#$!%^&

      Hapus
  12. Maaf nih om kalo buat downloadnya gimana ? apa harus buat blog lagi ?

    BalasHapus
  13. 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 ?

    BalasHapus
    Balasan
    1. Maaf saya ga jadi nanya udah bisa sendiri :D, thank.

      salam SMP PGRI CITEUREUP 07

      Hapus
  14. 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..!!!

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

    BalasHapus

Silahkan tulis komentar.

Sahabat Blogger

Google Plus

Copyright © 2010 Style Blogger Template. All Rights Reserved.
Download Remove