Liked

Pin It

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 DashboardPage ElementEdit 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="http://2.bp.blogspot.com/-saoISHCX4VM/Tmdy3wXLDeI/AAAAAAAAAxM/7NQlgI7MC80/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



If You Found Something Useful, Then Kindly share This Now:
Technorati Digg This Stumble Stumble Facebook Twitter
साँझा करें Share It Now !
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google Twitter FaceBook

Comments
0 Comments

0 comments:

Post a Comment

Your Suggestions are valuable for me.

FeedBurner Updates

 

Thanks for Your Arrival !

Followers

Your Precious Arrival

© 2011-2013. Mast Blog Tips All Rights Reserved Arvind Jangid, Sikar, Rajasthan. Template by Mast Blog Tips | Back To Top |