Memanfaatkan Post Author untuk Menampilkan Photo

Dengan memanfaatkan celah yang ada, kita akan buat blog semakin mengejutkan bagi pengunjung. Melalui Post Author yang terletak di bawah judul posting sebuah photo blogger muncul secara tiba-tiba ketika cursor menyentuh teks Post Author. Untuk membuat animasi cantik yang sama sekali belum tersentuh oleh satupun tutorial blogger ini, kita akan memanfaatkan CSS3 transition yang dipadukan dengan kode HTML yang lain guna menciptakan sebuah bentuk animasi. Tak banyak kode yang diperlukan, tetapi sebuah modifikasi template perlu dilakukan. Nggak akan sulit, sobat! Dalam waktu setengah jam pasti akan kelar dan sebuah "animasi atraktif layaknya sulap" siap menghiasi blog sampeyan. Mau lihat yang sudah terpasang di blog? Nih..., klik link demo di bawah ini.
Demo : http://candblogger.blogspot.com/2011/12/cara-membuat-element-baru-di-sidebar.html
Setelah membuka link demo, silahkan arahkan cursor pada Post Author di bawah judul posting sebelah kanan dan lihat apa yang akan terjadi!

Login : Login ke Blogger dengan cara:
Tulis Alamat Email.
Tulis Password.
KLIK "Login".
Dasboard/Dasbor : Akan dijumpai sesaat setelah KLIK "Login". Banyak link atau teks link terdapat di halaman ini. Cari dan klik link "Design/Rancangan".
Kembali lanjutkan dengan klik link "Edit HTML".
Back-up Templates :
KLIK Download template Lengkap/Download Full Templates.
Simpan file template di folder PC.
Kembali di halaman Edit HTML.
KLIK "Expand Widget Templates".
Cari kode : ]]> Gunakan Ctrl+F untuk mempercepat dan mempermudah pencarian kode!
Copy-paste kode CSS dan letakkan di atasnya.

.profilauthor {
display:block;
position:relative;
margin:0px 0 8px 0; /* 0px dapat dirubah untuk mengatur posisi background hingga diperoleh posisi tepat , misalnya hingga nilai -10px */
float: right;/* original code by: gubhugreyot.blogspot.com */
color: #0066FF;
background:#aaa;
text-shadow:0 1px 0 #000;
padding:2px 5px 2px 20px;
border-radius:4px 3px 3px 22px;
-moz-border-radius:4px 3px 3px 20px;
-webkit-border-radius:4px 3px 3px 22px;
border:1px solid #777;
cursor:pointer;
}
.profilauthor:hover {
color:red;/* original code by: gubhugreyot.blogspot.com */
background: #aaa;
border-bottom: 1px solid blue;
}
.profilauthor img {
position: absolute;
top:-500px;
left:-800px;
width:30px;
height:5px;
opacity:0;/* original code by: gubhugreyot.blogspot.com */
filter:alpha(opacity=0);
border:2px solid red;
padding:1px solid blue;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-o-transition:all 6s ease-in;
-moz-transition:all 6s ease-in;
-webkit-transition:all 6s ease-in;
}
.profilauthor:hover img {
width:125px; /* sesuaikan width dengan lebar gambar/image */
top:-50px;
left:-150px;
height:150px; /* sesuaikan height dengan tinggi gambar/image */
opacity:100;
filter:alpha(opacity=100);
border:4px solid #aaa;
background: #999;
padding:3px;
border-radius:12px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
-o-transform:rotate(735deg);
-moz-transform:rotate(735deg);
-webkit-transform:rotate(735deg);
-o-transition:all 1.2s ease-out;
-moz-transition:all 1.2s ease-out;
-webkit-transition:all 1.2s ease-out;
}

• Lanjutkan dengan mencari kode:
  <div class='post-header-line-1'/>
• Copy-paste xHTML dan letakkan di bawahnya!
• KLIK "SAVE Templates/Simpan Template".

xHTML

<div style='clear:both;margin:3px 0 1px;height:3px;background:#222;'/>
<span class='profilauthor post-author'>
<img src='http://h1.ripway.com/gubhugreyot/GRimages/joged.gif'/>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>
<div style='clear:both;'/>