Transparent Effect For Images

Using this CSS code you can add transparent image effect to blog or website images.
For example see the below image.

CSS Code for transparent effect:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi5RCPEFnXlQ3pFW1KhJuNyC6AcPTWzS4Dyi8PNNuJHg092GGa296-n0nOKmAkKeKKGrAQYiK3zAPLYtniRPQQl_c84JHgJP9x9-GGfK8B4_O34Fnh8w-2jTklkwm7pS1Hn33mjX0GAY85/s320/tweetb.jpg" border="0" onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' style='opacity:0.4;filter:alpha(opacity=40)'/>

This image transparent method uses opacity property from style sheet

In above code Firefox uses the property opacity:x for transparency, where IE uses filter:alpha(opacity=x).
For Firefox x takes value from 0.0 - 1.0. A lower value makes the element more transparent.
For IE x can take value from 0 - 100. A lower value makes the element more transparent.

Note:
1. Change the image url which is show in red color with your own image url.
2. Opacity value of zero will make image invisible.

Make up your blog date header

Styling the blog date header

Well this can be done via editing the CSS (Cascading Style Sheet) in the template. Note that before making changes to the template best to first backup the blog template (Dashboard > Design (previously called LAYOUT) > Edit HTML >Download Full Template).

Now in the template editor, look for h2.date-header (use ctrl+F) which may be like the following:

h2.date-header {
margin:1.5em 0 .5em;
}

You can ten add in specifications for fonts and colors, example:

h2.date-header {
margin:1.5em 0 .5em;
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-size:125%
color:red;
}

That's all.......Finished.