default Blogger puts the date of the post in single line, so this time we will change the appearance of the date in a different style, which you can customize to your liking.
1.
Go to Settings. Then Format. Hence, where it says: Date Header Format, choose the following option: <0)
<=Math.abs(pos); i++)
Click on image to enlarge
*
not forget you have to Save Settings.
2.
Go to Template, then Edit HTML and click Expand Widget Templates. Then add the following code between \u0026lt;head> \u0026lt;/ head>. Better than hit the end (before \u0026lt;/ head> ), it may be that at some point, do not want this and you will make it easier to locate it to delete it. \u0026lt;script
src='http://andrewhonors.googlepages.com/fecha.js' type='text/javascript'/>
src='http://andrewhonors.googlepages.com/fecha.js' type='text/javascript'/>
3. After looking
class='blog-posts'> .... \u0026lt;b:if
cond='data:post.dateHeader'> \u0026lt;h2 class='date-header'>
\u0026lt;data:post.dateHeader/> \u0026lt;/ h2>
\u0026lt;/ B: if>
4. Once located, replace
\u0026lt;data:post.dateHeader/> by the following: \u0026lt;div
5. We in the template. The following code leave it for last, because it refers to the style of the date, which may make changes, using your criteria.
The code will need to paste between \u0026lt;b:skin> \u0026lt;! [CDATA [ and ]]>\u0026lt;/ b: skin>. Preferable that hit near the end (before \u0026lt;data:post.dateHeader/> \u0026lt;/ h2>
\u0026lt;/ B: if>
4. Once located, replace
id='fecha'> \u0026lt;script> remplaza_fecha ('\u0026lt;data: post.dateHeader />');\u0026lt;/ script> \u0026lt;/ div>
5. We in the template. The following code leave it for last, because it refers to the style of the date, which may make changes, using your criteria.
]]>\u0026lt;/ b: skin>
), it may be that at some point, do not want this and you will make it easier to locate it to delete it.
# date {display: block;
margin: 0px 1px; float: right; padding: 5px;
color: # 464646; background: # cccccc;
border: 1px solid # cccccc;
text- transform: capitalize;}
. fecha_dia {display: block;
font-size: 16px;
font-weight: bold;} text- transform: capitalize;}
. fecha_dia {display: block;
font-size: 16px;
. fecha_mes {display: block; font-size: 10px;}
. Fecha_anio
{display: block; font-size: 10px;}
Explanation: # date {
In margin, see here
In margin, see here
.
float, you can change its position, either left or right.
padding, you can increase or decrease the date format.
color and background, you can change the text color as the background.
border, change the color and 1px for another value, either 2 or 3 (increasing over the edge).
. Fecha_dia. Fecha_mes and. Fecha_anio {font-size
in, you can change the font size.
Via:
Blog & Web Resources
0 comments:
Post a Comment