You might have noticed in my template that there is a date widget before each post. Only a very few templates will have this. I hope to have a best and beautiful template we must concentrate in all minute things. So I decided to help my visitors to implement this hack in their template too. In this post I will give you the code what i have in my template , you guys can customize it to suit your template. If you have any doubts ask me in comment section .
Let' s start :
Go to settings then Formatting and change the date header format and other things similar to this you find in the image below
After doing this save your settings . Now navigate to edit HTML section and check exchange widgets , Then add the following CSS code in the CSS section of your template
#fecha {
display:block;
text-align: center;
float:left;height:70px;
font-family: Arial, Helvetica, sans-serif;
width:70px;
margin:0px 5px 0 0;
background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/post-top_bg.png);
}
.fecha_dia {
display:block;
font-size:1.2em;
margin:0;
color:#336699;
font-weight: bold;
padding:0.7em 0 1.1em 0;
text-align: center;
}
.fecha_mes {
display:block;
font-size: 0.9em;
margin:0;
padding-top:5px;
color:#A10000;
font-weight: bold;
text-align:center;
}
.fecha_ano { display:none; visibility:hidden; height:0; }
.post-title, .post-title a {
margin-bottom:20px; padding:2px 0 0 0;
color:#00335B;text-decoration:none;
}
.post-title a hover {color:#00335B;text-decoration:none}
.post h2 {
font-family: Arial, Georgia, Sans-serif;
font-size: 18px;
margin-bottom:20px;
text-align:left;color:#00335B;
text-transform:uppercase;
}
.post-body {
font-family: Verdana, Arial, Georgia, Sans-serif;
font-size: 13px;margin-bottom:20px;margin-left:170px;
line-height: 1.3em;
margin: 3px 0 5px 0;
}
.post_header {
margin:0; padding:0;
height:90px;
}
.post_headerr {
margin-bottom:20px; padding:0;
}
.post-labels {
background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/category-1.gif) no-repeat;
margin:0; padding:0 0 0 20px;
}
.details .post-comment-link {
background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/comments-1.gif) no-repeat;
margin:0; padding:0 0 0 20px;
}
and now search for this following code <div class='post uncustomized-post-template'> or similar and then select the code below that line upto <div class='post-body'>
and replace that code with the following code
<div class='post_header'>
<div id='fecha'>
<script>remplaza_fecha('<data:post.timestamp/>');</script>
</div>
<div class='post_headerr'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<div class='details'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span> |
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</div>
</div> <div class='post-header-line-1'/>
Now you can see date before each post.
Screenshot :
Anything else you can do with this ?
yes, In the CSS code you can see some codes are in red . You can change the codes in red to suit your template .
Write comments about this post and give me your suggestions .
on July 31, 2008 at 8:28 PM
Hi bro, im subagya from indonesia, can i ask you for something?
how you place a code HTML in your post like that, i mean with the border, background, and picture inside (ex :CodeView) please answer. thanks a lot,
best regards
You can email me at subagya@gmail.com
on August 14, 2008 at 3:21 AM
Great! Loads of nice hacks. :)
on September 7, 2008 at 9:18 PM
Your blog changed my blog's face, voted and stumbled this page also,
Thanks so much, keep up the great work, cheers
on October 27, 2008 at 2:09 AM
dear i i have problem. ilogged in draft.blogspot.com
when i save it's say....
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:includable" must be terminated by the matching end-tag "".
help me
on January 4, 2009 at 6:04 PM
I can't get this to work for me. Where do you add the code to CSS? Before < /b:skin > or what?
Also I don't have the < div class='post uncustomized-post-template' > code, so what am I suppose to look for?
When I add the code, I just get a white square, no date at all.
Thanks
on January 21, 2009 at 9:04 AM
Really nice hack dude!
Tips Blogger dot Com
on February 12, 2009 at 3:40 PM
Hi, how i do add an icon before every link of label? Thank you.
on February 16, 2009 at 5:30 AM
ive got the same problem as Sandra.
on March 4, 2009 at 9:42 AM
Sandra. I have that same problem. I suppose the problem lies in your template structure and therefore, you can not apply this trick to your template. Unfortunately this is quite common.
If you are interested in computers you are all kindly welcome to
www.computorial.blogspot.com
on March 23, 2009 at 8:21 AM
don't work
" The element type "b:includable" must be terminated by the matching end-tag "". "
on April 5, 2009 at 10:55 AM
hi Rias thank's for your articles...may i copy your article to my PC?i promise i'll not publish your article to my blog...i'm sorry if my english languange is too bad..thank you very much Rias!
on April 5, 2009 at 6:19 PM
Welcome to Techie Blogger Haidir,
Yes ofcourse you can save any articles from Techie Blogger to your PC. Even you can publish these articles but you need to put a read more link to Techie Blogger.
If you need any help contact me....... my google talk id mohamedrias1103@gmail.com
regards,
Mohamed Rias
on April 23, 2009 at 10:07 AM
Hi, I am Tony from Kenya and I have a problem with my post date. I have an almost similar calendar template and the dates just wont display. When I tried modifying the script with yours I got a 'No dictionary named: 'post' in: ['blog']'error.
http://gladysmoore.blogspot.com/
on April 23, 2009 at 10:11 AM
Never mind, the dates displayed after I returned to the previous script and refreshed, I cannot explain how.
Thanks anyway.
on May 4, 2009 at 1:27 PM
I can't seem to get this to work.
Could anybody help me if I gave the css? Or you can take it from my site itself.
http://yazuka.blogspot.com
I'm a real noob when it comes to stuff like this, so helt would be very mich appriciated.
Post a Comment