| 0 comments »

Girl listening to music

Show Date before each Post in Blogger

categories : , | 0 comments »

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(&#39;<data:post.timestamp/>&#39;);</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 != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>



<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>



</b:if>



</b:loop>



</b:if>



</span> |



<span class='post-comment-link'>



<b:if cond='data:blog.pageType != &quot;item&quot;'>







<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 .

Techie Blogger

Welcome To BLOGGER'S PLAZA
if you like this blog , please subscribe now

Grab this Widget ~ Blogger Accessories