5 Widely Used Image Effect For Blogger

Are you tired with  java script based image effects that load very slowly, Here is 5 best widely used CSS based image effects for your blog. It is very easy to add the effects to your blog, simply follow some steps.

1. Log in blogger Dashboard►►Page Element►►Edit HTML
2. Check Mark to Expand Widget Template3. 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. when you add some image in your post simply upload image and add html class value (Given below under HTML heading after CSS ) to describe image class, to add class value of image in post area enter in edit html area of post section and search image code that you have uploaded in your post and put class value.

Your HTML Section of post look like as-

For example if you want to add border effect to an image, your image code after applying  class value goes in given way-

<img border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdjZLMHF73cdHDfgYk4oXsIrZkCYR3wjsIEYTjGTGdQ3OnOP_iBJASFCe03zBpNdILBBWwVChTQVnyE7IoeovFjYAztBSsvJ3z7xSTtAsVyUHfc1Z_xW58zKJIirvqZ3WDLcUFQVFBZW2L/s200/Image-Class.png" width="200" Class="border" />

5 Best Image Effects


1. Border Effect :-


CSS

.border{

  padding:2px;}

.border:hover {

  padding:5px;

  background-color:#ccc;

  border:3px solid #ccc;}

HTML 
               class="border"

DEMO (BORDER)

2. Border Top and Bottom-


CSS

.border-top-bottom {
  padding-top:5px;
  padding-bottom:5px;
  border-top:2px solid #ddd;
  border-bottom:2px solid #ddd;}


.border-top-bottom:hover {
  background-color:#fff;
  border-top:2px solid #000;
  border-bottom:2px solid #000;}

HTML 
               class="border-top-bottom"

DEMO (BORDER TOP BOTTOM)

3. Blue Border winth inline red border:-


CSS

.blueborder {
 padding:2px;}
.blueborder:hover {
 background-color:#E71305;
 border:5px solid #00B2FF;padding:2px;}

HTML 
            class="blueborder"

DEMO (BLUE BORDER)

4. Fadein:-


CSS

.Fadein{filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;}
.Fadein:hover{
filter:alpha(opacity=60);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;}

HTML
              class="Fadein"

DEMO (FADEIN)

5. Square:-


CSS

.square {
  padding-top:10px;
  padding-bottom:10px;
border-top:2px solid #ddd;
background-color:#000;
border-bottom:2px solid #ddd;
  }
.square:hover {
  background-color:#fff;
border-left:2px solid #ddd;
border-right:2px solid #ddd;   }

HTML
               class="square"

DEMO (SQUARE)

Tip: You can adjust padding and color value (Color Picker ) with Mast Blog Tips HTML Editor 

I think this information will useful you to make your blog images more attractive. Share this if you like.

Arvind

Baca juga