Trik Cara Membuat Popup dengan jQuery

Bagikan :

Tweet

walaupun sedang dikampung halaman, menyempatkan untuk posting sedikit artikel trik blogging. Kali ini kita akan membahas "Trik Cara Membuat Popup dengan jQuery".

Membuat popup adalah salah satu dalam kiat kita menghias blog,ini akan memiliki peran sebagai penghemat tempat namun blog tetap dalam keadaan full performance.
Tutorial ini saya dapat dari layanan.oposisi.net,sobat bisa baca selengkapnya disana.

Langsung gan,untuk melihat contohnya (ini mungkin akan bekerja pada browser di kompi ya seperti mozilla dan selainnya,alias kurang bekerja baik pada handphone ataupun IE:() sobat bisa lihat gambar dibawah ini:

Atau sobat bisa lihat situsnya di sini.(jika situs masih tersedia ya :D)

Gimana sob,tertarik?

Gini nih cara bikinnya,Pertama langkahnya seperti biasanya ya hanya pilih Dashboard (gb.1),laluTata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).

(1)


(2)


(3)

Letakkan kode berikut tepat diatas kode </head>

<!-- Kode Menampilkan berita muslim sahih -->

<script type="text/javascript" src="http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/highslide-with-html-pelajaran-blog.js"></script>

<link rel="stylesheet" type="text/css" href="http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/highslidepelajaranblog.css" />

<script type="text/javascript">

hs.graphicsDir = 'http://layanan.oposisi.net/tampilan/bingkai/';

hs.outlineType = 'rounded-white';

hs.wrapperClassName = 'draggable-header';

</script>

<!-- Kode Menampilkan berita muslim sahih Sampai di sini -->

Lalu simpan templates.

Selanjutnya,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)



(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<a href="http://1.bp.blogspot.com/-8mQnRA_9rpw/TYh3n0lPDDI/AAAAAAAAAxs/gi5Vv6PqqpA/s1600/berita%2Bmuslim%2Bsahih.jpg" class="highslide"

onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 270, height: 300,} )">Lihat Gambar Al-Qur'an</a>

Lalu Simpan.Selesai deh :D

Ket:
Kode yang berwarna merah sesuaikan dengan keinginan sobat ya :D
http://1.bp.blogspot.com/-8mQnRA_9rpw/TYh3n0lPDDI/AAAAAAAAAxs/gi5Vv6PqqpA/s1600/berita%2Bmuslim%2Bsahih.jpg rubahlah dengan url gambar sobat atau bisa juga alamat situs seperti http://www.google.co.id/,http://www.youtube.com/,dll.

Source (http://pelajaran-blog.blogspot.com/)

Tag : Tips dan Trik, Tutorial Blog