Blogger Hack

Showing newest posts with label Blogger Hack. Show older posts

9 How Show Post Date For Blogger Posts Done On Same Day

Posted By Anshul On Friday, November 20, 2009 In Blogger Hack

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 = '<data:post.dateHeader/>';</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.

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

Posted By Anshul On Sunday, November 08, 2009 In Blogger Hack

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

56 How Show Blogger Profile Images In Comments As Avatars

Posted By Anshul On Monday, October 26, 2009 In Blogger Hack

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

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

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

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

Now find this line in code:-

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.

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.

32 How To Host Javascript Or .js files on Blogger Itself

Posted By Anshul On Wednesday, September 16, 2009 In Blogger Hack

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.

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.

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.

40 Show Comment Bubble At Top Of Each Blogger Posts

Posted By Anshul On Monday, July 13, 2009 In Blogger Hack

How To Make Comment Bubble At Top Of Blogger Posts,as you have seen it using in many blogs and i am sure you would not be knowing how to make and show that comment bubble count and link at top of the blogger post.So that's why i am here to make you learn it,and add it to your blogs.As its not as difficult as you might be thinking of.

As you would have checked my last blogger template-The latest Blogger template for sure and must have liked it.I have made 3-4 more proffesional templates for you,but unluckily today i got my exams schedule and will not be able to post these templates for you till 30 of july,so you have to wait for them ,as they need little finishng touch and testing with an installation guide,so will post these templates in beggining of august.

So we just continue with out tutorial on how adding comment bubble to top of each blogger posts.Some tutorials like these which you would like to read for sure are show labels as tags like woork and show post date as calender widget.

For demo of comment bubble you can check the my blog as i have comment bubble or check the demo blog too.

Now To make comment bubble,Just
Login to blogger > Then go to Layout > Edit/Html > Expand Widgets > Press Ctrl+F

And Search For ]]></b:skin> tag and place the below codes before it.

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://i43.tinypic.com/dljpzo.jpg) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
position:absolute;
padding:0px 0px 0px 0px;
}

In red above is the image link of bubble,you can use yours and don't forget to change its width and height also of the image you use.To adjust the bubble position you can edit the distance from margin-right and margin-top properties of css.

Some Readers had problem in aligning the comment number in comment bubble.To adjust it just edit padding values according to you in above css.I have added four 0 values to padding,First one is for padding-top,Second for padding-left,third for padding-bottom and last for padding-right.

Now after adding above css just find the below codes and add the red codes in between them as i have shown below.

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'><b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<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>
</h3>
</b:if>

Afer adding red codes in between them just preview your template,if comment bubble is ok,just save your template and you are done.Now you have added an comment bubble to bog in an very easy way you wouldn't have thought of.Enjoy this hack and let me know you liked it or not.
And Friends i will try to schedule one or two posts for you,but that for sure will be small blogger tutorials which also will be very useful for you to learn a lot.

Wish Me Good Luck For My Exams.

11 How Post XML,HTML & Java Scripts As Same in Blogger Posts

Posted By sunil chhabra On Tuesday, July 07, 2009 In Blogger Hack, Blogger Tips

How to post, XML,HTML,Java Script and such kind of material as a plain text in Blogger.
As many bloggers still don't know why they are not able to post the javacodes in there blogger posts.As i had posts on it before but now i am going to tell you about a simple mozilla addon.

You can check on these posts too if you want same thing to be done in blogger posts,first one is the syntax highlighter and second one is the display script and css codes in blogger posts.This is one which i am using.

Now i will tell you on how to to do this in very simple way with an simple mozilla addon.

1. First You Have Firefox Browser and Then Install Greasemonkey script on your Firefox browser by gonig on below link.

https://addons.mozilla.org/en-US/firefox/addon/748

Click on add to firefox and then install.See Below Image for reference:--

NOW RESTART THE FIREFOX IF ADD-ONS WINDOWS OPEN SIMPLY CLOSE THE WINDOW

2. Now Click on the below link and install the User script 'Blogger - HTML encode on post edit' to blogger.

http://userscripts.org/scripts/source/42696.user.js

This Script will adds a new button at the bottom of your new post area.It encodes the selected text so that it can be posted as plain text in Blogger.It will look like the Below image.

When you want to encode some code select it and cick on 'HTML ENCODE SELECTION' button.Below Image for reference

Your code will look like below image after being encoded.Now you can publish your post and see the result.

6 Make Blogger Labels Look Like Tags as Woork

Posted By Anshul On Wednesday, July 01, 2009 In Blogger Hack

Hi friends you would have seen these tags option in many blog nowadays as presently you would be able to see it in my this blog also.These tags are nothing but just the labels of blogger which use to come at the begginig of the blogger posts or at the end of the post in blogger,just depends upon the blogger template you are using and where it is defined.Using these labels look like tags make blog look beautiful.

As when i started using this trick many readers of mine started mailing me to blog about this trick,so today i am just going to let you know how to make your labels look like tags.

First of all i would like to tell you that,this trick was first used by woork in his blog template design.You can check his blog also for this demo of tags.So i have taken this trick from his blog template.If you liked woork template design you can use the similar design like him from here.The other widget you must get on is image slider and Popular Post Widget.

Now lets continue on how to implement this hack.

Advice To Backup Blogger Template.

Just Log in To Blogger > Got to Layout > Edit/Html > Expand Widgets > Ctrl+F and search for
]]></b:skin> and add the below codes before it.

div.tag{font-size:11px; padding-top:5px; color:#999999; margin-bottom:10px;}
.profileImage{float:left; margin:3px 6px 2px 0px; background:#FFF; padding:4px;}
.post-tag{font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; margin-bottom:10px;}
.post-tag a:link, .post-tag a:visited{color:#666; text-decoration:none; font-style:italic;}

You can change css properies like color and font yourself in above codes to adjust your blog.

Now search for below codes and add the red codes after it like i have shown below.

<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>
</h3>
</b:if>


<div class='post-tag'> <b style='border-right:solid 1px #CCCCCC; padding-right:10px; margin-right:10px;'>Tag</b>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url+ "?max-results=10"' rel='tag' style='border-right:solid 1px #CCCCCC; padding-right:10px; margin-right:10px;'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'/>
</b:loop>
</b:if>
</div>

Now Preview your design if its ok then save your template.
There's little css defined in above codes so you can change them also to your wants.
I hope you will install it successfully because it doesn't seem as difficult you might have thought looking at it.Enjoy these tags.

6 Numbering Comments In Blogger

Posted By Anshul On Monday, June 29, 2009 In Blogger Hack

Hi friends,you would have seen for sure in blogger from a long time that,comments the readers do in some blog are numbered starting from count 1 to number of comments on that post page.As i think many bloggers dont like this hack because they don't find any use to it in there blogger but according to me its a great hack to make your blog look different from others and i have made this too simple and beautiful to implement it very easily.

And the second advantage is it makes very easy for readers to find any comment and differentiate between the comments and without numbering,it becomes difficult to find comment if there are lot comments on post,even sometimes i find this problem in wordpress blogs as even they dont use this hack but you should use it for sure.

Before proceding to the tutorial you should have embed comment form in blogger and and back up your template for sure.

Now this is how in picture below the numbering will look like while using my codes.As you can also see this live in my present template i am using in my blog.

And thanx to fernando from quiterandom to make it possible for us to make this numbering possible.

Now login to blogger GO To Layout > Edit/Html > Check Mark Expand Widgets > Press Ctrl+F and search for below codes in your template and add the red lines in between them like i have shown below.

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</div>

</b:loop>
</dl>

And now i need some css part to make look the counter of comments to look beautiful so you just add these below css codes before the ]]></b:skin> tag.

.comment-number {
float: right;
background: url(http://i40.tinypic.com/14tmp9e.jpg) no-repeat;
width:50px;
height:50px;
margin-right: 15px;
margin-top: -35px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 18px;
font-weight: bold;
}

/*since the numbers are actually links, we need to force the color properties*/

.comment-number a:link, .comment-number a:visited {
color: #445566 !important;
text-decoration: none !important;
}
.comment-number a:hover, .comment-number a:active {
color: #FF9933 !important;
text-decoration: none !important;
}

Now in above codes red link is the background to counter image you can change it with yours.And if you change image correct its width and height option in above css with the size of your image.

One problem you can face after making the css work can be the position of counter in comments.So just edit below lines in above css to make it align to proper postion in your blog if not working at perfect position for you.

margin-right: 15px;
margin-top: -35px;

Now i hope you will love his hack for sure and will use it for sure.One more thing,i insist you to use this hack for sure if you are not using it and don't forget to implement highlight blog author comment for sure as this is what makes you different from your blog readers as i can't live without these hacks.

34 How Make Page Peel Effect Add For Blogger

Posted By Anshul On Saturday, June 20, 2009 In Blogger Hack

Peel add effect for blogger,its great way to attract you all blog visitors to something you really wanna show to your readers.Its the best place in the blog to advertise which would give maximum amount of ctr to an advertiser.You would have mostly seen these ads only in wordpress blogs and i first saw that add in johncow blog.Now we can use it in our blogspot blogs also,with the help of javascript as this hack works on jquery and css.

First i would like to thanx sohtanaka for making this jquery hack and then to naeemnur for making it to work in blogger.

As its the best place to advertise there is one more best place to advertise.That is stripe adds for blogger you can install it also,as it is also now available on blogger.And you should also read on for add placement rotator for blogspot blogs.

Now how to install peel add effect in blogger blog.

Just login to Blogger,
Go To Layout > Edit Html > Press Ctrl + F

Now search for </head>

And place the below codes above it.

In codes red line is the image url you wanna show in add,so make change according to your requirements.

Now search for <body> tag and place the below code after it.

In above codes two lines in red are url,One to link to advertisement and one to the image which peel over the advertisement.I hope you will love this hack and will add one more place to to advertise,if you don't get any any advertiser,at least you can use your subscribe button there as i have set in codes.

10 Add Labels Rss Feed Link Button To All Your Blogger Categories

Posted By Anshul On Friday, May 22, 2009 In Blogger Hack

How To Add Rss Feeds Image button in front of all your blogger labels,yes friend now you can add rss feeds button to your each label so that your readers can subscribe to your particular categories only they like the most instead of subscribing for your all blog posts.This is very useful for blogs who have mixed type content with several different categories in there blog.

As you would have seen my previous post on all the feed urls provided by blogger to get subscribe.

With the help of this now we are able to add a subscribe button for each blogger label or category in front of it as this will be very useful for our readers.

As you can check for demo the labels with rss button link in my Blogger Templates blog.

Now let's see how to add this rss feed button to each blogger label.

Important-You must have installed your label widget in your sidebar before continuing this hack,otherwise you will not find below codes.

Login to Blogger Then Go To Layout > Edit Html > Expand Widgets.

Now search for below codes :-

And replace the above codes with below one :-

<b:loop values='data:labels' var='label'>
<li>

<a expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

This is how in the below picture,your labels will look now with rss feed buttons.

As in the picture above the rss buttons are before the blogger labels but if you want to add rss feeds button after the labels like in below picture.

Use these codes:-

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>

<a expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

</li>
</b:loop>

Now just what i have done is just addded small piece of red code in between the codes of labels.The code simply contains a image of rss feed which i have taken from feedburner site to have no problem in use for everybody and i have linked that image with the rss subscribe url for blogger labels.If you dont like image you can change it with yours.

With the use of this it becomes very easy for your reader to subscribe for only your favorite content instead for all posts.I dont know you need this or not but me wanted it for sure for my new blog which has all mixed content.

32 How Show Adsense Adds In Middle Of Blogger Posts

Posted By Anshul On Wednesday, May 13, 2009 In Blogger Hack

How To Show Adsense Adds In Between Of Blogger Posts,yup its right,you can now show adsense adds between the blogger posts.Just what you have to do is to select at which posrion of the middle of the post you want adsense adds to be shown up and adsense add will be shown up itself.No need to add the adsense codes manually in between the posts.

You can also add adsense codes at the start of blogger post and end of blogger post,for this trick you can continue to this post.

Now how to add adsense adds in between the blogger posts.

Got To Blogger Layout > Edit Html > Expand Widgets > Press Ctrl + F and seach For Below code

<data:post.body/>

After getting this code replace it with below codes.

<div expr:id='"aim1" + data:post.id'></div>

<div style="clear:both; margin:10px 0">



</div>

<div expr:id='"aim2" + data:post.id'>

<data:post.body/>

</div>

<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Please add your adsense add code in place of red line in above code.

And save your template.

Now whenever you write a new blogger post and when you reach in middle of the post where you want to show up adsense adds just add below code there

and continue writing the rest post.

Now when you will publish your post you will see adsense adds in between posts at the place where you placed the above line.

For any problem can visit here for original post.
I hope you will love this for sure.

6 How Show Adsense Adds At Start And End Of Blogger Posts

Posted By Anshul On Wednesday, May 13, 2009 In Blogger Hack

How Show Adsense Adds At Start And End Of Blogger Posts,yes friends you would have seen adsense adds at the start and end of the blogger posts in all of the todays blogger,as it gives more clicks to bloggers and help them in earning more revenue from adsense.So i will tell you on how to add adsense add in you blog to show up at beginning of post and one a the end of the post.

Just First Get the adsense Unit code from your adsense account and i recommend you to to make the adsense code template friendly from here.

Now got ot blogger Layout > Page elements > edit Html > Expand Widgets

Now find for below code

<data:post.body/>

And now add the adsense code before and after above code as i added below:-

<data:post.body/>

And Preview it if its ok.Then Save your template.And enjoy earning from adsense.

Note*-Adsense doesn't allow to place adds immediately after menu links or posts as sometimes it seems to readers as these adds are part of posts not advertisements.So there is chance to get accident clicks on adds and google dont want accident clicks,they want real clicks,so if after using this trick your ctr increasing to alarming rate you may get banned so i suggest not to use this trick if your ctr increases much.If you wanna place adds like this just place a text like advertisements always at the start of the add so as to distinguish between adds and posts,which is allowed by google.

Like this below example.

So you just need is to add the word advertisements also just above the adsense code you placed in your template.I hope you will do it very easily.Just the thing you have to follow not to get banned is just use word advertisements or sponsors at the above of adsense adds where ever you show up your adsense add to make your account safe.As google is very strict with its policies,they dont even give warning,they will immediately ban you and will only give you one chance to appeal them for your account i.e you will get only one hearing in there court and chances to get back your account is 1 percent.You can read this google adsense post to learn more about it.

I hope this information will be helpful to you.Best of luck !!!

12 How Show Blogger Widget Only In Posts-Homepage-Archive Pages

Posted By Anshul On Saturday, May 02, 2009 In Blogger Hack

How to Show Blogger Widget Only In Home Page Or Post Pages of blogger,as you have seen in wordpress blog its your wish to what widget and what add you want to show in sidebar of that page but this service cant be used in blogger as all sidebar bar widgets are linked to all pages in blogger including home page but now you can select the option which sidebar widget you want to show in blogger homepage and which one in all other blogger post pages.

As one more beautiful hack how to show only post titles in blogger home and label pages has also been released,dont forget to red about it.

Lets follow on this tutorial i.e how to show blogger widget only in home page or blogger posts pages.

Add the widget in blogger layout where you want to display in blogger.Now you wnt to select on which pages of blogger it should be displayed.

Now go to "Edit HTML" page.
Mark "Expand Widget Templates"

And Search for

<b:widget id='HTML3' locked='false' title='Your Title name you gave to your widget' type='HTML'>

The number in red can be any like 1,2,3,4 it depends on your no of widget your are adding but the title to the widget you gave will be same.

So to make the widget code find easily for you find the below word

<b:widget id='HTML

and you will find many codes like these so keep on matchng the title name of widget of them to which you want to show on different pages.

After finding the code of widget you want to display on different pages add the red codes to them as i have shown below.

To display the any Blogger widget only in HomePage

<b:widget id='HTML5' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Add the red codes as shown above in codes whch you found for that particular widget in your blog html.

To display widget in all posts pages but not in HomePage

<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To Display Widget In Archive Pages

<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

If you have any problem leave your comments.

85 Automatic Read More Hack For Blogger With Thumbnail

Posted By Anshul On Friday, May 01, 2009 In Blogger Hack

Automatic Read More Hack For Blogger With Thumbnails i.e expandable post hack for blogger with thumbnail of image used in blogger posts and all this work is done by the script automatically,you just dont need to locate your image the script will do all work for you automatically.Just you have to write your post and publish it with one image in post related to post.

If you dont want to add thumbnail image in post summary then i had an post previously on automatic read more hack for blogger,read this.

Now how to install Automatic Read More Hack For Blogger With Thumbnails Demo snapshot is below.

Lets start with its installation:-

Now Login to Blogger Go to Layout > Edit HTML in your Blogger dashboard and check the "expand widget templates" box.

Find the closing </head> tag in your blog template, and paste the following section of code immediately before it:

Note in above codes we can change the numeric numbers according to our need

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

Now find this code <data:post.body/> in your template and replace it with below codes.

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

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

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

Preview Your template if its showing thumbnail with read more hack Save it.

To show thumbnail it should have one image in your blogger posts and please upload the .js file to your server and dont forget to change the link with yours in codes to make this hack work.

I am sure everybody will love this hack for sure.

Credits:-vietwebguide

2 Labels Cloud Widget Hack For Bloggers

Posted By Anshul On Wednesday, April 29, 2009 In Blogger Hack

Labels Cloud Widget For Blogger as you have seen labels in cloud formats i.e in big font and some in small font appearing in like an cloud in sky.This is very old hack and trick or widget used by most of the bloggers or you can say them as an labels showing in tags format,if you have many labels in blogspot then it will have an good widget for you as will get more attention from your readers.

For Live Demo of this widget visit Funny Pictures Blog

As before i had an early post on how to to flash animated label cloud widget for blogger blog if you want your labels in moving or animated format get it from there.

Now i will tell you how to install label cloud widget for blogger.

Log in into blogger
Click Layout.
Click Edit HTML tab
Click Download Full Template and back up the template first.

Find the closing skin tag

]]></b:skin>

And place the below code right BEFORE that.

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Now Find for </head> and place the below codes before it

You can change all sizes and colors in above codes to alter the widget according to your needs.

Now Expand your widgets in your html i.e checkmark the option to expand widgets and search for below line

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

And replace it with below codes:-

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Now preview your template if goes all right save your template.I hope it would be working fine for you.If still you have any problem with this tutorial or need more details about the widget read the original post from here with all necessary details.

25 Numbered Page Navigation Hack For Blogger

Posted By Anshul On Wednesday, April 22, 2009 In Blogger Hack

Numbered page Navigation widget is very beautiful widget used by bloggers. As you know i have posted this widget in my blog posts with different designs as of before.And today i am going to post a best beautiful design of this page navigation widget.But the css layout of widget works different for some blogs and for some it don't.So i am sorry for you if it doesn't work in your blog it may not work 100 percent sure for you and if it work enjoy it.Below is how the widget looks.

For working demo of the widget you can check my earn money blog.

This design credits totally goes to rias of techieblogger as this hack and design has been given by him.

If you want to see other 2 designs of the widget you can check them from here Design 1 ansd Design 2

Follow below steps how to install it :-

Login To Your Blogger And Then Click On Settings And Navigate To Layout Section.

Then Click On Edit/Html.

Now Find for ]]></b:skin> tag and place below codes before it.

.showpageArea {
padding : 10px;
color : #003366;
text-align : left;
width : 530px;
}
.showpageArea a {
float : left;
background : url(http://img2.pict.com/96/d6/a0/560d85d87b7c3fea73e4f41131/y4c23/backbutton.gif) no-repeat 0 0;
text-align : center;
width : 127px;
height : 42px;
text-align : center;
display : block;
margin : 0 5px;
color : #333;
padding-top : 6px;
}
.showpageArea a:hover {
color : #333;
margin : 0 5px;
padding-top : 6px;
}
.showpageNum a {
background : url(http://img2.pict.com/56/25/a3/e5bd7a9aee1773cf20cd242307/UUzOf/pagenum.gif) no-repeat 0 0;
width : 37px;
height : 42px;
display : block;
text-align : center;
float : left;
margin : 0 5px;
padding-top : 6px;
text-decoration : none;
color : #333;
}
.showpageNum a:hover {
background : url(http://img2.pict.com/fb/78/73/0fd48455927b7543953f6f1637/KG3bY/pagenum.gif) no-repeat 0 100%;
color : #fff;
}
.showpagePoint {
background : url(http://img2.pict.com/fb/78/73/0fd48455927b7543953f6f1637/KG3bY/pagenum.gif) no-repeat 0 100%;
width : 37px;
height : 42px;
display : block;
float : left;
text-align : center;
margin : 0 5px;
padding-top : 6px;
font-weight : bold;
color : #fff;
}
.showpageNum a:link, .showpage a:link {
text-decoration : none;
color : #cc0000;
}

Now search for </body> and place the below codes before it.

In the above code you can find the below written word and can change its value from 5 to any you want.

1 : var pageCount=5;

*where 5 is the the number of post that apppear in another page you will visit.

2: var displayPageNum=2;

*This code determines the number of additional page navigation numbers that will be displayed on the page.

I hope you will like this widget for sure.And i promise next time will give more beautiful design myself to you as due to lack of time not able to post frequently.Best of Luck !!

16 How Make And Add Stripe Ads In Blogger Like Navbar

Posted By Anshul On Saturday, April 04, 2009 In Blogger Hack

Stript add,how to make this stript to add functionality in blogger like navbar is showed at top in bloggers.You must have seen these stripe adds in many bloggers nowadays,as i when started blogging used to see that stripe add in johnchow blog and he use to sell that add for hundreds of dollars.This add will be shown at top of every page and is fixed add as we scroll it remains at same place.

Now i will tell you how to make this stripe ad to work in blogger, as it was designed as an wordpress plugin to be get used in wordpress blogs,but was based on javascipts,so it can be used by bloggers too as it we can use javascripts in bloggers becuse bloggers support javascrits.

Login into blogger with your ID
Click Layout
Click Edit HTML tab
Click Download Full Template and please back up your template first.
Copy and Paste the following css code right above ]]><b:skin>

#mta_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a {background: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SRtNzbvDqPI/AAAAAAAAAXk/KxbvrpJ1DE4/ico-rss-trans_thumb%5B1%5D.png?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }

Find this code </head> in your template
Copy and paste the following code right above </head>

Find this code </body> in your template ( end of template code)
Copy and paste the following code right above </body>

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://anshuldudeja.blogspot.com/2009/04/how-make-and-add-stripe-ads-in-blogger.html' target='_blank'>How to add this srtipe add In blogger,Grab it here ?</a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='anshuldudeja.blogspot.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://lh5.ggpht.com/_pt7i0nbIOCY/SRGg-N2bQ4I/AAAAAAAAAVE/pG-pTLXsMtc/close_thumb%5B1%5D.png?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

Chnage the lines in green in above codes with yours rss feeds and url and text you want to show.

You can advertise also just by putting any add url and text to it by changing green lines in above codes.

Click Save template
Finish and see the result.

Now when you will see the result the stripe will be shown at the below of your page bottom like this in the blog.Check here for Stripe add demo hack for blogger here.

Now some people want to add this stripe at the top of the page where navbar is shown like this add stripe shown in my another blogger widgets blog.

Now if you want it to be shown above like i shown just above in demo site add below css to your blogger above ]]><b:skin> in place of the css you added to show stripe add below the page.

#mta_bar { background: #FFFFE1; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }
* html #mta_bar{ /*IE6 hack*/
position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a { text-decoration: none; color: #0000FF; }
#left_bar a:hover { text-decoration: underline; color: #0000FF; }

As using this css in place of above css you added as at the beginning of the tutorial not only will show the ad stripe at the top but the design is too different.

I will tell you just one css property in codes to show the stripe at the bottom or the top of the page.

In above codes you will see i have made the word top highlighted in red.Just change it to bottom to show it at bottom of page.thats it.You have done.

I hope now you would have no problem in installing this stripe ad in top and bottom of the blogger.If you have any problem leave your comments i will sort it out.
Source:-o-om.com

20 How Show Specific Number of Posts In Blogger Label Pages

Posted By Anshul On Friday, April 03, 2009 In Blogger Hack

How To Show The Specific Number of Posts In Blogger Label Pages,ya whenever you click on any lablel page of your blog it shows mostly all of your posts in that single page, sometimes that page length becomes so long that it becomes problem for your visitors or readers.And some want to be shown specific no of posts according to there template designs like i want to show only one post in label pages in my photo blog so that it can work just as next previuos on all pages.So this hack is very useful for some of the fellow bloggers.

Now how to implement this :-

You should have label widget installed in your blog to proceed further.

Now go to Dashboard > Layout > Page Elements > Edit Html Page > Expand Widgets

Now search for below code within the html,

And replace the above codes with below:-

The digit 2 in red in above code tell how many posts you want to show in label pages.So change it to any number as how much posts you want to see in your label pages.And if you have many posts in label pages and want to show all then use this hack how to show only post titles in label pages.It will be very helpful for you.

That's it We have successfully added " Show Specific Number of Posts in Labels Page " . here after your Blog Will Show only specific number of posts in Labels Page. I hope This Hack will be useful for you all. If you have any doubts or difficulties in implementing this Hack please let me know in comments.

19 How Highlight Authors Comments In Blogger Blogs

Posted By Anshul On Sunday, March 29, 2009 In Blogger Hack

How to highlight the author comments in blogger,you would have seen many highlighted colours comments in blogger posts by author in many blogs.They are highligted to differentiate the comments of author and the readers and now you will be desperate to how to implement in your blog.Many templates have installed this hack in there blog if your blog doesn't have highlighted comments read on this post.

Login to your Dashboard > Layout > Edit Html.

Check the Expand Widget Templates Check Box.
Copy and paste the code below before the closing ]]></b:skin>

.comment-body-author {
background: #ffffff;
border: 2px solid #666666;
padding: 5px;
}

Change the line
background: #ffffff;
with
background: url(http://DIRECT_LINK_OF_THE_IMAGE.jpg) ;
If you want to show any background image in place of white color.

Next, search for the following lines of code.

You have to add Red codes in your html in the way i have shown above between the codes.I hope you will be able to do it.

If you have any problem leave your comments below.Best of luck!

5 How Create Image Hover Effect In Blogger

Posted By Anshul On Thursday, March 26, 2009 In Blogger Hack

Image hover effect in blogger,as this is very easy trick to be performed and used by many of pro blogers too.When you move your cursor to any of the image the hover effect over it takes place and its view is more clear then before.I love using this hack.Its just small css trick that is done by adding styling to your blog css and define its class while using your image url in blog posts.

How to make image hover over effect.

Log in to Blogger Then Got To

Blogger LAYOUT > Edit Html > Press Ctrl+F

Search For </head>

And place the below css above it

Now save the Template.

Now whenever you embed your image in blog or blog posts you use codes like below.

You use green codes like below in your blogs for images.

<a href="http://anshuldudeja.blogspot.com" target="_blank" alt="Blogger Widgets"><img src="http://img2.pict.com/aa/ae/97/16680dfb7c10435cbefea4aa04/4OXiK/geneliadsouzawallpaperspicturesd.jpg"/></a>

Use below blue code in place of above green code to have hover effect.

<a class="linkopacity" href="http://anshuldudeja.blogspot.com" target="_blank" alt="Blogger Widget"><img src="http://img2.pict.com/aa/ae/97/16680dfb7c10435cbefea4aa04/4OXiK/geneliadsouzawallpaperspicturesd.jpg" /></a>

Difference in both codes is just have i ahave added class=linkopacity in red in second code.

For Demo Of Image Hover Effect of two images visit Demo Blogger Widget Blog.

Blogger Templates