• G+ Wahyu Winoto
  • Pinterest Wahyu Winoto
  • Tumblr Wahyu Winoto
  • Twitter Wahyu Winoto
  • Facebook Wahyu Winoto
  • Instagram Wahyu Winoto
  • Whatsapp Wahyu Winoto



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 !!!

***


Silahkan share artikel

kepada saudara maupun sahabat yang membutuhkan.
Terima kasih.

KLIK UNTUK MELIHAT DAN ATAU MENUTUP KOLOM KOMENTAR.

wahyu-winoto.com www.wahyu-winoto.com gambar hiasan wahyu-winoto.com




Wahyu W - Bloger Indonesia


© 2010 - 2017 || Blog hosted by Blogger || Hak cipta dilindungi UU.
TOP