New Blog Online

Home » All posts

Blogger Trick: Adding Yahoo! Messenger Status

You�ve already know about Yahoo! Messenger, don�t you? Yahoo! Messenger or usually called YM is a place for connecting people by online chat. Do you want your blog visitors to know are you online? That�s need to put some widget automatically can tell anyone who comes to your blog, your YM status. That status is just Online or Offline. So, your blog visitors who want to chat to you, can send you message just by click. This is very useful widget. Do you want to Adding Yahoo! Messenger Status on your Blog? Easy way. Please follow these easy steps.

1. Login with your Blogger Account

2. Go to Layout Tab

3. In the Page Elements, Click Add a Gadget

4. Choose Add HTML/Javascript

5. Copy the code below and Paste in Add HTML/Javascript Form

<a href="ymsgr:sendIM?YOUR-ID"><img src="http://opi.yahoo.com/online?u=YOUR-ID&m=g&t=YOUR-STYLE-NUMBER" border="0"></a>

6. Choose style in the below

7. Modified the code to be like this (ex: My email is neorie@yahoo.com and I choose style number 2)

<a href="ymsgr:sendIM?neorie"><img src="http://opi.yahoo.com/online?u=neorie&m=g&t=2" border="0"></a>

The example results is like this:

8. If you have done to change the code with your Yahoo! ID and your style number, Click SAVE

Now, you can see your result. I hope with this widget, we can always keep our touch friendship. Good Luck!

How To Add Auto 'Read More' Feature with Thumbnails

This nice trick will automatically create post summaries with thumbnails.You don't need to add any extra code in every blogger post that you make.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code just before </head> tag.

Note : You can change above value as your choice.

5.Now Scroll down to where you see this:

<data:post.body/>

6.Replace above code with below code.

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Reade more >></b></a></span>
</b:if>

7.Now save your template and you are done.

How To Add Adsense Parser to blogger

You must generate Parsed code for your adsense code because you cannot put adsense code directly in the xml.So parse it using Adsense Parser tools.This tool help your visitors to parse their adsense code.I found this tips from here .

Parsed code will look like this :

1.Login to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget'.

3.Select 'HTML/Javascript' and add the code given below and click save.

It will look like this.

Now you are done.

Blogger Trick: How to Create Recent Comments

Do you know about the Recent Comments widget? If you do not know about, please see the bottom-right of the homepage. You will see a widget content are newest comments show up. That's good for making visitors want to give comments on your blog. Because name of visitors who comment, will visible on the homepage. How to Create Recent Comments is very easy. You just need to install the code that I give to your HTML widget. Please follow these steps:

1. This is the code:

<script style="text/javascript" src="http://www.hotlinkfiles.com/files/2612393_7ekdt/Visitors-Recent-Comments.txt"></script><script style="text/javascript">var numcomments = 2;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://cahyarienaldi.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

2. But you must modified the code first. Change this URL(just bold) with yours:
http://cahyarienaldi.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments

http://YOURBLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments

3. Go to Layout tab

4. In Page Elements, Click Add a Gadget

5. Choose Add a HTML/Javascript

6. Paste the code that already modified by you

7. SAVE

8. Congratulation! Please see the result.

You can see the example here. Good Luck! And see you in the next Post.

Blogger Trick: How to Create Blogroll / Links List

Blogroll or Links List is a place to store the Link Address on your blog. The reason for you to put other people Link Address in your blog, usually to links exchange. Links Exchange is a mutual link put other people that have a link towards your blog. Links Exchange is very useful to improve the link popularity your blog. The more blogs that have a link to the blog you are, the higher the link popularity your blog, and will be the better your blog in the Search Engine. So, Blogroll or Links List is a very important part in your blog. This time I will tell you How to Create Blogroll / Links List with a few options.

Keep Reading

1. Li

Example:

Here's the code:


<div style="border: 1px solid #D8DFEA; margin: 10px 0pt 0pt; padding: 8px; overflow: auto; width: 250px; height: 100px;">

<li>1.<a href="http://bloggertrick4u.blogspot.com/">Blog Name 1</a></li>

<li>2.<a href="http://bloggertrick4u.blogspot.com/">Blog Name 2</a></li>

<li>3.<a href="http://bloggertrick4u.blogspot.com/">Blog Name 3</a></li>

<li>4.<a href="http://bloggertrick4u.blogspot.com/">Blog Name 4</a></li>

<li>5.<a href="http://bloggertrick4u.blogspot.com/">Blog Name 5</a></li>

</div>

You can setting these:
border: 1px solid #D8DFEA is about border size, type, and color. You can change that.
width: 250px is about box width, can change with 300px, 400px, 500px, etc...
height: 100px is about box height, can change with 200px, 300px, 400px, etc...

2. Marquee

Example:

Blog Name 1

Blog Name 2

Blog Name 3

Blog Name 4

Blog Name 5

Here's the code:


<table border="3" width="250" height="250" cellpadding="2">

<tr>

<td align="left">

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="250">

<a href="http://bloggertrick4u.blogspot.com/" target="_blank">Blog Name 1</a>

<br/>

<a href="http://bloggertrick4u.blogspot.com/" target="_blank">Blog Name 2</a>

<br/>

<a href="http://bloggertrick4u.blogspot.com/" target="_blank">Blog Name 3</a>

<br/>

<a href="http://bloggertrick4u.blogspot.com/" target="_blank">Blog Name 4</a>

<br/>

<a href="http://bloggertrick4u.blogspot.com/" target="_blank">Blog Name 5</a>

<br/>

</marquee>

</td>

</tr>

</table>

Anyway, you can setting that code. Here's you can set:
scrollamount="2" is about scroll speed. You can change with 3, 4, 5, etc...
direction="down" is about direction. You can change with up, right, or left.
width="100%" is about box width with %. You can change with 80%, 60%, 50%, etc...
height="250" is about box height with pixel. You can change with 300, 400, 500, etc...

3. Dropdown

Example:

Here's the code:


<form>


<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>


<option>  - Blogroll -  </option>


<option value="http://bloggertrick4u.blogspot.com/">Blog Name 1</option>


<option value="http://bloggertrick4u.blogspot.com/">Blog Name 2</option>


<option value="http://bloggertrick4u.blogspot.com/">Blog Name 3</option>


<option value="http://bloggertrick4u.blogspot.com/">Blog Name 4</option>


<option value="http://bloggertrick4u.blogspot.com/">Blog Name 5</option>


</select>


</form>

4. Post it
If you don't want your homepage looks too much widget elements, you can move Blogroll / Links List to your Post. It's make simple hompepage. See example here.

Now, you just have to choose is. I hope we can do Exchange Links. Please put my banner links in the sidebar to your blog, and tell me. I will do same with you. Good Luck! See you in the next Post.

Blogger Trick: Adding Online User Counter

Maybe you wanna know, how many people's online in your blog. You can adding online user count on your blog to know it. Many online user count service in the internet. Let's try one named Histats. The function are to know how many online user in your blog, how many user visit you today, and many more useful function. The Histats look's like this:

To put this tool to your blog, please following the steps :

1. Please visit Histats

2. Click Register on the top tab

3. Fill the forms with your information

4. Click Continue

5. Choose the style of Histats counter by mark the radio button below the counter style you choose

6. Click Continue

7. Click at the drop down menu, choose the category which to display at your counter. the choice is : visitor today, Page views today, User online, Total visitors, and total page views. Choose empty if you want not to display them.

8. Click Continue

9. Wait a moment, your counter is updating. Copy the code

10. Login with your Blogger Account

11. Go to Layout Tab

12. In Page Element, click Add a Gedget in the sidebar

13. Choose HTML/JavaScript

14. Paste your Hitstat code here

15. Save

16. Congratulation! Now you can see the result

If you don't like it, try other service :

http://whos.amung.us/

http://www.neoworx.net

http://www.webfooted.net

http://www.fastonlineusers.com

Good Luck!

How To Add Technorati Rank Widget for Blogger

1.First login to your Technorati Account.

2.Now click here to get your Technorati API Key.

3.Login to blogger dashboard-->Layout-->Page Elements

4.Click on 'Add a Gadget' .

5.Select 'HTML/Javascript' and add below code and click save.

<div style="background-image:url(http://simpletricksblog.googlepages.com/technoratirank.gif);background-repeat:no-repeat;height:26px;">         <font size="1"><script type="text/javascript">
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
function pipeCallback(obj) {
document.write(addCommas(obj.value.items[0].title));
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=0d02a870cc849bf82a56166abd0b7671&url=http%3A%2F%2FYOURBLOG.blogspot.com&num=10&api_key=YOUR-TECHNORATI-API-KEY" type="text/javascript"></script>
</font></div><br/><a href="http://technorati.com/faves?sub=addfavbtn&add=http://YOURBLOG.blogspot.com"><img border="0" alt="Add to Technorati Favorites" src="http://static.technorati.com/pix/fave/tech-fav-1.png"/></a><br/><br/><span style="font-size: 80%">Widget by <a href="http://www.bloggerplugins.org">Blogger Widgets </a></span>

Note : Remember to replace YOURBLOG and YOUR-TECHNORATI-API-KEY with your real informations.Look at the example below.

<div style="background-image:url(http://simpletricksblog.googlepages.com/technoratirank.gif);background-repeat:no-repeat;height:26px;">         <font size="1"><script type="text/javascript">
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
function pipeCallback(obj) {
document.write(addCommas(obj.value.items[0].title));
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=0d02a870cc849bf82a56166abd0b7671&url=http%3A%2F%2Fbloggertipandtrick.blogspot.com&num=10&api_key=d727c3e16f6f03d2f15dec0c8806860c" type="text/javascript"></script>
</font></div><br/><a href="http://technorati.com/faves?sub=addfavbtn&add=http://bloggertipandtrick.blogspot.com"><img border="0" alt="Add to Technorati Favorites" src="http://static.technorati.com/pix/fave/tech-fav-1.png"/></a><br/><br/><span style="font-size: 80%">Widget by <a href="http://www.bloggerplugins.org">Blogger Widgets </a></span>

Now you are done.It will look like this.

I found this useful tip from www.bloggerplugins.org