മൗസ് പോയിന്റ്‌ വരുമ്പോള്‍ ഇമേജിന് ഷാഡോ വരുകയും താഴെ ടെക്സ്റ്റ്‌ വരുകയും ചെയ്യുന്ന ഇഫെക്റ്റ് നല്‍കുന്നതെങ്ങനെ...

        മൗസ് പോയിന്റ്‌ വരുമ്പോള്‍ ഇമേജിന് ഷാഡോ വരുകയും താഴെ ടെക്സ്റ്റ്‌ വരുകയും ചെയ്യുന്ന ഇഫെക്റ്റ് നല്‍കുന്നതെങ്ങനെയെന്ന്‍ നോക്കാം, താഴെ Demo നല്‍കിയിരിക്കുന്നു.

Welcome to Apashabdhangal

1.  Blogger ല്‍  sign-in ചെയ്ത് , ബ്ലോഗ്‌ സെലക്ട്‌ ചെയ്യുക 

2. തുറന്ന് വന്ന പേജില്‍  Templateഎന്ന പേജ് ഓപ്പണ്‍ ചെയ്യുക , Edit HTML എന്ന ബട്ടണ്‍ ക്ലിക്ക് ചെയ്യുക

3.താഴെയുള്ള code  ]]></b:skin> ഈ code-ന് തൊട്ടുമുകളിലായി paste ചെയ്യുക

#image-hover { } #figure { position:relative; float:left; margin:10px; overflow:hidden; padding: 1px; } #figure:hover { -moz-box-shadow:0 0 20px rgba(0,0,0,0.75); -webkit-box-shadow:0 0 20px rgba(0,0,0,0.75); box-shadow:0 0 20px rgba(0,0,0,0.75); } #figure .caption { position:absolute; bottom:0; left:0; opacity: 0.75; margin-bottom:-115px; -webkit-transition: margin-bottom; -webkit-transition-duration: 400ms; -webkit-transition-timing-function: ease-out; -moz-transition-property: margin-bottom; -moz-transition-duration: 400ms; -moz-transition-timing-function: ease-out; -o-transition-property: margin-bottom; -o-transition-duration: 400ms; transition: margin-bottom; transition-duration: 400ms; transition-timing-function: ease-out; } #figure:hover .caption { margin-bottom:0px; } #image-hover .caption { width:100%; height:90px; padding:10px; background:#B1D7F0; color:#B1D7F0; font-family: Arial, Helvetica, sans-serif; } #image-hover .caption b { text-shadow: 0px 2px 0px #B1D7F0; } #image-hover .caption { color: #000000; line-height: 24px; font-size: 14px; text-shadow: 0px 2px 0px #000; }

4. ഇനി ഇമേജ് paste ചെയ്യുമ്പോള്‍ ഈ code ഉപയോഗിക്കുക 

<div id="image-hover">
<div id='figure'>
<a href="http://mohammedsalihkk.blogspot.in/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlHHWG-vCz1Z7ogewQy-MTZUTf-y9AZID2rWEcn9mhAkSU0bMfiZ5TJovmxhtW-PFyKfXmNM3y_lUt7YVTc7cDgv0r8gUg9wXZd6pZBU2Guk1tfIDZTRZ4fELtFaR7BtLtBx52vty0uRQj/s1600/324264775.jpg"></a>
<span class='caption'>
Welcome to Apashabdhangal , Enjoy
</span></div></div>

Red കളറിലുള്ള address മാറ്റി നിങ്ങളുടെ ഇമേജിനുള്ള Hyperlink കൊടുക്കുക

Blue  കളറിലുള്ള image URL മാറ്റി നിങ്ങളുടെ ഇമേജിന്‍റെ URL നല്‍കുക 

yellow കളറിലുള്ള text മാറ്റി നിങ്ങളുടെ ഇമേജിനാവശ്യമായ text  നല്‍കുക