Shtoni përshkrimin e fotos
Më parë ka pasur disa mësime për të shtuar përshkrimin e fotos me anë të kodove JavaScript, por tani kam arritur të bëj dicka të bukur përmes kodeve CSSS3. I frymëzuar nga Wibiya, arrita ta bëjë.
Ky funksion është testuar në shfeltuesit Firefox dhe Google Chrome.
1. Shko tek Blogger.
2. Shko tek Design>Edit HTML dhe kliko Expand widget templates.
4. Kërko kodin (CTRL+F):
]]

/b:skin>
dhe përmbi shtoje këtë:
/* Post images with CSS animated captions by Blogger Tutoriale */
#post-image {
}
#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;
}
#post-image .caption {
width:100%;
height:90px;
padding:10px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}
#post-image .caption b {
text-shadow: 0px 2px 0px #000;
}
#post-image .caption {
color: #ddd;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}
5. Që ky funksion të funksionoj në fotot tuaja, atëherë shtoni kodin e meposhtëm në postet tuaja. ## zëvëndësoje me linkun e fotos suaj, ndërsa Titulli i fotos dhe Përshkrimi i fotos, shkruani titullin dhe përshkrimin e fotos suaj.
Kodi:
<div id="post-image">
<div id='figure'>
<img src="##"/>
<span class='caption'>
Titulli i Fotos Përshkrimi i fotos.
</span>
</div>
</div>
6. Kliko Save Template.
Burimi:
http://www.bloggertuts.info/2010/12/shtoni-pershkrimin-e-fotos.html#ixzz1fSrtqdFK