How Show Post Date For Blogger Posts Done On Same Day

How To Show The Post Date For All Your Blogger Posts you do on your blog including posts you have done On same day i.e as in blogger you have an option of date-header to show up the date for each post that you have done in blogger to show up when it was posted.But there is only one small problem in this feature,as when we do more than one post on same day the date shows up only for one post,that is last one not for both.So if you have problem with this and interested in displaying the date of post in all posts,you can solve this problem following this tutorial.Check the below image showing two posts of my demo blog which i have done on same day.



You will see as date is being shown for only one post.To solve this follow these Steps:-

1. Login to blogger
2. Click Layout
3. Click Edit HTML tab
4. Check the small box next to the text “Expand Widget Template"
5. Find this code :

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

6.Remove the code and replace with this one:

<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>

7. Click "SAVE TEMPLATE".
8. Done

Now it will show date for both posts as below.



Now, all of your posts in the same day will include the date. If you have any problem you can leave your comments.

Hack To Share Your Adsense Revenue With Different Authors Of Your Blog

You would be knowing for sure as now all the big bloggers with many writers use adsense revenue sharing hack for blogs.What actually it is about?.As many still would be not knowing about it,Like suppose i own a blog and run it.Now there are also,3 more authors to my blog who also write for my blog.Now the blog is owned by me but it have 4 authors including me who are very active on my blog to post and i have been using adsense adds at the beginning and end of the post to make some money out of it.

Now problem comes here,as how to distribute or share the revenue with other authors of my blog to give there share,as it becomes difficult to check how much the authors post is contributing to revenue of blog.So the thing only can be done is to show the adds of the that author google adsense account on posts done by him/her.As this will give him the exact revenue he deserves for doing that post.

I hope now you would be clear what i was talking about.Now this hack is very simple in wordpress blogs as plugin is available for it.Now i would like to tell you how make this work in bloggers.If you really have many authors to your blog-you can really use this hack to attract more authors and give them the reason to work hard for posting on your blog,which would give them the real revenue they deserve for that post.

As the best part is,if the author had previous posts on your blog,the adds will appear on that posts too automatically.Now how to implement it in blogger.



1. Login to Blogger dashboard
2. Navigate to Layout >> Edit HTML and Expand Widget templates
3. Search for the following code inside your template

<data:post.body/>

4. Insert the following piece of code just above or below the red code you find.As adding above will show adds at beginning of post and below will result in at end of post.Or add at top and bottom both,to show at both places.

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:post.author == "admin"'>
Insert Ad Code for admin here (first author)
</b:if>

<b:if cond='data:post.author == "anshul"'>
Insert Ad Code for anshul here (second author)
</b:if>

<b:if cond='data:post.author == "sunil"'>
Insert Ad Code for sunil here (third author)
</b:if>

</b:if>

5. Replace the author name and ad code with the actual ones.As names are in bold and replace whole line 'Insert Ad Code for admin here (first author)' with the add codes of that author.

Its not necessary to use only adsense codes there.The author can have any banner add also like of his affiliate program he wants.Its upon the author with what add he wants to display.

Like above i have made 3 authors- admin,anshul and sunil.You can make any number you like,just keep on adding codes as i have done.Just change them with the name of yours,you are using in blogger as display name i.e post author name.Remember all the author names should be different.

6. Save the changes you have made.
7. You are done.
8.Verify that correct ads are shown by viewing HTML source code of the web pages when visiting posts created by various authors or bloggers.

I hope it will be very helpful for some bloggers who have many authors to there blog and even give you now opportunity to invite other authors to your blog.

Enjoy This Hack !!

How Show Blogger Profile Images In Comments As Avatars

How To Show Blogger Profile Images In Blogger Comments.As many of us bloggers saying it as showing of avatars in blogger comments but they are not avatars, they are just your blogger profile images and many readers also get mistaken by it, But they are right to say them as avatars, as they are like avatars for our bloggers.As it has been near about an month blogger has released this feature and i have found most of the bloggers also using this in there blogs.But some still have problems and not have made the solution for blank spaces in comments for anonymous comments.So i would like to hold a complete detailed tutorial on it.The below picture show up how profile images show up in blog as i have taken this snapshot from my blog after implementing this hack.



Now How to enable the blogger profile images in blogger comments.

First of all Go to Blogger > Settings > Comments and enable “Show profile images on comment”



If you are using default blogger templates then they get enabled and profile images will start up to show in blogger comments.They can also start up to show up in some customized templates but it depends at to what extent there comment section been customized or not.

Some Of The Problems You Wouldn't Like even after Enabling Profile Images In Default Template.

There will be two major problems in it.

1)The bloggers who don't have uploaded there profile images to there profiles while comments will show up a blogger favicon of size 16x16 like below.It doesn't look good from my point of view because the blogger profile images show up a picture of size 35x35.



2) The bloggers who do comments with there blog urls or anonymous comments will end up with a blank space in comments.That looks really awkward.It destroys the beauty of comment system as you can see from below image.



I have shown all the 2 problems in above picture as i hope it will be clear to you right now.Now we need to solve these problems.But first i would like to tell you about how to enable profile images in comments in blogs who are using customized templates, just what they they need is to edit small bit of codes in there blogger html.Now carry on with this tutorial.

How Enable Blogger Profile images In Customized Templates

First of all enable the feature of profile images in your blogger settings as i showed above.Now check your comments.If it shows up blogger profile images in comments,then its ok else follow next step.

First step Go to Blogger Layout >Edit HTML and backup your template.Now Expand the widget templates and check if you can find this line there

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

If you don't find above line then find below line:-

<dl id='comments-block'>

And replace it with the above line which you didn't found in your codes.

And if you still not able to find the above line you may get this one:-

<div id='comments-block'>

And replace it with the top most line which you didn't found initially.

Now find this line in code:-

<a expr:name='data:comment.anchorName'/>

And replace it with below codes.

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

If you are using the author comment highlighting trick then you can get this code <a expr:name='data:comment.anchorName'/> once more in your template but not necessary.So replace it also with above codes.

Now Save your template and you will be now able to see blogger profile images in your comments as i showed above in picture but with the two problems of showing favicon of small size and blank space for anonymous and other url comments.

Solution For The Problem

What we need is now to resize the blogger favicon to the size of blogger profile images and we need one more image for showing up for anonymous and url comments.As Soufiane from LeBlogger was the first to come out with the solution and helping us.

Now Just Go to blogger edit/Html and find for ]]></b:skin> tag and place the below css codes before it.

/* Avatar */
.avatar-image-container img {
background:url(http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=35);
width:35px;
height:35px;
}

You can just edit the image link, height and width in above css codes as you like.

Save it, You're done.

Now The the above image will be shown up for anonymous and url comments and favicon will be resized to width and height of size as you set as above in css codes.Now check how the better comments look as compared to above i shown.



I am sure now you will have no problems in implementing this in your blogs.If still you have some problems leave your comments i will try to solve them.Best Of Luck !

As i have been seeing that some of the bloggers are not getting this line <a expr:name='data:comment.anchorName'/> in there codes.So i wanna tell you one thing i.e the complete codes which enable profile images to be placed in the blogger.Just you have to place these codes in blogger, i think they might also can help you.

<dl expr:class='data:post.avatarIndentClass' id='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>
</dt>
</dl>

If you will put this codes in place of the code i told you find in beggining of tutorial that is the comment-block one the hack will also work, just you have to adjust the closing of div tags or dl or dt tags depends what have been defined in your template codes.

And if still you not able to do it and want to enable it,just invite me to your blog at my id anshulaffprg[at]gmail.com and i will do it in 5 minutes for you as i get admin to it.

How To Host Javascript Or .js files on Blogger Itself

How To Host Javascript Or .js files on Blogger, yes as blogger supports javascript which makes blogger support all the possible hacks in this platform, but the problem we bloggers face in using this is , where to host this javascript on blogger.As blogger doesn't provide any source to host javascript for blog like it has provided picasa for images.As of before we all were using googlepages to upload the .js files but google closed this service and switched to google sites.As still we can upload these .js files to google sites but just upload it with file extension .txt instead of .js and it start working.

But still,we can face any problem in future with it.The best solution is to have paid server to host your files for unlimited bandwidth, but bloggers using this free platform dont like spending on it.



I also provided you with the list of some servers to upload your javascript files but the problem was bandwidth which was very less.

So i will provide you the best solution to host your javascript on blogger itself and enjoy unlimited bandwidth.

Now just see the below codes.

<script src='http://Your-Script-Url/file.js' type='text/javascript'/>

Whenever you are trying to implement some hack making use of javascript you would have mostly been asked to download the .js file and upload to your own server,get its url and then replace it with red link in above codes shown above,and then place the whole above codes in blogger html before closing of head tag.The Problem we all face is getting an free server with unlimited bandwidth to host these javascripts.

So why don't we upload these javascripts to blogger itself.Just what you have to do is,whenever you are asked to do this kind of above stuff while implementing any hack.

Just use below code in place of above one i showed you.

<script type='text/javascript'>
//<![CDATA[
<--Paste all code here from .js file -->
//]]>
</script>

Just in place of red line in above code what you have to do is just open the .js file (which you are asked to download or upload to your own server) in notepad or on your browser , copy its code and paste it in place of above red line.And your javascript codes are now ready which are now hosted on blogger itself instead of hosting to third party server.

Now you will face no bandwidth problems.If you still have any problem related to this tutorial just leave your comments.