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)

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:

Gambar 4

Selanjutnya pilih HTML/Javascript lihat Gb (5)

 

Gambar 5

Kemudian letakkan kode berikut:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzLg_QpNUJwXcM-YELAA-sGx4ZpNMizqxLSjbiXR1uKPCuss1o5B2-VzIMttkkNiskfOwRquhNaNdyOnBYPBPTbN381JoL9fcTEHQNNgP5SnJbhM2rQpjlh7paZpGXyexl9n3bXqHlmJ8/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:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzLg_QpNUJwXcM-YELAA-sGx4ZpNMizqxLSjbiXR1uKPCuss1o5B2-VzIMttkkNiskfOwRquhNaNdyOnBYPBPTbN381JoL9fcTEHQNNgP5SnJbhM2rQpjlh7paZpGXyexl9n3bXqHlmJ8/s1600/pakai+kacamata+hitam.jpg Silahkan kamu ganti dengan URL gambar kamu sendiri.

Selamat Mencoba !!!

***

Baca juga :  Peluang bisnis online tanpa ribet dan Peluang Bisnis Online BlakBlakan serta Mobil Keluarga Terbaik Di Indonesia

Demikian artikel: Membuat Pop Up Widget Foto Profil di Blog semoga bermanfaat bagi anda.