2012-03-23

Implementasi Toolbar Iframe

Bismillahirrohmanirrohim....
Mumpung lagi semangat ngetik jadi mau bikin artikel sederhana mudah-mudahan aja ada yang lagi nyari ni topik, ya mumpung belum ilang status semangatnya ni!!! yaitu tutorial Membuat Toolbar Iframe. kegunaan dari toolbar iframe ini biasanya digunakan pada sebuah halaman demo / preview templates dan juga halaman download. Saya yakin kamu pasti pernah menemui sebuah link dengan Toobar Iframe ini kebanyakan memang pada sebuah Link Demo templates atau Link Download file.

Yang akan kita buat disini yaitu Membuat Toobar Iframe dengan menggunakan Blog di Blogspot, kita bisa menggunakan sebuah subdomain ataupun membuat sebuah blog baru untuk dijadikan halaman kosong sebagai halaman iframe dengan toolbar tersebut, sebenarnya Toolbar Iframe ini bisa diterapkan di halaman Posting atau pada Halaman Mandiri Blogger tetapi yang ini akan saya bahas berikutnya.

Contoh yang pernah saya buat : http://toolbariframe.blogspot.com/?url=zonablogger.com

Nanti kita cukup manambahkan URL yang akan dijadikan sebagai halaman Iframe misalnya http://blogkamu.blogspot.com/?url=u-sup.blogspot.com (teks seperti berwarna merah yang nantinya perlu kita tambahkan ).

Berikut cara membuat Toolbar Iframe untuk halaman Live Demo.
1. Buatlah blog baru di blogspot (cara membuat blog bisa dibaca disini)

2. Kemudian download Template Blank Toolbar Iframe yang telah saya buat Di sini...! (Template ini sudah saya sertakan Menu Toolbar jadi kamu tidak perlu membuatnya)

3. Sekarang Masuk ke Dasboard >> Layout >> Edit HTML untuk mengganti template dengan template blank Toolbar Iframe (cara mengganti template bisa baca disini)

4. Jangan lupa untuk menghapus semua widget.

5. Kalau sudah berhasil diganti templatenya berarti sekarang sudah selesai.

Bagaimana cara menggabungkan antara URL iframe dengan URL tujuan, mudah saja berikut caranya :
Misalnya URL utama : http://blogkamu.blogspot.com/
Maka ditambah menjadi : http://blogkamu.blogspot.com/?url=u-sup.blogspot.com  
(warna kuning nama blog kamu)
(warna merah yaitu URL target yang perlu ditambahkan) 
(warna hijau yaitu tambahan wajib setiap ingin menampilkan halaman menggunakan iframe) 

Bagaimana cukup mudah kan untuk diterapkan, untuk berikutnya saya akan posting tentang cara membuat Toolbar Iframe dengan menggunakan JavaScript untuk halaman live demo atau download.

Dapatkan artikel terbaru seperti Implementasi Toolbar Iframe langsung ke Email kamu..!!!


Ada 23 komentar untuk Implementasi Toolbar Iframe

  1. Benar bang, hampir semua penyedia template menggunakan fitur tersebut. Kadang2 susah lihat demo nya jika diakses via hp :D

    BalasHapus
  2. Terimakasih gan tutorialnya sangat bermanfaat,, saya nyari dari dulu nih.. Hehe
    saya tunggu tutorial membuat menu Toolbar'y..

    BalasHapus
    Balasan
    1. Itu sdh termasuk didalamnya "menu Toolbar Gan"....

      Hapus
  3. Owh,, sorry gan ane blum coba , coz OL di HP nih.., hehe
    tapi menu tollbar nya bisa diganti sendiri kan, dengan menu horizontal buatan kita... Low bisa nanti edit script'y gimana.?

    BalasHapus
    Balasan
    1. Iya bs dirubah tampilannya caranya ckup edit Cssnya aja.

      Hapus
  4. Kak, kalo cara membuat Toolbar Iframe dengan menggunakan JavaScript blum di buat ya tutorialnya?,

    BalasHapus
    Balasan
    1. Ini sudah toolbar iframe menggunakan javascript.

      Hapus
  5. gan yang saya butuh cara buat link download di menu bar tersebut gimana..
    agar pengunjung bisa langsung download gak perlu balik lagi ke postingan,.

    BalasHapus
    Balasan
    1. Gini bikinnya :
      http://blogkamu.blogspot.com/?url=link-download-tanpa-http://

      menjadi

      http://blogkamu.blogspot.com/?url=box.com/s/51s8liqp2zbhpuznhbqo

      Hapus
  6. gan kalau buat wordpress gmn caranya ya gan? mohon pencerahannya gan...

    BalasHapus
  7. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  8. pengaturan cara menggabungkan url iframe dengan url tujuan itu pengaturannya dimana gan?
    trus kalo misal kita mau mempublish kode html desain template kita ke dalam blog demo caranya gimana gan?
    terima kasih gan untuk jawabannya..

    BalasHapus
    Balasan
    1. Silahkan baca sampai selesai, pasti ada tu caranya....

      Hapus
  9. posting yang "Toolbar Iframe dengan menggunakan JavaScript untuk halaman live demo atau download" ditunggu banget Om...

    BalasHapus
  10. bang templatenya kok ndak bisa di instal ya?

    BalasHapus
    Balasan
    1. Cb pake tampilan dasboard blogger lama, klw yg baru msh sering error.

      Hapus
  11. kebetulan ketemu nih blog... salam kenal bro.
    ane lagi penasaram ama sebuah blog yang menggunakan IFRAME bro ni blognya http://hileud.com/... gimana ya buatnya bro.

    kunjungi juga blog saya
    http://niatingsun.blogspot.com

    BalasHapus
  12. bang punya saya setelah saya buat seperti yang tutor di atas kok ga jadi malah tampilannya kosong ga ada isi apa- apa yang ada hanya tolbar iframe itu saja.. psotingannya ga masuk...

    BalasHapus
    Balasan
    1. Iya mang gitu namanya jg Toolbar Jadi untuk menampilkan blog lain dalam iframe begini :
      http://blogkamu.blogspot.com/?url=AlamatBlog

      Untuk itu harus dibuat blog khusus, sebagai iframe live demo

      Hapus
  13. makasih gan infonya.. oh iya gan saya udah follow blog agan dengan nama hamzah alfarizi. jadi follow back ya blog saya mydownloadwallpaper.blospot.com..

    BalasHapus
  14. Gan, cara ini sekarang udah gak bisa karna blooger sekarang menggunakan tampilan baru?
    Apa ada solusinya???

    BalasHapus
  15. rencananya saya mau buat halaman download ke dropbox. kayaknya cara ini sudah tidak bisa. beberapa situs tidak bisa ditampilkan halamannya. tapi yang lainnya bisa. mungkin sudah diblokir. ada solusin???

    BalasHapus