Memanfaatkan Post Author untuk Menampilkan Photo Blogger/Image dengan Animasi Menggunakan CSS3

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!

D E M O

Setelah membuka link demo, silahkan arahkan cursor pada Post Author di bawah judul posting sebelah kanan dan lihat apa yang akan terjadi!

Cara Membuat Tampilan Profil Blogger pada Post Author

• 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 : ]]></b:skin> Gunakan Ctrl+F untuk mempercepat dan mempermudah pencarian kode!
• Copy-paste kode CSS dan letakkan di atasnya.
• Lanjutkan dengan mencari kode:
  <div class='post-header-line-1'/>
• Copy-paste xHTML dan letakkan di bawahnya!
• KLIK "SAVE Templates/Simpan Template".
• Buka blog dan nikmati "gaya baru" blog sampeyan!

Kode CSS

.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; 
}

]]></b:skin>

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;'/>

Jika di sandingkan dengan kode HTML seperti yang terlihat di langkah pembuatan (<div class='post-header-line-1'/>), maka susunan kode HTML seperti terlihat di bawah:

<div class='post-header'>
<div class='post-header-line-1'/>

<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;'/>

</div>

Keterangan/Catatan:

Kode CSS

• Kode yang dengan keterangan seuaikan width dan sesuaikan height digunakan untuk menyesuaikan tinggi (height) dan lebar (width) gambar yang akan di tampilkan. Kode ini terletak pada syntax .profilauthor:hover img {width:125px; .... dst;}. Rubah nilainya sesuai dengan ukuran gambar/photo.
• Kode css dengan keterangan /* 0px dapat dirubah ... dst */ berfungsi untuk mengatur posisi background dan teks post author hingga diperoleh posisi yang tepat. Semakin besar nilainya maka akan semakin turun dan semakin kecil maka akan semakin naik (hingga nilai negatif: misalnya -10px). Perubahan nilai pada kode css tersebut untuk membuat posisi simetris dengan garis di sebelah atas post author (border yang dibentuk melalui background div di xHTML).

xHTML

Kode yang berwarna merah diganti dengan URL gambar/photo milik sampeyan sendiri yang ingin di tampilkan.

Penting!

Jika masih merasa ada kesulitan untuk mencari kode html di template, back-up template dan beberapa hal yang berkaitan dengan widget, silahkan buka Special Tutorials yang terletak di deret menu accordion sebelah kiri-atas.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «