Modifikasi Image pada Blogger

Sebenarnya cara ini sudah banyak di share-kan temen-temen blogger, apalagi The Master blog udah paham cara ini. Ya, dari pada gak posting sama sekali di bulan ini mending nulis wal;au hanya sekedar artikel biasa. Pernah tulisan yang dulu membuat Recent Comment dengan Image (Thumbnails), kali ini saya mencoba untuk membagikan cara memodifikasi gambar dengan CSS.

Pada contoh kali ini saya memainkan kode CSS untuk memodifikasi profil pada blog ini (posisi disebelah bawah)

untuk membuatnya langsung terapkan kode berikut pada gadget anda :

<style type='text/css'>
#aboutme {
  border:2px solid #888;
  margin:2px 5px 0 0;
  padding:2px;
}

#aboutme:hover {
  border:2px solid #ccc;
  cursor:pointer;
}

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

.opacity:hover {
  opacity:1;
  margin-left:0;
  -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>

<img class="opacity" id="aboutme" src="URL IMAGE" align="left"/>
------------Tulisan anda------------

<img class="opacity" id="aboutme" src="URL IMAGE" align="left"/>
------------Tulisan anda------------
Semoga artikel yang sedikit ini dapat membantu dan bermanfaat bagi anda.Satank MkrBerkomentar

Bagikan kepada teman!

DMCA

Garis