Cara Membuat Biodata Penulis Dengan CSS Efek Hover

Rozikin – Saturday, February 23, 2013

• Facebook
• Twitter
• Google+

Beberapa Blogger profesional sering menggunakan atau menampilkan biodatanya dapa Blog nya supaya mudah dikenal oleh para pengunjung. Dan selama ini yang kita lihat tampilan biodatanya biasa - biasa aja. Tapi pada tips kali ini saya akan berbagi tutorial cara membuat biodata penulis yang berbeda, yaitu dengan CSS efek hover. Widget HTML/JavaScript untuk biodata penulis ini bisa di letakkan pada pada sidebar ataupun footer. Oh ya kode CSS ini dibuat oleh Mohammad Fazle Rabbi dan disini saya hanya sharing aja.

Sobat bisa lihat demo nya di sini.

Cara memasangnya gampang banget tinggal menambahkan gatget saja di sidebar atau footer blog. Berikut ini adalah caranya membuat biodata penulis dengan CSS efek hover:

1. Masuk ke dashboard Blogger > Tata Letak atau Layout.

2. Tambahkan Gadget > HTML/JavaScript.

3. Copy dan paste kode di bawah ini:

<style>
 .BSprofileBorder {
 margin:0 auto;
 padding:5px;
 width:290px;
 border-radius:5px;
 border: 5px #009999 solid;
 min-height:70px;
 }.BSprofileBorder1 {
 margin:5px auto;
 padding:5px;
 width:auto;
 border-radius:5px;
 border: 5px #80C8FE solid;
 min-height:70px;
 }#BSprofile{
 border:2px solid #888;
 margin:2px 5px 0px 5px;
 padding:2px;
 }
 #BSprofile:hover {
 border:2px solid #ccc;
 cursor:pointer;
 }
 .BSprofileopacity  {
 opacity: 0.5;
 margin-left: 50px;
 -moz-transition: all 0.5s ease-out;
 -o-transition: all 0.5s ease-out;
 -webkit-transition: all 0.5s ease-out;
 -ms-transition: all 0.5s ease-out;
 transition: all 0.5s ease-out;
 -moz-transform: rotate(7deg);
 -o-transform: rotate(7deg);
 -webkit-transform: rotate(7deg);
 -ms-transform: rotate(7deg);
 transform: rotate(7deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
 zoom: 1;
 }
 .BSprofileopacity:hover  {
 opacity: 1;
 margin-left: 0px;
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 transform: rotate(0deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
 zoom: 1;
 -moz-box-shadow: 1px 1px 4px #000;
 -webkit-box-shadow: 1px 1px 4px #000;
 box-shadow: 1px 1px 4px #000;
 } 
</style>
<div>
 <div>
 <img id="BSprofile" height='50' src="YOUR_IMAGE_OR_PICTURE" width='50' align="left"/>
 I'm <a rel="me" href=https://plus.google.com/u/0/GOOGLE_PLUS_ID/ title="YOUR NAME" target="_blank"> YOUR NAME </a> YOUR OTHER INFORMATION </span> >>>
 <a style="color:#888;" href="ABOUT_ME" target="_blank">Read More &#187;</a>
</div>
</div>     

Ganti tulisan yang berwarna merah seperti rincian dibawah ini:

YOUR_IMAGE_OR_PICTURE - Ganti dengan URL photo profile yang mau sobat pakai.
GOOGLE_PLUS_ID - Ganti dengan 21 digit ID Google+ sobat.
ABOUT_ME - Ganti dengan URL halaman 'About Me' yang sobat punya.
YOUR_NAME - Ganti dengan nama yang mau sobat pakai.
YOUR OTHER INFORMATION - Ganti dengan informasi apapun mengenai diri sobat, seperti negara/lokasi, judul (ex. Admin, Penulis, dll) atau basic informasi lainnya tentang diri sobat.

P.S : kalau sobat mahir dalam pengeditan CSS, sobat juga bisa mengedit warna dasar atau garis batas sesuai dengan keinginan sobat.

4. Simpan widget dan selesai.
5. Lihat hasilnya pada blog sobat. 

Selamat membuat biodata penulis dengan CSS efek hover. Enjoy it!

• Facebook
• Twitter
• Google+