Membuat Pop Up Widget Foto Profil di Blog




Membuat Pop Up Widget Foto Profil di Blog


Membuat popup Widget pada blog adalah salah satu trik dalam kita menghias blog, tutorial ini saya dapat dari layanan.oposisi.net Untuk melihat contoh yang saya aplikasikan pada blog ini, silahkan kamu klik tulisan "Lihat Foto Profil" yang ada pada bagian bawah halaman blog ini.

Lihat Foto Profil

Jika kamu klik tulisan itu maka akan muncul sebuah Pop Up berupa gambar Foto Profil saya. (Untuk menyembunyikannya lagi cukup klik tanda X yang ada atau tekan saja tombol ESC pada keyboard).




Bagaimana?

Apakah kamu tertarik ingin membuat Membuat Popup Widget pada blog seperti punya saya?

Jika iya, begini caranya. Pertama seperti biasanya, Login ke Blogger kamu, Lalu pilih Dashboard (gb.1)

Gambar 1
Selanjutnya, pilih Tata Letak (Gb 2)

Gambar 2
Kemudian contreng tulisan Expands Template Widget (Gb 3)

membuat link jquery.
Gambar 3

Langkah selanjutnya:

Cari kode </head>

Lalu letakkan kode berikut ini tepat diatas kode </head>

<!-- Kode Menampilkan gambar -->
<script type="text/javascript" src="http://bloggerindonesiaproject.googlecode.com/files/slidegambarprofil.js"></script>
<link rel="stylesheet" type="text/css" href="http://bloggerindonesiaproject.googlecode.com/files/slidegambar.css" />
<script type="text/javascript">
hs.graphicsDir = 'http://layanan.oposisi.net/tampilan/bingkai/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script>
<!-- akhir kode Menampilkan gambar -->


Lalu klik Save/Simpan.

OK !
Selanjutnya
Untuk menampilkannya pada blog kamu, maka perlu kamu tambahkan pada widget, masuklah ke menu Tata Letak / Rancangan (seperti gambar no 1 diatas).

Kemudian, klik tulisan Add New Widget atau Tambah Gadget, lihat Gambar no (4) dibawah ini:

Cara Membuat Javascript Anchor Link dan Jenis-Jenisnya.
Gambar 4
Selanjutnya pilih HTML/Javascript lihat Gb (5)
 
Cara membuat pop up window di blog.
Gambar 5
Kemudian letakkan kode berikut:

<a href="http://3.bp.blogspot.com/-0oHHrXMjyHI/TnJYZKn3siI/AAAAAAAACvA/zZGBAYmJ-cE/s1600/pakai+kacamata+hitam.jpg" class="highslide"
onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 170, height: 260,} )">Lihat Foto Profil Saya</a>

Lalu Simpan/Save.

NB:
http://3.bp.blogspot.com/-0oHHrXMjyHI/TnJYZKn3siI/AAAAAAAACvA/zZGBAYmJ-cE/s1600/pakai+kacamata+hitam.jpg Silahkan kamu ganti dengan URL gambar kamu sendiri.


Selamat Mencoba !!!

***







Ada 2 komentar untuk artikel Membuat Pop Up Widget Foto Profil di Blog

azis grafis on Rabu, 28 September 2011 22.29.00 WIB mengatakan...

Tutorial yang menarik siap dicoba

www.wahyu-winoto.com on Rabu, 05 Oktober 2011 18.08.00 WIB mengatakan...

@ azis : silahkan di coba kawan...ini bisa kamu terapin utk menghias blog, atau dimodiv aja utk menampilkan image lain..bagus koq....


Posting Komentar

 


garis hitam panjang
garis hitam panjang