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.

Live Menu

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. Untuk kalian yang ingin membuat Live Demo menggunakan Java Script yang memanfaatkan Laman Blogger Template, silahkan ikuti cara berikut :

1. Langkah Pertama
silahkan buat menu Laman pada Blogger, dengan judul demo sehingga membentuk format http://namablog.blogspot.com/p/demo.html

2. Langkah Dua
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>

3. Langkah Tiga
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;'>

4. Langkah Empat
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>

5. Langkah Lima
Simpan Template → kemudian 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.

Baca juga :

29 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

Silahkan tulis komentar.

to Top