Tuesday, December 25, 2012

Tutorial Colourful Image Hover



Hola human.
Harini, aku buat tutorial Colourful Image Hover untuk pengguna Blogskin juga di sediakan. *note: aku pengguna template biasa.

Blogskin user

  • Dashboard > Template
  • Ctrl + f to search </style>
  • Copy code di bawah :

img {filter: hue-rotate(360deg);-webkit-filter: hue-rotate(360deg);-moz-filter: hue-rotate(360deg);-webkit-filter;(1);-webkit-transition: all 0.7s linear;-moz-transition: all 0.7s linear;transition: all 0.7s linear;}img:hover {filter: hue-rotate(0deg);-webkit-filter: hue-rotate(0deg);-moz-filter: hue-rotate(0deg);-webkit-filter;(0);}
  • Korang paste atas code </style>
  • Preview & save kalau ok.


Template Biasa

  • Template > Edit HTML
  • Ctrl + f = .post-body img { atau img { atau . .BlogList .item-thumbnail img {
  • If xjumpa coding kat atas tu, cari la coding utk image dlm blog korang sendiri k?
  • Then, kalau dh jumpa, copy code di bawah ni & paste bawah code korang cari td.

.post-body img {filter: hue-rotate(360deg);-webkit-filter: hue-rotate(360deg);-moz-filter: hue-rotate(360deg);-webkit-filter;(1);-webkit-transition: all 0.7s linear;-moz-transition: all 0.7s linear;transition: all 0.7s linear;}.post-body img:hover {filter: hue-rotate(0deg);-webkit-filter: hue-rotate(0deg);-moz-filter: hue-rotate(0deg);-webkit-filter;(0);}
  • Extra : Kalau xjumpa apa-apa code, copy code td dan paste atas ]]></b:skin> shj.
  • Preview dan kalau jadi, save terus k? Good Morning

2 comments:

♥♥LollypOp♥♥ said...

thank u sesangat~ da lma sy nk wt mcm ni tp tataw~ arigato! suka3~ :)

Mas Erma Azni said...

@♥♥LollypOp♥♥ :)