Add Stylish Image Effect (Blogger)

Keep away java script codes for image effect that are burden on blog load time. Some simple but charming image effects can make image more attractive. Fade in effect is one of them.  Adding Fade in effect to images in blogger is easy. Follow some simple steps and give your blog images a new look!

1. Log in blogger Dashboard►►Page Element►►Edit HTML

2. Check Mark to Expand Widget Template

3. Find ]]></b:skin> in your template (Ctrl+F to search code by browser search menu. )

4. Paste CSS code of desired image effect just above ]></b:skin> and save template.

5. Put Class value of image in html Area. Upload your image in post and enter in Edit HTML (top right side) and find out image codes and put class value of image.

Original codes (without image class value ) 

<img border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Byjufrlxsmmw7eBlYHU4cogaAABQajx-CkUdYCwavPHqc3swD6nfHOintvINNe6f8gv6poUKLXq1txAB7iIpMNEMh7fJamOaxutFE59hWcoEyW4pUk4T7hF4lP1Xk1vDIx2vxJNRW5R_/s200/Demo-For-Image-Effect.png" width="200" />

Codes with image class value►

<img border="0" class="square" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Byjufrlxsmmw7eBlYHU4cogaAABQajx-CkUdYCwavPHqc3swD6nfHOintvINNe6f8gv6poUKLXq1txAB7iIpMNEMh7fJamOaxutFE59hWcoEyW4pUk4T7hF4lP1Xk1vDIx2vxJNRW5R_/s200/Demo-For-Image-Effect.png" width="200" />

For blogger sidebar or anywhere else than post upload your image to blogger and take URL of image and your codes of image goes as given below-

<style>

.rfadein{
filter:alpha(opacity=70);
-moz-opacity: 0.70;
opacity: 0.70; }
.rfadein:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0; }

</style>

<img src="URL OF IMAGE"  class="rfadein">

Fadein: 

---

CSS ►

---

.rfadein{ 
filter:alpha(opacity=70); 
-moz-opacity: 0.70; 
opacity: 0.70; } 
.rfadein:hover{ 
filter:alpha(opacity=100); 
-moz-opacity: 1.0; 
opacity: 1.0; }

---

Image attribution►

---

        Class="rfadein"

DEMO [rfadein]

I think that this information will useful for you. If you like it, give some moment and share it now!

Arvind

Baca juga