Membuat iFrame Toolbar dengan Blogger Template

Pengertian iFrame Toolbar sebenarnya sebuah rangka (frame) dengan menggunakan menubar atau toolbar yang muncul di bagian atas halaman web/blog. Sesuai namanya iframe akan seperti elemen/dokumen HTML, yang terpisah dengan konten frame. iFrame Toolbar bekerja dengan menggunakan jQuery, mirip seperti sticky top menubar, saat Anda scroll browser.

Penggunaan iFrame Toolbar sering dijumpai diblog/website seperti situs-situs Free Template, social network sites (facebook), search engines, dan lainnya. Atau pada saat Anda klik sebuah tommbol demo yang mengarahkan/redirect ke tab baru, disana akan terlihat iframe toolbar di bagian atas halaman demo.

iframe toolbar screenshot

DEMO

Bagi sobat Blogger, iFrame Toolbar ini juga dibutuhkan sebagai penunjang halaman demo / blog demo yang telah Anda buat. Keuntungannya, dapat membantu meningkatkan pageview blog Anda, setiap kali seseorang mengklik link-link blog utama yang ditambahkan pada iFrame toolbar, atau pembaca Anda dapat kembali ke situs Anda dengan klik pada link Home.

Pada tutorial ini, saya akan membahas cara Membuat iFrame Toolbar dengan Blogger Template. Jadi kita akan membuat sebuah blog baru di blogger, dan menggunakannya sebagai iFrame Toolbar. Sebenarnya, Anda juga dapat meng-host / upload di server sendiri, dengan free hosting seperti Github, untuk Google Drive atau Dropbox sepertinya tidak bisa. ( Untuk membuatnya dan upload di Github akan dibahas artikel selanjutnya)

Langkah Membuat iFrame Toolbar dengan Blogger Template 

1. Buat Blog Baru 

Pada Dasbor Blogger, silahkan buat blog simple/sederhana, beri nama blog baru Anda,eg: "http://mydemo.blogspot.com"
Untuk lebih detail tentang blog baru lihat di Cara Membuat Blog di Blogger

2. Donwload File (xml)

iFrame Toolbar ini berupa file xml, yang disesuaikan dengan blogger. Ukuran sizenya kurang lebih 11kb.
Download filenya dibawah ini:
Download

3. Upload File 

Kembali ke Blog Baru yang telah dibuat, buka Template > klik tombol Cadangkan/Pulihkan > Pilih: Unggah template dari file di hard drive Anda.
Klik tombol Choose File.
Setelah upload berhasil, klik lihat Blog, jika tampilan sesuai dengan Demo diatas berarti template iframe telah berhasil.

 So, sekarang blog baru Anda telah berubah dari Simple Blogger Template menjadi iFrame Toolbar Template (ini cuma istilah saya saja).
Bagaimana cara penerapan iframe ini menjadi template demo untuk blog Anda? Kita lanjutkan ke langkah berikut.

Penerapan iFrame Toolbar untuk Blog Demo 

Pada dasarnya, iframe ini bukan sebagai main page dari halaman posting atau halaman demo, ini hanya sebagai penunjang dari blog utama Anda. Dari toolbar pengunjung akan diberi opsi Back To Post (kembali ke Blog Utama), menggunakan kotak pencarian dengan tujuan Blog Utama, sosial icon, opsi label atau link-link url dari Blog Utama.
Untuk mengarahkan url Demo misalnya dengan iframe sebagai parameter, anda hanya menggunakan parameter :"?iframe=URL"

Contoh:

http://iframetool.blogspot.com/?iframe=http://target.blogspot.com/

ket :
http://iframetool.blogspot.com/ : blog iframetoolbar yang baru dibuat
http://target.blogspot.com/ : alamat blog/halaman yang dijadikan target
?iframe= : parameter untuk redirect blog sebagai frame

Untuk contoh demo diatas, saya memakai link dengan parameter sebagai berikut:

http://problogiz-demo.blogspot.com/?iframe=http://mydemopro.blogspot.com/2012/12/accordian-style-slider-dengan-css3.html

Ini berarti sebagai target tujuan untuk memasang iframe toolbar di url :http://mydemopro.blogspot.com/2012/12/accordian-style-slider-dengan-css3.html

Setiap Anda ingin menempatkan iframe toolbar di halaman blog atau Url yang diinginkan, gunakan iframe sebagai parameter seperti diatas.

Sekian dulu sobat semoga artikel ini bisa membantu, silahkan tanyakan bagi yang menemui kesulitan untuk Membuat iFrame Toolbar dengan Blogger Template