Menampilkan Dua Image (Photo) di Widget Profile

Image profile blogger yang ditampilkan dalam widget Profile Blogger Plugin tak lebih dari sebuah thumbnail berukuran kecil berkisar 100px (width). Melalui trik yang dibuat menggunakan kode css setiap blogger dapat menampilkan gambar (image) profile dengan ukuran yang jauh lebih besar. Agar image blogger profile yang berukuran besar ditampilkan lebih atraktif, kode css3 transition dan opacity telah ditambahkan sehingga hover menciptakan sebuah transisi yang disertai fade efek. Jika pada demo di bawah yang ditampilkan bukan sebuah bentuk image profile blogger, ini hanyalah sekedar improvisasi untuk membuat pengunjung tak bosan sekaligus sebagai sebuah informasi bahwa anda tak harus menggunakan image yang sama dengan image profile yang digunakan dalam widget. Gunakan trik ini untuk menampilkan gambar/image sesuka hati anda. Ya..., mo gambar onta, boleh..., mo, gambar kambing, boleh... atau mungkin foto anda yang lagi "e'ok" juga boleh-boleh saja. Pokoknya suka-suka anda, dah!

D e m o

About Me

Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!

View my complete profile

Kode CSS

.widget-content .dapurku{
       position:absolute;
       display:block;
       z-index:0;
       left:0;
       top:0;  /* orignal code by: gubhugreyot - http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com */ 
       width:0;
       height:0;
       padding:4px;
       border:2px solid #eee;
       opacity:0;
       filter:alpha(opacity=0);
       border-radius:10px;
       box-shadow:0 0 8px #000;
       background-size:0 0;
       transition:1s;-o-transition:1s;
       -moz-transition:1s;
       -webkit-transition:1s;
       -ms-transition:1s;
}
.widget-content:hover .dapurku{
       z-index:9999;
       top:-200px;
       opacity:1.0;
       filter:alpha(opacity=100);
       background:red url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjshzCbWKb_XqRUg8v6BralI10oKlfdrX3h7c0VPBrUWpJEvjWU1UwpFUWM90xrfE1_w3-07i4yLpgehZi3jdwOzqZcyf8AChbwBYoRW3VTK9DZvvsecS1veDMPkMC861orktBCoPlwXtkY/s400/img_gubhugreyot-gadisku-004.jpg") center center no-repeat; 
       width:220px;
       height:320px;
       background-size:200px auto;
}

Cara menampilkan 2 Photo Blogger

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Pilih dan Klik Rancangan (Design).
4. Pilih dan klik Edit HTML.
5. Lakukan backup template dengan cara:
   • Klik Download Template Lengkap (Download Full Template).
   • Simpan file template di folder PC.
   • Berikan nama untuk memudahkan anda saat ingin digunakan kembali. File yang sudah tersimpan ini dapat digunakan untuk mengembalikan template kembali ke keadaan awal (sebelum prubahan atau penambahan kode htl bar) dengan cara klik Browse (Upload sebuah template dari sebuah file pada hard drive Anda) dilanjutkan "Unggah (Upload)'.
6. Klik Expand Widget Template.
7. Cari kode ]]></b:skin>.
8. Copy dan paste-kan kode CSS tepat di atas kode ]]></b:skin>.
9. Cari kode <b:widget id='Profile1'. Di bawah kode tersebut terdapat kode :
   <div class='widget-content'>.
10. Ganti kode <div class='widget-content'> dengan Kode HTML Baru di bawah.
11. Klik Simpan Template (Save Template).
12. Buka blog untuk melihat hasilnya.

Kode HTML Baru

<div class='widget-content'>
<div class='dapurku'/>

Catatan/Keterangan:

Ganti image yang digunakan pada background di kode CSS (berwarna merah) dengan image lain sesuai apa yang ingin ditampilkan pada widget profile.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjshzCbWKb_XqRUg8v6BralI10oKlfdrX3h7c0VPBrUWpJEvjWU1UwpFUWM90xrfE1_w3-07i4yLpgehZi3jdwOzqZcyf8AChbwBYoRW3VTK9DZvvsecS1veDMPkMC861orktBCoPlwXtkY/s400/img_gubhugreyot-gadisku-004.jpg