Add icon or image beside your sidebar title

To make your blog interesting and attractive you can add small icons beside your sidebar title.This is most common in wordpress themes and many of the premium blogger templates .We can do this by adding CSS to individual widget title(h2). It surely will give a new look to your template and keeps your blog refreshing.

Adding icon beside sidebar title involves for steps.
[1] Finding icons /image.
[2]Uploading to any free image hosting like tinypic.
[3] Making CSS for the sidebar heading title(h2)
[4]Customizing CSS.

Before going further deep in the tutorial i am expecting that you have found a suitable image and hosted it yourself.
Coming directly to step 3.Under Edit HTML tab Expand Widget template and look for ]]></b:skin> and insert the new code above ]]></b:skin>

.widget id h2 {background:url(URL OF HOSTED PIC);
background-repeat: no-repeat;
background-position:left center;
height:25px;margin:0;
padding:10px 3px 0 30px;
line-height:1.5em;
text-transform:uppercase;
letter-spacing:.2em;
}
]]></b:skin>
</head>

Now change widget id with the unique widget id in your template.

How do i know my widget id? 

Under Layout > > Page Element section.Click On edit Button of any widget/gadget to find its ID.
A new window will open with customization option .Look for the URL of the widget .Examine the url and you will find the widget id at the end of the url.

Customizing CSS

You can customize the CSS according to your template by adding or removing properties to your css.One thing that will be most important in your customization is padding

Coloring the default text selection with CSS

Overriding the default text color using CSS

When you click and drag your mouse to copy or highlight any text in any website your browser by default give blue background color.
Didn't have a clue yet??Try selecting any part of text on this post and try it on elsewhere,try wikipedia.
Whats the difference?I have used an text selection property of CSS to override the blue default color to some light blue shade.(image from cre8ivecommando.com)

In order to get this working for your blog you need to add following styles to your stylesheet.Just above your ]]></b:skin>
Till now it works only for Firefox and safari and does not supper IE.

::-moz-selection{background:#5eb7c3; color:#fff;}  /* Firefox */
::selection {background:##5eb7c3; color:#fff;} /* Safari */

And save your template.

More :

You can use it for paragraphs with different classes like csstricks.com has explained (DEMO)
p::-moz-selection{background:#1259C7; color:#fff;}
p::selection{background:#1259C7; color:#fff;}

Adding background image in Footer

Learn to add background images in footer and controlling it with CSS

One of my Orkut mate(αквαя:α яσcкѕтαя:) asked me this question that how do i add background image in the footer.This one is for you bro.
Adding background image to footer is same like adding background color/image to the blogger but the difficult part in footer is that you have to control it with css so that it adjust according to your template.
Before editing first backup your template this is important in case you want to revert back to your initial stage.

Steps  Involved:

1. Login to your dashboard.
2. Click on layout tab,click edit HTML.
3. Expand widget template
4. Use your browser search(Cntrl +f) to find footer or footer-wrapper or footer-wrap (It may be different in different templates) or something with footer.
5. Your footer will be something  like this.

6.Now Add background: url(Your-image-url.jpg) no-repeat; anywhere between the brackets { and }.
So that your Footer section Now becomes.
#footer {
width:960px;
background: url(Your-image-url.jpg);
padding-top:15px;
text-align:center;
margin:0 auto;
}
Do not Forget To replace Your-image-url.jpg with your full image url which you can upload on any image hosting websites like tinypic.com or photobucket.

7.And  Click    Save Template 

This might Work For you But If you image is not alligned ,shorter bigger and want  control on image or want to learn some Image Css properties you can read below.

Specifying How the background image repeats :

You can use background-repeat: repeat-x background-repeat: repeat-y background-repeat: no-repeat along with your image url to make it repeat horizontally ,vertically or for no repeating respectively.
Example:
background: url(Your-image-url.jpg) ;
background-repeat: repeat-x;

Or
background: url(Your-image-url.jpg) ;
background-repeat: repeat-y;
Or
background: url(Your-image-url.jpg) no-repeat;

Positioning the background image 

You can position your image using distances (in pixels px) and percentages(%) or using relative positions.Examples are taken from NCdesign
Using Distances(pixels)-background-position:100px 25px;
Adding this line with your image url will place your image 100px towards the left and 25px downwards taken from the top.Assuming Center is at the top-left of the screen.

Today is fine.

Using Percentages(%)-background-position: 25% 75%

Today is fine.

Learn More :

Where i can find more examples and tutorials for CSS or particularly background image?

1. Css background at w3schools
   
2. Stretch background Image at webdesign.about.com
3. Controlling background images and colors at elated dot com

Create Image hover effect to images -By changing opacity

This is a pretty simple hack which uses simple CSS by changing opacity to differentiate between active and inactive images.
IF you love this example then you can add this to your blogspot/blogger.
Follow the easy steps and this hack could be yours ::

• Login to your dashboard. 
• Under layout -choose Edit HTML
• Expand widget template
• Use your browser search to find <head> and paste the below code above <head> 

<style type="text/css">
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

And click Save Template

How to Use?

You can use this effect in post area or in  HTML/javascripts gadgets
When ever you want to add opacity to your image with hover effect use below code :

<a alt="Blogger Widget" class="linkopacity" href="http://myfundoo-blog.blogspot.com/" target="_blank"><img src="http://i35.tinypic.com/jadyt5.jpg" /></a>

Else if you want to add image normally like you always done before use like this:

<a href="http://i35.tinypic.com/jadyt5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i35.tinypic.com/jadyt5.jpg" /></a>

 Note The differerence between the two is that the above one uses class 'linkopacity' for which we have added css in our template while the second one does not uses class 'linkopacity' and hence works as simple image.

Social bookmarking widget - Using image swapping

This image swapping actually use a image rollover technique , when you move your mouse to any  image it grows and shrink back when the mouse is removed.This effect is based on Lam Nguyen bubble effect with css i have simplified it to make it easier to implement to blogger.

Download images icon set 'large' and 'small'  and upload to any free hosting and take account of the urls.

1.HTML part
Let Us first look at the html part of the widget which contains two classes of images 'small' and 'large'.Small for initial stage and large for active state.

    <ul id="bubble2">
      <li>
        <a href="http://feeds2.feedburner.com/funwithblog" title="Full RSS Feed">
            <img class="small" src="images/feed.png" alt="Full RSS" />
            <img class="large" src="images/feed_large.png" alt="Full RSS" />
        </a>
      </li>
      <li>
        <a href="http://feedburner.google.com/fb/a/mailverify?uri=funwithblog&loc=en_U" title="Feed via Emal">
            <img class="small" src="images/email.png" alt="Feed via Emal" />
            <img class="large" src="images/email_large.png" alt="Feed via Emal" />
        </a>
      </li>
      <li>
        <a expr:href='&quot; http://twitthis.com/twit?url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'/>
            <img class="small" src="images/twitter.png" alt="Follow me on Twitter" />
            <img class="large" src="images/twitter_large.png" alt="Follow me on Twitter" />
        </a>
      </li>
      <li>
        <a href="<a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'/>
            <img class="small" src="images/facebook.png" alt="I'm on Facebook" />
            <img class="large" src="images/facebook_large.png" alt="I'm on Facebook" />
        </a>
      </li>
      <li>
        <a expr:href='&quot;http://del.icio.us/post?url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'/>
            <img class="small" src="images/delicious.png" alt="Save me" />
            <img class="large" src="images/delicious_large.png" alt="Save me" />
        </a>
      </li>
      <li>
        <a expr:href='&quot; http://technorati.com/faves?add=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'/>
            <img class="small" src="images/technorati.png" alt="Fave me on Technorati" />
            <img class="large" src="images/technorati_large.png" alt="Fave me on Technorati" />
        </a>
      </li>
    </ul>

Do not forget to replace large and small images with their respective urls.
2. CSS part

#bubble2 {
    list-style: none;
    margin: 20px 0px 0px;
    padding: 0px;
}
#bubble2 li {
    display: inline-block;
    margin: 0px 5px;
    padding: 0px;
    width: 72px;
    height: 72px;
}
#bubble2 li a img {
    position: relative;
    border: none;
}

#bubble2 li a img.large {
    display: none;
}

#bubble2 li a:hover img.small {
    display: none;
    z-index: 0;
}

#bubble2 li a:hover img.large {
    display: block;
    margin-top: -28px;
    margin-left: -28px;
    z-index: 1000;
}
<!--[if IE 7]>
<style type="text/css">
#bubble li, #bubble2 li {
    display: inline;
}
</style>
<![endif]-->

Adding to blogger
Search for <p><data:post.body/></p> or <data:post.body/>  in your template.
And place HTML part below it.

Add Css Part of the code to your css of your template which is generally between the skin tag.
<b:skin>   and  ]]></b:skin>

How to make rounded corners in your existing menubar

This is a simple and easy tutorials for beginners , which make rounded corners in your existing menubar without using image and can be easily implemented on blogspot blogs.There is a lot of code snippet around to create a rounder corner ,but this one is simple CSS technique of rounding off corners using  some css atributes.
This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.

Note : -moz-border-radius: 10px; IS used for rounding corners in mozilla based browser and -webkit-border-radius: 10px; for safari and chrome

Add following CSS attributes to your menu element to make its corner round.

 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

  Add following CSS attributes to your menu element to make its left corner rounded :

-moz-border-radius-topleft: 10px;

    -webkit-border-top-left-radius: 10px;

.

You can use  different possible combinations of  topleft, top-left, bottom-right, bottomright etc

• -moz-border-radius-topleft / -webkit-border-top-left-radius
• -moz-border-radius-topright / -webkit-border-top-right-radius
• -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
• -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Lets Implement Using Example.

Before Rounded corners :

#navwrap {margin:auto; width:560px; float:left;}
       .topnav ul {list-style:none;margin:0;padding:0px;  float:left;}
       .topnav li {float:left;margin:0;text-align:center;}
       .topnav li a {font-family: Georgia; font-weight:normal; font-size:10px; text-transform:uppercase; display:block;padding:6.5px;color:#FFFFFF;text-decoration:none;}
       .topnav li a {background:none; }
       .topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#FFFFFF; color:#E27100;
}

After Rounded corners :

#navwrap {margin:auto; width:560px; float:left;}
       .topnav ul {list-style:none;margin:0;padding:0px;  float:left;}
       .topnav li {float:left;margin:0;text-align:center;}
       .topnav li a {font-family: Georgia; font-weight:normal; font-size:10px; text-transform:uppercase; display:block;padding:6.5px;color:#FFFFFF;text-decoration:none;}
       .topnav li a {background:none; }
       .topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#FFFFFF; color:#E27100;-moz-border-radius: 8px;

    -webkit-border-radius: 8px;

    border-radius: 8px;

}

 If you’d like to support my work and advice, just use the social bookmark options in the bar below and bookmark us!  And, if you enjoyed this post, please subscribe to our RSS feed.