Membuat Screenshot Link / Preview Halaman Popup

Cara Memasang Screenshot / Preview Halaman Web dari Sebuah Link

Bismillah - ini mungkin kali pertama Pelajaran Blog dalam posting tanpa basa-basi terlebih dahulu (menghemat waktu,keburu ujan pent-),

Langsung ke TKP ya sob,yup! kali ini kita cari tahu bagaimana membuat link atau memasang screenshot / preview halaman dalam jendela popup mini.
Tentu tak lepas dari bahsa javascript,namun sobat tak perlu risau,karena widget ini sudah dalam format wyswyg,alias instant :D

Contoh fisik (letakkan kursor diatas link berikut):

Gambar Al-Qur'an

I. Bagaimana langkah awal membuat screenshot halaman / preview mini popup?

Pertama,sobat kunjungi situs ini http://www.snap.com/,dan klik tombol Get Started.


Kemudian,isi form sesuai dengan ketentuan dan permintaan,pada bagian ini sobat bisa menentukan loggo,warna,background maupun attribut lain dan bahasa;setelah itu klik tombol Continue.


Selanjutnya,sobat akan dihadapkan sebuah halaman konfirmasi yakni permintaan untuk memasukkan id kita,mulai dari email,nama blog dan konfirmasi password,oya,jangan lupa untuk contreng 'term and conditions-nya ya,lalu klik tombol Continue.


Nah,pada bagian selanjutnya,akan tampil sebuah tombol bergambar dengan tulisan Istall Now,klik tombol tersebut dan sobat akan dihadapkan notif persetujuan,maka sobat klik Ok pada bagian ini.


Lalu,sobat klik Add Widget pada halaman selanjutnya.


Kembali pada jendela sebelumnya (dibawah tombol bergamabar Install Now'),copy kode javascript,


II. Setelah mendapatkan kode-nya,apa yang selanjutnya dilakukan?

Setelah sobat dapatkan kodenya,kini kita kembali pada halaman Dashboard,maka sobat pilih Tata Letak selanjutnya pilih Edit Html dan contreng 'Expand Widget Templates'.
Atau untuk tampilan baru blogger,sobat pilih Dashboard lalu pilih Templates kemudian klik Edit Html selanjutnya klik Proceed baru kemudian sobat contreng 'Expand Widget Templates',lihat gambar:



Templates



Edit Html


Proceed



Contreng Expand Widget Templates

Setelah itu,sobat cari kode berikut:

</body>

Kemudian tepat diATASnya letakkan script yang berhasil kita salin seperti tersebut diatas.
Lalu simpan.

III. Bagaimana menerapkannya pada sebuah link?

Caranya sangat mudah,sobat bisa meletakkannya di postingan maupun dalam widget html/javascript (tahu khan? #@%^#$^).

Saya contohkan jika saya menerapkannya pada HTML/Javascript.
sobat pergilah ke Dashboard lalu pilih Tata Letak selanjutnya pilih Add New Gadget.
Atau untuk tampilan baru blogger,sobat pilih Dashboard lalu pilih Layout kemudian klik Add a Gadget,lalu pilih HTML/Javascript dalam mode html,lihat gambar:


Layout / Tata Letak


Add A Gadget


Html/Javascript


Pilih mode HTMLDan letakkan kode berikut,lalu simpan.

<a class="snap_shots" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbQapB8Xs8J1SGqAX3aMnbqp1a5rzSuuwkFSa-RrWFFexRfrys2I4Vx0egNLZHXCx2d2ZQh_VTwQqU35hTLwoCwyzD9uuogGw0ZGUxi_L0jL3XcgYLuv7ULJNAUV_dKENwK0xpY8mXJ0/s1600-r/ahlussunnah+wa+al+jamaah.jpeg">Gambar Al-Qur'an</a>

Mudah khan gan,met mencoba ya :D