HB~Tech, Mobile Apps, GIS, Blogger Tips, Tricks and Hacks

How to solve Blogger’s jQuery conflicts with jQuery.noConflict in 5 minutes!

2011-12-12T03:10:00.001+08:00

When bloggers that are using Blogger have more than one JavaScript library (jQuery, MooTools etc) on their blogs, sometimes they get weird conflicts and sometimes they don’t if they are very lucky!

Yesterday however was not the lucky day for one of my visitors. She had stumbled upon my pure CSS-based emoticons for Blogger tutorial blog post and wanted to have those similar emoticons on her blog. She had perfectly followed my installation instructions but to her dismay, those pure CSS-based (made possible jQuery) emoticons failed to appear on her blog and she came back to me for some answers. Today, I’m going to provide some for her! :)

Why sometimes we get conflicts with our jQuery plug-ins?

Let me quote something from jquery.com:

The jQuery library, and virtually all of its plugins are constrained within the jQuery namespace. As a general rule, "global" objects are stored inside the jQuery namespace as well, so you shouldn't get a clash between jQuery and any other library (like Prototype, MooTools, or YUI).

That said, there is one caveat: By default, jQuery uses "$" as a shortcut for "jQuery"

Yes, the culprit that caused all those weird conflicts is indeed ‘$’!

Thankfully, such conflicts can easily be resolved by calling upon the jQuery.noConflict() method. Let me show you an example.

How to solve Blogger’s jQuery conflicts with jQuery.noConflict

In my pure CSS-based emoticons for Blogger tutorial blog post, the JavaScript code snippet that causes conflicts to one of my visitors is the one shown down below.

<script type='text/javascript'>
$(document).ready(function(){
$('.post-body, .comments').emoticonize({
//delay: 500,
//animate: true,
//exclude: 'pre, code, .no-emoticons'
});
})
</script>

To solve the conflicts once and for all, just replace the whole code snippet shown earlier with the following down below.

<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(…)
$j(document).ready(function(){
});
</script>

<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('.post-body, .comments').emoticonize({
//delay: 500,
//animate: true,
//exclude: ', pre, code, .no-emoticons'
});
})
</script>

Pay attention to those marked in red and green. The one marked in green is where we call upon the assistance of the jQuery.noConflict() method and it is must be placed right AFTER you call upon your JavaScript libraries (in your Blogger template) and BEFORE the code snippet that is causing the conflicts. The ones marked in red are where we replaced those conflict-making ‘$’(you would understand better after comparing the BEFORE and AFTER versions) with ‘jQuery’.

To my visitor that is having problems with her pure CSS-based emoticons jQuery plug-in, you may now save your Blogger template and enjoy your new emoticons. :)

Even though the examples shown earlier are to help one of my visitors solve conflicts that are caused by her pure CSS-based emoticons jQuery plug-in, the lesson that you have learned here today can also help you resolve conflicts created by other jQuery plug-ins. I strongly recommend bloggers that are fond of using JavaScript libraries (jQuery) on their blogs to read and master other noteworthy techniques that they can also use to resolve conflicts between their jQuery plug-ins and other JavaScript libraries.

How to remove or disable Blogger-clickTrap with Google Chrome in 5 minutes!

2011-12-10T02:36:00.001+08:00

Google Chrome is a wonderful internet browser and to experienced bloggers, Chrome is more than just a browser. It has powerful built-in features that can actually help bloggers not only tweak their Blogger templates but also totally design a new one from scratch!

Yes, seriously! Google Chrome can be an extremely powerful WYSIWYG (What You See Is What You Get) Blogger template editor to the hands of experts! Please do not ask me to show you how to do it with Google Chrome since it requires strong knowledge and understanding in Blogger data tags, XML, HTML, XHTML, CSS and of course client-side scripts such as JavaScript.

Today however, I’m going to reveal something that normally bugs bloggers that are using Blogger. It’s the mysterious phenomenon that happens only when bloggers are previewing their Blogger templates or blog posts with their internet browsers, after clicking upon the ‘Preview’ button from their Post or Template editor. The phenomenon completely disables the left-click button and bloggers that are using Blogger could not click (left-click, to be more exact) on links, buttons and etc.

The phenomenon seems to affect the ‘above the fold’ area. Once you scroll down or hit the ‘Pg Dn’ button, the phenomenon disappears for good!

What is causing the mysterious phenomenon?

It is caused by an HTML <div> tag that comes with a class attribute populated with ‘blogger-clickTrap’ value. An example is shown (marked in red) down below.

<div class="blogger-clickTrap" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10; cursor: default; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: white; opacity: 0.01; background-position: initial initial; background-repeat: initial initial; ">
 
</div>

Alright! Come and learn how to disable or remove it with Google Chrome in just 5 minutes!

How to remove or disable Blogger-clickTrap with Google Chrome in 5 minutes!

While you’re still previewing your Blogger template or blog post with Google Chrome, hit the right-click button and select ‘Inspect element’.

Take a look at the new window that just slid into view at the bottom of your screen. By default, selecting ‘Inspect element’ will put the Elements panel into plain view right away. As matter of fact, Google Chrome should have highlighted the HTML <div> tag that we want to remove since the last position of your cursor is right on top of it (blogger-clickTrap)! You can’t miss it! If you missed it somehow, search for that one HTML <div> tag that comes with a class attribute populated with ‘blogger-clickTrap’ value.

Select or highlight the target HTML <div> tag and hit your right-click button. Now you may select ‘Delete node’.

Tada! Congratulations! You have just removed the HTML <div> tag that has been bugging you for quite a while with Google Chrome! But please! Please do not tell Matt Cutts about this! If he got the wind of it, he will send your blog to the last SERP!

Just kidding, folks! :) Removing the HTML <div> tag that comes with a class attribute populated with ‘blogger-clickTrap’ value will not jeopardize your search engine rankings. It won’t affect your Blogger template at all since the HTML <div> tag is a temporary tag created by Blogger and it exists only when you are previewing your Blogger template or blog post online.

There you are! ‘Blogger-clickTrap’ removal with the assistance of Google Chrome in just 5 minutes! :)

How to remove Malware (reported by Chrome) from Blogger in 5 minutes!

2011-12-09T01:26:00.001+08:00

Have Chrome ever reported the existence of malicious software (malware) on your Blogger-powered blog before?

The reason why I posed the above question today is because I’m seeing more and more Blogger-powered blogs that have such warnings reported by Chrome and Chrome happens to be my preferred internet browser of choice. The sight is disturbing but what is more disturbing is the fact that some bloggers didn’t pay much attention to such malware reports! What were they thinking?!

I can give you plenty of reasons why bloggers should pay serious attention to the existence of malicious software (malware) on their blogs but I will only list 3 today.

Malicious software (Malware) makes you lose traffic

Take a good look at the following screenshot. Chrome clearly said that my computer may catch a virus if I visit a blog that is quite popular here in my part of the world. Chrome even provides me with a big ‘Go back’ button so that I can click on it and go back to the last safe zone. Just imagine how many potential visitors the 'infected' blog had lost!

Bad news travel fast!

Yes, bad news does travel very fast and soon people will be talking about the existence of malicious software (malware) on your blog. The news might end up on social networks and soon people might get scared to visit your blog. There goes your blog and your reputation as a blogger down the drain!

Malicious software (Malware) gives you distinct 'recognition', recognized by major search engines

Take a look at the following screenshot. Once you have malicious software (malware) on your blog, failure to remove it in a timely manner will be ‘punished’ severely by major search engines such as Google. Your blog will be labeled harmful and the label is clearly seen in search results pages (SERP). If you are searching for something via Google and stumbles upon search results with such warnings attached, would you go and visit that blog?

Alright! I have given you enough reasons and I hope you are now convinced that malicious software (malware) is not something that should be taken lightly. Now come and learn how to remove malicious software (malware) from your Blogger-powered blog in 5 minutes.

Yes, it is that easy!

How to remove malicious software (malware) from Blogger

Once you saw warnings such as the one shown earlier on Chrome, note down the ‘element’ identified as malicious. In this particular example, the malicious element originates from another blog (nasionalis1946.blogspot.com).

Go back to Chrome and visit your ‘infected’ blog. Quickly view the live page source of your blog and use Chrome’s ‘Find’ tool (hit Ctrl+F) to look for ‘nasionalis1946.blogspot.com’ in your live page source.

Once found, find out how it got there in the first place. See if it is coming from an installed widget or gadget. Based from past experience, most of the time it did came from one! In the example shown down below, the link to that malicious blog is generated after the blogger behind the ‘infected’ blog added it to his or her existing list of blogs in the Blog List gadget.

Thankfully, this is pretty easy to resolve. The blogger behind the ‘infected’ blog can simply edit his Blog List gadget from his or her Blogger Layout dashboard and remove the blog that is causing the ‘infection’ from the list. Everything should be fine after the removal has been made and the new list saved back to Blogger!

There you are! Nasty malware removal for Blogger in just 5 minutes! :)

HomeBiss makes it to Alltop’s Most Popular Stories! 3 Important Lessons that you can learn from this shameless, blasphemous self-promotion!

2011-12-08T00:51:00.001+08:00

Alltop.com is a highly respected news aggregator in the World Wide Web. The site is also considered as the site with significant authority to the eyes of search engines such as Google, Bing and Yahoo. Google for an example gives Alltop a cool PageRank 7 and that speaks a lot about Alltop’s authority!

Gaining inclusion in Alltop’s respectable list of websites and blogs is no easy task! I should know because it took me months to convince Alltop that the HomeBiss blog is good enough for an inclusion. Gaining inclusion is one thing, maintaining the inclusion is another and it is even tougher! Alltop.com is very strict! If you failed to maintain the quality of your content, you just might find yourself kicked out of the list and have to start all over again!

Yesterday however was a sweet day for me. It was the day when I realized that one of my blog posts has made it to Alltop’s Most Popular Stories in Tech category! [The post was about placing Twitter Tweet button to each and every comment.]

Tada! :)

Despite this selfish self-promotion, there are some useful lessons that you can learn here and I’m going list them down, one by one.

Write quality content and it doesn’t have to be unique

Do you know what the problem is with most bloggers?

Most of them waste their time in researching for something unique to blog about. They spent hours researching and researching but the fact is they can easily use those wasted hours to write stuffs that are so much more easier to understand because it is right there in front of them all the time. If you are that kind of blogger, I urge you to open up your eyes and look at what those probloggers are doing today. They do not actually write unique content everyday! They actually write the same thing over and over again but with different perspective and approach each time.

You should do the same thing too. Stop wasting too much time on research. For crying out loud, you’re a blogger, not a niche marketer.

Take a look at my post that made it to Alltop’s Most Popular Stories for an example. Do you see something unique there?

No! The post is about those Twitter Tweet buttons and there are practically thousands other blog posts that are talking about similar buttons in the World Wide Web!

Do you see the point now?

Don’t be afraid to share your ideas, no matter how ridiculous it might sound

I’m sure that there were times when bloggers suddenly had that eureka moments but too afraid to share the ideas with the world simply because of their natural fears of rejection. They thought people would laugh and reject their ideas outright!

Too bad! They should have shared their ideas with the rest of the world! Who knows? It could be helpful for the whole humanity!

When I was about to publish my blog post (the one that made it to Alltop’s Most Popular Stories), I honestly heard some nasty whispers in my mind, telling me to abandon the whole idea because nobody has ever placed Twitter Tweet buttons in comments before. It took me a while to fight those inner demons before hitting the ‘Publish’ button and today I’m very glad that I did! :)

I just had my glorious eureka moment a few days ago but I didn’t let my negative thoughts ruin everything. I’m sure you will have your own eureka moments one day and when that day arrives, don’t let your fears ruin everything. If the idea is useful, don’t look back! Just share it with the world and hope for the best! :)

Write more helpful content and lesser commentaries

Most bloggers (including yours truly, one time ago) are spontaneous writers. They couldn’t help blogging about their likes, dislikes, fears and concerns about something. If something pisses off these kinds of bloggers, they would come up with their guns blazing and blog about their anger and frustrations. If something gets the attention of these kinds of bloggers, they would all get together and say some nice oohhs and aahhs on their blogs. ;)

We have seen such bloggers many times but the honest truth is we seldom follow such bloggers. We might go and read their blog posts when they’re still hot off the press but that’s it. The moment it gets cold, we’re gone!

Tell me honestly. Do you really want that kind of visitors on your blog?

If you want to see more frequent visitors, if you want to have more subscribers, you have no choice but to write more helpful content because helpful content is like a virus. It will spread and bring even more new visitors!

I know. It is indeed easier said than done! But if you are willing to spend more time writing helpful content on your blog, I strongly encourage you to read this excellent post written by Karol K of Online Business Design blog. At the end of the day, you should have some ideas of the helpful content that you should write more in the near future.

Good luck and thank you for reading! :)

Falling Snow Effect for Blogger? Heck, why not!?

2011-12-07T01:28:00.001+08:00

In the last few hours, I’ve been playing around with this fine JavaScript library (jQuery) that I discovered yesterday at github. It is supposed to help webmasters mimic the falling snow and I think we all know that we have plenty of such scripts on the internet.

However, the one I’m playing with right now is pretty special because the falling snow it creates is quite real and it can do something extra that most other scripts failed to illustrate. That is the accumulation or the piling up of snow!

How does it look like?

Oh no! I don’t think I can describe it with mere words! I suggest you take a quick peek at the demo site and see it for yourself. :)

Yeah. It looks pretty cool, isn’t it?

If you have a blog that is powered by Blogger, the following question might pop out of nowhere. Can we ‘install’ such an effect on Blogger-powered blogs?

The answer, yes!

How to create the falling snow effect for Blogger-powered blogs

Creating such an effect for Blogger-powered blogs is indeed possible and the steps to create it are also pretty easy but I would not recommend bloggers to push such effects to every blog post that they have.

Oh no!

Just choose the most recent post that contains your auspicious greetings and apply the effect on that post alone. I see no reasons why bloggers should apply it to all posts. If you agree with me, then follow the following instructions.

Open up your Blogger template and look for the ]]></b:skin> tag. Once found, place the following JavaScript library (jQuery) right AFTER it. If you already have it on your blog, then please ignore this particular instruction.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>

Now visit github, copy this file named snowfall.jquery.js, save it as a JavaScript file, host it somewhere reliable and place it’s link right AFTER the ]]></b:skin> tag . If you have no place to host it, then just use the following ready-made JavaScript file.

<b:if cond='data:blog.url == "URL of your blog post"'>
<script type="text/javascript" src="http://yourjavascript.com/3171122618/snowfall.jquery.js"></script>
</b:if>

Now we have come to the part I dislike most, explaining JavaScript snippets. There are several ways that you can use in the next step. So please decide how and where you want to see that effect on your blog post.

If you want to push the falling snow effect to the whole layout, then use the following JavaScript snippet. Place it right AFTER your HTML </body> tag (before the </html> tag).

<b:if cond='data:blog.url == "URL of your blog post"'>
<script type='text/javascript'>
$(document).ready(function(){
$(document).snowfall({flakeColor: '#FFFAFA', round : true, minSize: 3, maxSize:5, flakeCount : 100});
});
</script>
</b:if>

If you want to push the falling snow effect only to your blog header (like what I have done), take a close look at your Blogger template and identify the HTML <div> tag that contains or wraps around your blog header. Note down the value of its id or class attribute. Let’s say that it’s an id and the value is red-owl, then follow the following example and place it AFTER your HTML </body> tag (before the </html> tag).

<b:if cond='data:blog.url == "URL of your blog post"'>
<script type='text/javascript'>
$(document).ready(function(){
$('#red-owl').snowfall({flakeColor: '#FFFAFA', round : true, minSize: 3, maxSize:5, flakeCount : 100});
});
</script>
</b:if>

If yours is using class and value is red-compass, then replace the one marked in red (as shown earlier) with ‘.red-compass’.

Good! We’re almost done but there’s one more thing that I need to cover.

The Final Touch: The Snow Pileup!

Take note that this section is suitable only for those that have chosen to push the effect to the whole layout (the first example).

Now take another close look at your Blogger template and identity the HTML <div> tag that you want to use as the snow ‘collector’. Here’s a good suggestion, use the HTML <div> tag that contains or wraps around your horizontal navigation bar (hope you have one!).

Remember that id and class attribute thing I taught earlier? Apply the same understanding here and you should be okay.

Once you have identified the value for your id or class attribute, add the following new value to your JavaScript snippet. Replace the one marked in green with the value of your id or class attribute.

collection : 'value',

At the end of the day, your final JavaScript snippet will probably look something like the following (only for those applying the effect to the whole layout).

<b:if cond='data:blog.url == "URL of your blog post"'>
<script type='text/javascript'>
$(document).ready(function(){
$(document).snowfall({flakeColor: '#FFFAFA', round : true, minSize: 3, maxSize:5, flakeCount : 100, collection : '#description-holder'});
});
</script>
</b:if>

That’s it! Take a deep breath and save your Blogger template. Enjoy your new falling snow effect for Blogger-powered blog. :)

Twitter Tweet buttons for (each and every) Blogger comments! Don’t laugh! You might actually need them!

2011-12-05T23:51:00.001+08:00

After spending a few hours exploring the possibilities of placing Facebook Like and Twitter tweet buttons for each and every comment posted on Blogger-powered blogs, I have discovered that for the time being only Twitter Tweet button can give us such possibility.

Some of you might be laughing right now, thinking that such sharing button placement ideas are complete waste of time but let me deliver the verdict point blank. You are so dead wrong!

Why must we place Twitter Tweet buttons for each and every comment?

If bloggers are truly honest with themselves, they should be able to admit that from time to time they will encounter comments that are so great, so helpful and delighting that they take the attention away from their blog posts!

This is especially true for blogs that are discussing religion, politics, sociology, design and technology. Unfortunately, those great comments never get the attention they deserved! Many were completely forgotten and some were even removed by bloggers that are scared of losing something. I don’t know, perhaps they were scared of losing their reputations!

By placing Twitter Tweet buttons for each and every comment, bloggers have the opportunity to give something back to commenters. I call it giving commenters equal opportunity to be heard by people other than your blog's frequent visitors. :)

How does the Twitter Tweet button for each and every comment look like?

The Twitter Tweet button for each and every comment looks the same as the common Tweet button. It’s the way we organize the tweet that looks different and I’m still working on it. For the time being, this is what I have at the moment.

As you can see from the second screenshot, each and every tweet has the same look and feel. It will tweet the topic touched by the comment and it’s unique URL. Theoretically, we can also include the body of comment in the tweet itself by grabbing the attribute of Blogger’s <data:comment.body/> data tag but Twitter’s infamous ‘140’ limitation would not enable us to send big comments via Twitter. However, if you are really good with JavaScript, I’m sure you can find a way to ‘summarize’ big comments behind the scene and parse it to Twitter’s widget. ;)

Now, would you like place Twitter Tweet button on each and every comment on your Blogger-powered blog?

How to place Twitter Tweet button on each and every comment posted on Blogger-powered blogs

I have tried to use the iframe-based Tweet button for this matter but failed. It seems that only the JavaScript-based Tweet button would allow us to get the results we need. So, here goes!

Open up your Blogger template and look for HTML <dd class='comment-footer'> tag. Once found, you should be able to see the following HTML <span> tag right under it.

<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>

Right AFTER the HTML </span> tag (BEFORE HTML </dd> tag), add the following codes that include a customized JavaScript-based Tweet button that is using some unique data attributes.

<span>
<script charset='utf-8' src='//platform.twitter.com/widgets.js' type='text/javascript'/>
<a class='twitter-share-button' data-count='horizontal' expr:data-text='"likes this comment about " + data:post.title' expr:data-url='data:comment.url' href='https://twitter.com/share'>Tweet</a>
</span>

A web developer that goes by the name of XeBii Mj pointed out something important right after I had published this post. It is indeed a bad idea to include the link to Twitter’s JavaScript file in every comment. So please look for ]]></b:skin> in your Blogger template and add the following code right AFTER it.

<script charset='utf-8' src='//platform.twitter.com/widgets.js' type='text/javascript'/>

Write once, run anywhere! Thanks, XeBii Mj! :)

Pay attention to the ones marked in red and green. In the example shown up above, I have chosen the horizontal tweet button. If you wish to use the vertical Tweet button, just change the value marked in red to ‘vertical’. If you have a better idea for your tweet, change the ones marked in green with something of your own.

Now decide where you want to have that new Tweet button appear on each and every comment. If you want to follow my exact placement which is floated to the right-hand corner (on the same row with the comment’s time stamp), then add some Inline CSS to your HTML <span> tag. Yours will probably look something like the following.

<span style='padding: 0 5px 0 0; float: right;'>

At the end of this installation; your newly added codes should look something like the following.

<span style='padding: 0 5px 0 0; float: right;'>
<script charset='utf-8' src='//platform.twitter.com/widgets.js' type='text/javascript'/>
<a class='twitter-share-button' data-count='horizontal' expr:data-text='" likes this comment about " + data:post.title' expr:data-url='data:comment.url' href='https://twitter.com/share'>Tweet</a>
</span>

Congratulations! Now go and save your Blogger template! Enjoy your new Twitter tweet button for each and every comment posted on your Blogger-powered blog! :)

Pure CSS-based Emoticons for Blogger! Works with comments too!

2011-12-04T03:13:00.001+08:00

I was looking for a simple way or two that would enable me to turn dull-looking text-based emoticons into cool, ‘animated’ (kind of!) emoticons on my other blogs when I stumbled upon these marvelous jQuery-based scripts at github.

The scripts were originally created with WordPress in mind but after I made a few changes, bloggers that are using Blogger can now use them on their blogs and the changes that I have made would allow you to see some nice looking emoticons on your blog posts and comments too. The jQuery-based scripts are pretty cool since they are extremely fast and lightweight! This particular Blogger hack uses some common CSS3 properties to change text-based emoticons to something nice for a change. In another word, the new emoticons are pure CSS-based emoticons!

How do those pure CSS-based emoticons look like?

If you are not satisfied with the above screenshots, you may head over to my other blog and see those pure CSS-based emoticons for Blogger live.

How to turn text-based emoticons on your Blogger-powered blog (blog posts and comments) into pure CSS-based emoticons

Copy this JavaScript library (jQuery) called jquery-1.4.2.min.js, save it as a JavaScript file and host it somewhere reliable. Do the same thing for this jQuery plug-in called jquery.cssemoticons.min.js.

If you’re eager to see those pure CSS-based emoticons or you have no place to host those two JavaScript files mentioned earlier, just use the following ready-made JavaScript files and place them right BEFORE your HTML </head> tag in your Blogger template.

<script src='http://yourjavascript.com/11113125224/jquery-1.4.2.min.js' type='text/javascript'/>

<script src='http://yourjavascript.com/61721415211/cssemoticons-min.js' type='text/javascript'/>

Copy the following JavaScript code snippet and place it right after the above two JavaScript files. It is also must be placed right BEFORE your HTML </head> tag.

<script type='text/javascript'>
$(document).ready(function(){
$('.post-body, .comments').emoticonize({
//delay: 500,
//animate: true,
//exclude: 'pre, code, .no-emoticons'
});
})
</script>

Now look for ]]></b:skin> in your Blogger template. Once found, copy the following block of CSS rules and place it right BEFORE your ]]></b:skin> tag.

/*
* jQuery CSSEmoticons plugin 0.2.9
*
* Copyright (c) 2010 Steve Schwartz (JangoSteve)
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Date: Sun Oct 22 1:00:00 2010 -0500
*/

/* Basic styles for emoticons */
span.css-emoticon {
font-family: "Trebuchet MS"; /* seems to give the best and most consistent emoticon appearance */
font-size: 0.65em;
font-weight: bold;
color: #000000;
display: inline-block;
overflow: hidden;
vertical-align: middle;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
text-align: center;
padding: 0;
line-height: 1.34em;
-moz-border-radius: 1.54em;
-webkit-border-radius: 1.54em;
border-radius: 1.54em;
-moz-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
border: 1px solid rgba(0,0,0,0.25);
background-color: #ffcc00;
background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(0.41, rgb(255,204,0)),
color-stop(0.56, rgb(255,221,85)),
color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
center right,
rgb(255,204,0) 41%,
rgb(255,221,85) 56%,
rgb(255,238,170) 100%
);
-webkit-transition-property:color, background, transform;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
}

/* Styles for two-character emoticons that need more letter-spacing for proportionality */
span.css-emoticon.spaced-emoticon {
padding-left: 0.2em;
width: 1.34em;
letter-spacing: 0.2em;
}

/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
I think the width of the border may be throwing things off, because it's more noticable for small icons */
@media screen and (-webkit-min-device-pixel-ratio:0) {
span.css-emoticon.spaced-emoticon {
width: 1.4em;
}
}

/* Styles for emoticons that need to have smaller characters to fit inside the circle */
span.css-emoticon.small-emoticon {
font-size: 0.55em;
width: 1.82em;
height: 1.82em;
line-height: 1.72em;
-moz-border-radius: 1.82em;
-webkit-border-radius: 1.82em;
border-radius: 1.82em;
}

span.css-emoticon.small-emoticon.spaced-emoticon {
padding-left: 0;
width: 1.82em;
letter-spacing: 0.1em;
}

/* Styles for additional colors */
span.css-emoticon.red-emoticon {
background-color: #eb0542;
background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(0.41, rgb(235,5,66)),
color-stop(0.56, rgb(235,38,90)),
color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
center right,
rgb(235,5,66) 41%,
rgb(235,38,90) 56%,
rgb(250,55,110) 100%
);
}

span.css-emoticon.pink-emoticon {
background-color: #ff8fd4;
background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(0.41, rgb(255,143,212)),
color-stop(0.56, rgb(255,153,216)),
color-stop(1, rgb(255,173,225))
);
background-image: -moz-linear-gradient(
center right,
rgb(255,143,212) 41%,
rgb(255,153,216) 56%,
rgb(255,173,225) 100%
);
}

/* styles for emoticons that need no rotation, like O_o */
span.css-emoticon.no-rotate {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
font-size: 0.45em;
width: 2.2em;
height: 2.2em;
line-height: 1.9em;
-moz-border-radius: 2.2em;
-webkit-border-radius: 2.2em;
border-radius: 2.2em;
background-image: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(0.41, rgb(255,204,0)),
color-stop(0.56, rgb(255,221,85)),
color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(255,204,0) 41%,
rgb(255,221,85) 56%,
rgb(255,238,170) 100%
);
}

span.css-emoticon.no-rotate.red-emoticon {
background-image: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(0.41, rgb(235,5,66)),
color-stop(0.56, rgb(235,38,90)),
color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(235,5,66) 41%,
rgb(235,38,90) 56%,
rgb(250,55,110) 100%
);
}

span.css-emoticon.no-rotate.pink-emoticon {
background-image: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(0.41, rgb(255,143,212)),
color-stop(0.56, rgb(255,153,216)),
color-stop(1, rgb(255,173,225))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(255,143,212) 41%,
rgb(255,153,216) 56%,
rgb(255,173,225) 100%
);
}

/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
span.css-emoticon.counter-rotated {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.41, rgb(255,204,0)),
color-stop(0.56, rgb(255,221,85)),
color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
center left,
rgb(255,204,0) 41%,
rgb(255,221,85) 56%,
rgb(255,238,170) 100%
);
}

span.css-emoticon.counter-rotated.red-emoticon {
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.41, rgb(235,5,66)),
color-stop(0.56, rgb(235,38,90)),
color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
center left,
rgb(235,5,66) 41%,
rgb(235,38,90) 56%,
rgb(250,55,110) 100%
);
}

span.css-emoticon.counter-rotated.pink-emoticon {
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.41, rgb(255,143,212)),
color-stop(0.56, rgb(255,153,216)),
color-stop(1, rgb(255,173,225))
);
background-image: -moz-linear-gradient(
center left,
rgb(255,143,212) 41%,
rgb(255,153,216) 56%,
rgb(255,173,225) 100%
);
}

/* Styles for animated states */
span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover {
/* font-size: inherit;
font-weight: inherit;
vertical-align: inherit;
line-height: inherit;
font-family: inherit; */
letter-spacing: inherit;
color: inherit;
overflow: visible;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
background: none;
background-image: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-color: transparent;
}

span.css-emoticon.nintendo-controller {
font-size: .8em;
height: 1.2em;
line-height: 1em;
width: 2.7em;
vertical-align: bottom;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(116,121,140)),
color-stop(0.55, rgb(165,170,189))
);
background: -moz-linear-gradient(
center bottom,
rgb(116,121,140) 9%,
rgb(165,170,189) 55%
);
}

Yeah, yeah… I know what you are thinking. It’s a huge block of CSS rules alright! If you are not comfortable with placing such huge block of CSS rules in your Blogger template, you can always save the whole block as an external CSS style sheet. If that is your decision, then host it somewhere reliable but don’t forget to place your HTML <link> tag anywhere WITHIN your <head> and </head> tags. It should probably look something like the one shown down below.

<link href="URL to your external CSS style sheet" rel="stylesheet" type="text/css" />

That’s it! You’re all good to go! Now go and save your Blogger template. Enjoy your new pure CSS-based emoticons! :)

Making traffic-getting, attention-grabbing Twitter tweets for Blogger

2011-12-02T00:33:00.001+08:00

Let me start by asking you the following question; how do you define the perfect traffic-getting, attention-grabbing tweets for blog posts on Twitter?

It’s a tricky question alright but I do believe that tweets that only mention blog post titles are no longer getting as much attention as they were one time ago. The reason is pretty darn obvious. There are too many tweets that mention blog post titles on Twitter! The worst part is almost everybody send out tweets containing blog post titles at least a few times a day on Twitter! When everybody is doing it, it becomes extremely difficult to deliver tweets that can grab the attention of other Twitter users and generate significant traffic for your blog!

So, do you want to know how I define the perfect traffic-getting, attention-grabbing tweets?

My definition of the perfect traffic-getting, attention-grabbing tweets

First and foremost, it must be different than the common blog post title-mentioning tweets. Most Twitter users are getting sick and tired of seeing such tweets!

Each tweet must be unique!

Each tweet must look natural, not automatically generated by those JavaScript-based or iframe-based Tweet buttons!

Alright! Now that you know how I define the perfect traffic-getting, attention-grabbing tweets on Twitter, let’s honestly ask ourselves the following questions; How are we going to let visitors send out tweets that look natural and unique from our blogs? Do we have such a tool?

I had been pondering upon the questions for days and yesterday I found something interesting. It is indeed possible to urge our blog visitors to send out natural and unique tweets about our blog posts. It is possible and there’s more than one way (I’ll show you one later!) to do it!

Making traffic-getting, attention-grabbing Twitter tweets for Blogger

Take a look at this fine tweeting tool for an example. Just click on the blue-colored (Twitter bird in the center) button on my floating social sharing buttons widget. The widget should be on your left-hand side.

Now, take a look the window that just slid into view at the bottom of your screen on the right-hand side. With some ingenuity, you can actually customize the interface to include some nice, catchy tweeting instructions for your blog visitors. Mine is still in the works but I’m getting there. :)

Updated on December 10th 2011:

I have removed the widget from blog but you can still install it on yours by following the given instructions down below.

Now, that’s what I call a great traffic-getting, attention-grabbing tweet maker! Would you like to install it on your Blogger-powered blog?

How to install the traffic-getting, attention-grabbing tweet maker on Blogger-powered blogs

It’s really easy to install the traffic-getting, attention-grabbing Twitter tweet maker on Blogger-powered blogs. Just follow the instructions down below.

Open up your Blogger template and look for ]]></b:skin>. Once found, place the following JavaScript library (jQuery) right after it. You may ignore this instruction if you already have one in your Blogger template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>

Now you may place the following codes right under your JavaScript library (the one you placed before, remember?).

<script src='http://tweet-it.st.pongsocket.com/tweet-it.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".tweet-this").tweetIt({
hostedBlog: false,
header: 'Catchy Title',
intro: 'Instructions',
});
})
</script>

Pay attention to the ones marked in red. Those are properties that you can customize on your own. The ‘header’ determines the title of the interface. So please put something catchy there. The ‘intro’ determines the instructions that your blog visitors will see on the interface once they click on the Tweet button. Put something concise there. You may even beg for a tweet if you want to, I really don’t care. :)

Now go and look for some cool Twitter tweet icons or buttons. Twitter offers a few and you may use such icons if you like.

Once you have found the perfect Twitter tweet icon or button, host it somewhere reliable and wrap it with something like the following example. Don’t forget that important HTML ‘tweet-this’ class attribute. Without it, your traffic-getting, attention-grabbing tweet maker simply would not work!

<a href='javascript://'><img class='tweet-this' src='URL of your Twitter tweet icon or button'/></a>

That’s it! Now go and save your Blogger template.

More customization options!

Now that you have the new traffic-getting, attention-grabbing tweet maker working fine on your Blogger-powered blog, it is time to explore even more customization possibilities. Yes, more customization options for you!

Head over to pongsocket.com and get all the details. Good luck! :)

New, Improved Mashable-like Floating Social Sharing Buttons Widget for Blogger

2011-11-26T01:21:00.001+08:00

I have grown tired of trying to find ways to solve horizontal alignment problems that normally come with the use of share buttons such as Facebook and Twitter. Finally made the decision to remove everything from my blogs and adopt something that was originally inspired by Mashable.

Yes, Mashable still has it on their blog and I have been using something similar for about 3 days now. So far, so good! I can even say that the newly-installed floating social sharing buttons widget (you can see it on the left-had side) has brought some pleasant results! Better traffic and engagement in just a few days!

There are several good tutorials out there that can show bloggers that are using Blogger the necessary steps in installing similar widgets. I have chosen the one made by Raju, the marvelous blogger behind simplebloggertutorials.com since his instructions are crystal clear! Well done, Raju!

On the 3rd day, I added a few new additions to my floating social sharing buttons widget and today I thought it would be great if I share the new, improved version with other bloggers.

What does the new floating social sharing buttons widget has to offer?

The new, improved widget offers bloggers that are using Blogger 4 new buttons that I believe have never been used by other bloggers on their own floating widgets before. The first two new buttons nicely integrated Blogger’s BlogThis and Email Post to a Friend tools, the other two are integrated with FeedBurner, giving visitors super quick ways to subscribe to our RSS feeds either by email or via FeedBurner.

How to install the new, improved floating social sharing buttons widget to Blogger

Open up your Blogger template and look for your <data:post.body/> data tag. Once found, add the following codes BEFORE your <data:post.body/> data tag:

<div id='putra-lrt'>
<div class='station-gp'><center><g:plusone annotation='none'/></center></div>
<div class='station-fb'><center><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=box_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21&appId=200228286715128"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/></center></div>
<div class='station-tw'><center><iframe allowtransparency='true' expr:src='"http://platform.twitter.com/widgets/tweet_button.html?text=" + data:blog.pageName + "&count=vertical"' frameborder='0' scrolling='no' style='width:55px; height:65px;'/></center></div>
<div class='station-bt'><center><a expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, "_blank", "height=270,width=475"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><img src='https://lh3.googleusercontent.com/-HBXKAVgGrIU/Ts9xvNXLZ7I/AAAAAAAAClg/ihlzMDXeuxc/s800/blogger.png' width='48'/></a></center></div>
<div class='station-ma'><center><a expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><img src='https://lh3.googleusercontent.com/-8WObLbyTjQg/Ts55ccr_5bI/AAAAAAAAClY/a8sFQWByjKI/s800/email.png' width='40'/></a></center></div>
<div class='station-er'><center><a href='Your Email Subscription Link' target='_blank' title='Subscribe by Email'><img src='https://lh4.googleusercontent.com/-_qC2GtV6Blk/Ts5QhRu8iTI/AAAAAAAAClI/R6KVBe2MxJs/s800/email-rss-.png' width='42'/></a></center></div>
<div class='station-rs'><center><a href='Your RSS Feed via FeedBurner URL' target='_blank' title='Subscribe via FeedBurner'><img src='https://lh4.googleusercontent.com/-L6DQyypFoPI/Ts5wkyV-c9I/AAAAAAAAClQ/GxToFjXcHuY/s800/rss.png' width='50'/></a></center></div>
</div>

Please pay attention to the ones colored in green and red. The one colored in red must be replaced with your FeedBurner (hope you’re using one!) URL while the one colored in green must be replaced with your FeedBurner-powered email subscription link. You can find it from your feed’s dashboard at FeedBurner, right under ‘Publicize’. Look for something that looks like this:

http://feedburner.google.com/fb/a/mailverify?uri=HomeBiss

I must also mention that the Twitter Tweet button that your visitors will be using after this installation is the iframe-based Tweet button, not the nasty JavaScript-based one. Please follow the link that I have provided earlier for more details about the iframe-based Tweet button.

Now look for ]]></b:skin> in your Blogger template and place the following code (jQuery) right after it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>

Once a while or maybe at least once a month, visit Google Libraries API and look for jQuery updates. The current version is 1.7.0 and it might get revised or updated after some time.

Now you may place the following JavaScript code. Place the whole block BEFORE your HTML </head> tag.

<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $("#putra-lrt"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 20;

$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>

At last! We’re down to the last step and this one should be familiar for most bloggers. Just copy the whole block of CSS rules and place them in your embedded style sheet (aka Blogger template).

#putra-lrt {
float: left;
margin-left: -86px;
background: #f2f2f2;
position: absolute;
-moz-border-radius: 5px;
border-radius: 5px;
}
#putra-lrt .station-rs {
float: left;
clear: left;
padding: 5px 5px 0px 7px;
}
#putra-lrt .station-er {
float: left;
clear: left;
padding: 5px 5px 0px 11px;
}
#putra-lrt .station-ma {
float: left;
clear: left;
padding: 5px 5px 0px 12px;
}
#putra-lrt .station-bt {
float: left;
clear: left;
padding: 5px 5px 0px 8px;
}
#putra-lrt .station-tw {
float: left;
clear: left;
padding: 5px;
}
#putra-lrt .station-fb {
float: left;
clear: left;
padding: 5px 5px 0px 10px;
}
#putra-lrt .station-gp {
float: left;
clear: left;
padding: 5px 5px 0px 13px;
}

Pay attention to the one colored in orange. You may have to play with the value over there to get the perfect fit for your floating social sharing buttons widget on your blog. Fine tune until you’re happy with it! :)

Problems?

If you run into any problems in installing the new, improved floating social sharing buttons widget, please let me know as soon as possible via comment down below.

Iframe-based Twitter Tweet Button for Blogger. The better alternative!

2011-11-22T02:50:00.001+08:00

Twitter has provided webmasters and bloggers 3 different ways of adding their Tweet button to websites and blogs.

The most popular and undoubtedly the easiest way for everyone is by using JavaScript but what many didn’t know is that it has the tendency to create a lot of problems to those using it. I have seen problems caused by JavaScript-based Tweet button too many times already and I’m getting pretty sick and tired of it.

Why?

The ONE and ONLY reason why I do not like JavaScript-based Tweet buttons

Do you see those awful spikes (the one near the end of August and the other somewhere in the middle of September) in the above screenshot (taken straight from my current Site performance chart)?

Those spikes were caused by JavaScript-based Tweet buttons and in that few instances, JavaScript-based Tweet buttons have brought down this blog to a near standstill! Twitter’s fail whales are not something to be taken lightly, folks!

I knew something had to be done and I begun to look for a better alternative. I found one last month and used it for a while on my niche sites. So far it has performed flawlessly and yesterday I begun testing it on this blog. So far, so good and I think I should share the better alternative with bloggers that are also using Blogger like me.

Iframe-based Tweet button for Blogger

According to Twitter, there are 7 unique Twitter query strings that we can use to customize our Tweet buttons but in the example down below, I’m only using 3 since they are what we need most of the time. The query strings are count, via and text. Take a look at the following example:

<iframe allowtransparency='true' expr:src='"http://platform.twitter.com/widgets/tweet_button.html?text=" + data:blog.pageName + "&via=homebiss&count=horizontal"' frameborder='0' scrolling='no' style='width:110px; height:20px;'/>

The ones purposely colored in red are attributes that you can change on your own. Note the use of Blogger’s data:blog.pageName data tag in the above example. You may also use Blogger’s data:post.title data tag if you want to but it won’t make any difference since the purpose is more or less the same. It is to help Twitter grab the title of the blog post that is about to be tweeted!

Please bear in mind that the example shown above is best used on blog posts alone. Each blog is unique and other bloggers may need to wrap the above codes with some Blogger conditional tags in order to show iframe-based Tweet buttons only on blog posts. Here’s an example:

<b:if cond='data:blog.pageType == "item"'>
<iframe allowtransparency='true' expr:src='"http://platform.twitter.com/widgets/tweet_button.html?text=" + data:blog.pageName + "&via=homebiss&count=horizontal"' frameborder='0' scrolling='no' style='width:110px; height:20px;'/>
</b:if>

How does each tweet looks like after using iframe-based Tweet buttons?

No worries! Each tweet will look exactly the same as before!

Conclusion

It is indeed possible to use iframe-based Tweet buttons on Blogger-powered blogs and I strongly feel that iframe-based Tweet buttons are better than JavaScript-based Tweet buttons but that is only my 2 cents worth of opinion. :)

Facebook-friendly Open Graph Tags for Blogger blogs. Passes Debugger Tool!

2011-11-18T02:33:00.001+08:00

I was getting bored in the last few hours. My boredom led me to a Facebook Like button on one of my blog posts. I fooled around with it for a while when I discovered something quite horrendous. It seems that Facebook has changed something (I don’t know what!) and my blog post no longer look decent on Facebook!

Since it look quite awful, I have no choice but to take another close look at my existing Open Graph tags and run a few more tests with Facebook Debugger tool. I couldn’t exactly remember the last I time did this boring job but I think it was probably 5 to 6 months ago. While I’m at it, I might as well document my best practices in placing Open Graph tags on my Blogger-powered blog. One day it might become useful for other bloggers!

Alright! Before I go ahead, take a look at how I plan everything to make sure that my blog and my blog posts look the way I want them to be on Facebook.

Open Graph Tags for Blogger: The Evil, Diabolical Plan!

Before somebody shares my blog with his Facebook friends, I want to make sure that people will be able to see my silly logo (125x125) as the default thumbnail on Facebook. I also want to make sure that Facebook users would be able to know what my blog is all about and this could only be achieved by telling Facebook to grab and use the existing description of my blog.

I’m almost there!

Before somebody shares either one of my blog posts with his Facebook friends, I want to make sure that people would be able to see those images that I have embedded in my blog posts as the default thumbnails on Facebook. I don’t want them to see my silly logo! I also have to make sure that Facebook would not grab and use the existing description of my blog. Instead of using my blog description, I want Facebook to take a few snips of my blog posts and turn them into some kind of post teasers.

Yes! My evil plan is done! Let’s see how I make it happen!

Open Graph Tags for Blogger: The Evil Codes!

<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta content='URL to About Me page' property='article:author'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<meta content='URL to logo' property='og:image'/>
<meta content='Blog Description' property='og:description'/>
</b:if>

<meta expr:content='"en_US"' property='og:locale'/>
<meta content='Facebook App ID' property='fb:app_id'/>
<meta content='Facebook Admin' property='fb:admins'/>

Note: If you want to use the above codes, replace those colored in red with your custom attributes and the whole block of codes should be placed within the <head> and </head> section in your Blogger template.

Open Graph Tags for Blogger: The Evil Tricks!

In order to force Facebook to take snips of my blog posts and turn them into post teasers (descriptions), I have deliberately use HTML p (paragraph) tags in all of my blog posts. I also have to make sure that there are no other HTML p tags located before my Blog Posts widget in my Blogger template. While I’m at it, I might as well mention that placing meta description tag in the body of a Blogger template is wrong!

In order to make it easier for Facebook to identify and use images that I have embedded in my blog posts as the default thumbnails, I have deliberately replaced images that once were embedded with HTML img tags, placed before the Blog Posts widget with CSS background-image properties.

Open Graph Tags for Blogger: The Results!

Excellent!

Nice!

Wonderful!

Mission accomplished!

Examples of Schema.org microdata markups for Blogger comments. Passes Rich Snippets Testing Tool!

2011-11-17T02:33:00.001+08:00

In the last few weeks, I have proven two things here on this blog:

I have proven that it is entirely possible to markup Blogger blogs with Schema.org microdata markups and
I have also proven that precise implementations of Schema.org microdata markups can also help Blogger blogs look so much better in Google+.

Today I want you to explore the possibility of marking up Blogger comments with Schema.org microdata. At the end of this post, we would see whether or not such Schema.org microdata markups can ‘pass’ Google’s Rich Snippets Testing Tool. Let’s start our exploration with Schema.org and see what kind of properties that we can possibly use for our Blogger comments.

Schema.org microdata that we possibly can use for Blogger comments

Before we go ahead, come and think for a while. Where can we find our Blogger comments?

Blogger comments exist only (if there are any) in our blog posts. If we take a look at Schema.org documentations, we can see that Schema.org has provided one particular itemscope element specifically for blog posts. It has many properties and one of them is specifically for comments.

Can we use it? Perhaps but I certainly believe that we can use it.

itemprop="comment"

Schema.org describes the above microdata attribute as ‘Comments, typically from users’. The description is a little vague but I believe we should annotate each comment with the above Schema.org microdata. The big question is, where exactly?

After taking a few more good looks at Schema.org documentations, I can see that there is one Schema.org itemscope element that we can use and it comes with a few more Schema.org itemtype attributes.

itemscope itemtype="http://schema.org/UserComments"

In another word, we have to find the HTML tag that wraps around all of our Blogger comment elements and annotate it with the above Schema.org microdata.

itemprop="commentText"

Schema.org describes the above microdata attribute as ‘The text of the UserComment’. In another word, we have to locate the body of each comment and annotate it with the above Schema.org microdata.

itemprop="commentTime"

Schema.org describes the above microdata attribute as ‘The time at which the UserComment was made’. I think it is self-explanatory. We just have to find the timestamp of each comment and annotate it with the above Schema.org microdata.

itemprop="creator"

Schema.org describes the above microdata attribute as ‘The creator/author of this CreativeWork or UserComments’. Pretty easy to understand, isn’t it? Just identify the author of each comment and annotate it with the above Schema.org microdata.

itemprop="discusses"

Schema.org describes the above microdata attribute as something that ‘Specifies the CreativeWork associated with the UserComment’. I think this is pretty easy to understand too. Comments normally contain conversations about each blog post and the title of each blog post matters a lot to our visitors. It makes sense to populate the above attribute with title of the blog post.

itemprop="replyToUrl"

Schema.org describes the above microdata attribute as ‘The URL at which a reply may be posted to the specified UserComment’. Oh boy! Blogger comments do not actually have unique reply-to URLs unless if you’re using that one particular Blogger hack. However, each comment posted on Blogger does have a unique URL and I believe we can annotate each URL with the above Schema.org microdata.

Alright! Let’s say that I have marked up my Blogger comments with all of the above Schema.org microdata. How do they look like on Google’s Rich Snippet Testing Tool? Does it ‘pass’ the test?

Yes!

Blogger comments marked up with Schema.org. Passes Rich Snippets Testing Tool!

Conclusion

It is entirely possible to mark up Blogger comments with Schema.org microdata. It takes some time to understand everything but eventually you should be able to mark up your own Blogger blog with Schema.org microdata. I don’t mind showing you how to do it in the near future but I will only do so after I had received some genuine requests from you folks. No requests, no how-to. :)

Schema.org microdata markup suggestions for Melvin’s TheEmoLab Blogger-powered blog

2011-11-15T00:10:00.001+08:00

In the last few weeks, I have been documenting personal successes and failures in annotating my blog with Schema.org microdata markups. I believe I have achieved plenty but I’m not yet ready to share everything here on this blog due to certain unmentionable reasons.

Some visitors to this blog had taken notice of my experimentations and one of them had even asked me to look into his Blogger template and make some Schema.org microdata markup suggestions to improve the appearance of his blog on Google+.

That one person is also a blogger and his name is Melvin Corney. He is the blogger behind TheEmoLab and his blog was launched in May 14th 2010. On November 12th 2011, he left a comment on one of my blog posts:

I have little knowledge of this can i also send my template to you and can you tell me where and how to place the tags so that google+ and searches grab the right content thanks in advanced.

I told him yes and that also means that I have to find the time to help him despite my busy schedule. Alright, before I do that, let’s see how his blog appears in +Snippet.

Irrelevant thumbnails in +Snippet (Google+)

As you can see from the above screenshot, Melvin’s blog appeared pretty nice on +Snippet and I believe it will look pretty good in Google+ too. +Snippet nicely grabbed the logo of his blog after receiving the heads up from Melvin’s Open Graph protocol meta tag (as shown down below).

<meta content='http://i51.tinypic.com/2bvgap.jpg' property='og:image'/>

+Snippet also nicely described Melvin’s blog, obviously after reading Melvin’s HTML meta tag description (as shown down below).

<meta content='Source For Almost Every Hack. Get awesome computer tips and tricks, How To tutorials, and best hacking tutorials.' name='Description'/>

So far, so good! But I believe all hell breaks loose after somebody shared either one of his blog posts in Google+. As you can see from the following screenshot, +Snippet ‘fails’ to provide a good description for his blog post and it also fails to identify the image that has been embedded with Melvin’s blog post as the best, related thumbnail image. Instead of the one that has been embedded in the blog post, +Snippet keeps on using the logo of Melvin’s blog and that is not at all related with the blog post that is about to be shared on Google+.

If you are also facing the same problem like what Melvin is facing here today, please do not get angry with +Snippet. :)

Alright, let’s see if I have any suggestions for Melvin.

Schema.org microdata markup suggestions for Melvin’s TheEmoLab blog

IMPORTANT: Please make backup copies of your Blogger template before proceeding!

I would suggest Melvin to wrap his Open Graph protocol og:image tag with the following Blogger conditional tags. This is to make sure that +Snippet will use his blog’s logo only when somebody wants to share his blog (home page) in Google+. By applying such conditional tags, the logo will also appear not only as the first thumbnail but also the best, related thumbnail image for his blog.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='http://i51.tinypic.com/2bvgap.jpg' property='og:image'/>
</b:if>

After taking a closer look at Melvin’s Blogger template, I also discovered that there are two images that have been embedded and tagged with HTML img tags before the Blogger Blog Posts widget. I would suggest Melvin (the same suggestion I gave to Mohammad) to merge both images with his favorite image editor (I use GIMP!) and embed it in his HTML div ‘header-inner’ tag with CSS background-image property, not HTML img tag. Here’s an example but Melvin has to do some more tweakings to find the right fit for his new, merged header image.

#header-inner {
background-image: url("URL to new, merged header image");
}

Once completed, +Snippet should have no problems whatsoever in grabbing and identifying images that have been embedded in his blog posts as the best, relevant thumbnails.

Now comes the ‘controversial’ part and I leave this entirely up to Melvin. He can follow my suggestions if he wants to but he got to understand that Schema.org’s ‘description’ property theoretically should be unique, not be populated with snippets of the main content (blog posts). However, to make life easier for Melvin and also to make things look nice on +Snippet and of course in Google+; it makes sense to use snippets as descriptions.

Melvin, this is entirely up to you!

I would suggest Melvin to find the following lines of codes in his Blogger template first.

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/>
</div>

Once found, annotate a few lines with some Schema.org microdata markups. Examples are shown down below.

<div itemscope='' itemtype='http://schema.org/BlogPosting' class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<span itemprop='description'><data:post.body/></span>
<div style='clear: both;'/>
</div>

Once completed, save everything and see how it looks like in +Snippet. If all goes well, your blog and your blog posts will look nice and proper whenever people share them in Google+.

Good luck! :)

How to remove/get rid of irrelevant +Snippet thumbnails before everybody can see them in Google+

2011-11-12T02:14:00.001+08:00

I just learned that one of the pains bloggers that are using Blogger have to face in Google+ is the appearance of irrelevant thumbnails after readers had share their blog posts in Google+. Thumbnail images that have nothing to do with the shared blog posts were ‘chosen’ by +Snippet and some bloggers find it quite embarrassing, I suppose.

Do not blame +Snippet

Now, there’s one thing that we have remember here. +Snippet scans for images from each link that is about to be added to Google+ and those images could have come from places other than your main content. If you have images in your header or sidebars, +Snippet will grab those too! It is really up to the sharer to choose the best thumbnail. In another word, we as bloggers really have no control over the matter but with a little trick, we can somehow make sure that the first thumbnail sharers see on their +Snippet previews is related with our blog posts. More about this later! :)

Alright, let’s go back to the problem in hand. I got to know about it after reading a comment left by a well known blogger. His name is Mohammad Mustafa Ahmedzai and he’s the blogger behind mybloggertricks.com. In his comment, he said:

Everything is working fine except for the thumbnail image. The image that is being fetched is the header background for all posts and I tried hard to solve it but failed each time. Would highly appreciate if you could guide me on how to do solve the image issue now. :)

Alright, let’s see what his problem is all about.

Irrelevant thumbnails in +Snippet (Google+)

As you can see from the above screenshot, the image of Mohammad’s blog header is the first thumbnail that had been grabbed by +Snippet. There were others of course but one has to click on the < or > button to see or select other thumbnails. Tell me, how many of you actually browse through the selection of thumbnails that +Snippet has prepared for you? :)

I totally understand why Mohammad wanted to get rid of that header thumbnail. It might have significant relevance with his blog but is not at all related with his blog posts.

Alright, let’s learn how to remove of those irrelevant thumbnails.

How to remove irrelevant +Snippet thumbnails before they get into Google+

To the best of my knowledge, there are several ways to do this. Let’s go for the one that offers the quickest fix.

I would advise Mohammad to take a good look at his Blogger template and identify all images that have been tagged with the HTML img tag. You don’t have to identify everything, just those that have been placed before the Blogger Blog Posts widget. The widget should look something like the one shown down below:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

This is important because we want to make sure that the first image that +Snippet grabs for our blog posts is the one (or more) contained in our blog posts (our Blogger Blog Posts widgets) themselves. Once identified, find some other ways (use CSS!) to embed those images on your blog. Do not use HTML img tag to embed images on your blog.

I have taken a look at Mohammad’s Blogger template and found that the image of his header is the first HTML img tag element in his blog. Thus, it is not surprising to see his header image being identified as the first thumbnail in +Snippet.

<div id='header-inner'>
<a href='http://www.mybloggertricks.com/' style='display: block'>
<img alt='My Blogger Tricks' height='150px; ' id='Header1_headerimg' src='http://1.bp.blogspot.com/-ktCR4Ak43xE/TdHjKPaxToI/AAAAAAAADbA/SP-P5AlUQqQ/s1600/myblogger-tricks-copy2-copy.jpg' style='display: block' width='483px; '/>
</a>
</div>

I would suggest Mohammad to remove his HTML img tag and replace it with CSS background-image property. It should look something like this:

background-image: url('URL of your header image');

The above steps if followed correctly will help +Snippet. Yes, replacing images that had been tagged with HTML img tags with CSS background-image properties (before your Blogger Blog Post widget) will help +Snippet create thumbnails from images that come together with your blog posts. You can even replace images that had been tagged with HTML img tags, embedded after the Blogger Blog Posts widget if you like but I don’t think it is necessary. Just change those embedded before your Blogger Blog Posts widget.

Conclusion

Anything can be fixed! :) Like what I had said earlier, there are several other ways to get rid or remove irrelevant thumbnails from appearing in +Snippet and ending up in Google+. I will only document those other steps if there are requests to do so. In the meantime, please use the above solution to solve your problems. :)

Schema.org microdata markups for Blogger blogs! Passes +Snippet and Rich Snippets Testing Tool!

2011-11-10T03:22:00.000+08:00

In my last post, I have shown you some examples of Schema.org microdata markups that bloggers can apply on their Blogger-powered blogs to give Google +Snippet the right kind of information about our blogs and blog posts before they are shared with other people in Google+.

I don’t know about you but I’m very particular about how tools such as +Snippet grab information about our blogs and blog posts. I want to see everything looks good for other people because first appearance matters the most for most people. It would be bad if your blog’s first appearance fails you over and over again in Google+!

Alright, before I show you a few more examples of Schema.org microdata markups that you can apply on your Blogger-powered blog, let’s take a closer look at Google +Snippet.

Things you should know before you markup your blog with Schema.org microdata

I think you all know by now that Google strongly recommend bloggers and webmasters to ‘use’ +Snippet with Schema.org microdata markups. Now, I want you to focus on what Google had said:

If the page is annotated with schema.org microdata, the +Snippet will use the name, image, and description properties found on any schema.org type.

I don’t have any problems with Schema.org’s name and image properties. It’s the use of Schema.org’s description property that perplexes me the most. I have gone through Schema.org’s documentations and is able to conclude that the description property is more or less similar with HTML meta description tag property. In another word, the property should be unique!

Now, you tell me. How in the world are we going to make descriptions of our blog posts unique?

Blogger certainly didn’t give us any tools to make unique descriptions of our blog posts. There is a trick (as shown in my last post) that you can use to do that but I don’t like the idea of making each meta tag description manually, one by one.

What I’m trying to tell you right now is that we could not exactly give Schema.org microdata description property the correct value. The examples that I’m going to show you tomorrow would only grab snippets of our blog posts and tag them as descriptions for +Snippet.

You should also know that you cannot put Schema.org microdata markups in Blogger widget and section tags. Examples as shown down below:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

For some unknown reasons, Blogger completely purge markups from such tags after you have saved your Blogger template. So please don’t waste your time trying.

As for today, let’s see some more examples of Schema.org microdata markups that you can apply on your Blogger blog to give Google +Snippet that much needed assistance in ‘understanding’ your blog better.

Schema.org microdata markups that can help Google +Snippet grab the actual description of your blog

First and foremost, you have to tell not only +Snippet but also search engines that your blog’s home page URL points to a blog. Right after <body>, markup the first HTML tag with [itemscope='' itemtype='http://schema.org/Blog']. You also have to wrap your chosen HTML tag with some Blogger conditional tags. An example is shown down below:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='tab' itemscope='' itemtype='http://schema.org/Blog'>
</div>
<b:else/>
<div id='tab'>
</div>
</b:if>

Now you may go and look for <data:description/> in your Blogger template. Once found, wrap it with an HTML span tag marked up with [itemprop='description']. You also have to wrap everything with some Blogger conditional tags, similar with the ones shown earlier. An example is shown down below:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<span itemprop='description'><data:description/></span>
<b:else/>
<span><data:description/></span>
</b:if>

Don’t forget to save your Blogger template when everything is done. The above examples will produce something similar with the following screenshot whenever people share your blog in Google+.

What’s next?

Certainly not today! Tomorrow I will show you how to markup your blog posts with Schema.org microdata so that you can achieve the following results (as shown in the following screenshot) whenever somebody shares any one of your blog posts in Google+.

Stay tuned!

How to markup Blogger blogs with Schema.org microdata. Examples provided. Put an end to your +Snippet headaches!

2011-11-08T03:05:00.000+08:00

Google introduced the +1 button to the whole world on March 28th 2011 and today we can see it almost everywhere in the internet.

Even bloggers that are using Blogger have +1 buttons on their blogs but unfortunately many didn’t know how to make +1-friendly annotations or markups on their blogs. Correct +1 annotations and markups are important because they can help visitors properly populate their +Snippet previews and of course share our URLs with the right kind of information. If you are wondering what +Snippet is all about, it is what visitors and their friends see after they had shared our blogs or any one of our blog posts through Google+.

According to Google, their +Snippets grab details about the target URLs from one of the following ways:

Schema.org microdata markups
Open Graph protocol markups
Meta ‘title’ and ‘description’ tags
Wild guess – Believe me, you don’t want to know this!

For bloggers that using Blogger and have the habit to manually populate their meta tags with tricks such as the one shown down below, their +Snippets would look pretty nice on Google+. But what if you have hundreds and thousands of blog posts? Would you be willing to manually describe each meta tag, one by one?

<b:if cond='data:blog.url == "http://wtf.blogspot.com/2011/08/blabla.html"'>
<meta content='wtf, wtf' name='keywords'/>
<meta content='wtf wtf wtf' name='description'/>
</b:if>

Some smart (but clueless) bloggers had also placed Open Graph protocol markups on their blogs but by placing Open Graph metatags within the <body> and </body> section, they unknowingly put their blogs in jeopardy!

To be honest, so far I haven’t seen any good, practical examples of Schema.org microdata usages on blogs powered by Blogger. Today, I’m going to show you some examples that you can use on your Blogger-powered blog but before we do that, let’s see how Google’s +Snippet ‘handles’ some popular Blogger-powered blogs.

+Snippets of popular Blogger-powered blogs

Let’s take a look Amanda’s incredibly popular bloggerbuster blog. What happens after somebody shares her blog via Google+?

As you can see from the above screenshot, her blog’s +Snippet looks pretty nice. +Snippet is able to properly describe her blog but unfortunately Amanda’s thumbnail is just too small. It doesn’t look great at all! Wouldn’t you agree?

Now, what happens after someone shares one of her blog posts via Google+?

OMG! Everything is messed up! I can see that +Snippet has grabbed, combined her blog post’s title, posting date and label as part of the target URL’s description. Even the total of comments her blog post’s had garnered is there in the description! This is bad, really, really bad.

What have I learned after observing the above +Snippet examples?

Simple! I had no choice but to annotate some elements in my Blogger template with Schema.org microdata markups!

I don’t want people to see ‘garbage’ (like the ones you see in Amanda’s example) when they share my blog posts in Google+. Right now, I strongly feel that the perfect description that I should give to +Snippet are short snippets of my blog posts. No dates! No labels and certainly no comment numbers! Just plain snippets!

I also have to force +Snippet to grab the description of my blog when somebody shares my blog in Google+. In another word, people would immediately know what my blog is all about when they stumble upon it in Google+.

I also have to make sure that +Snippet grabs the ‘right’ image when somebody shares my blog in Google+. I do not have the ‘right’ image right now but I know that I have to create some kind of a logo (125x125), put it somewhere on my blog and mark it up with some Schema.org microdata.

Now that I know what I want, here is your chance to learn how to markup your Blogger blog with Schema.org microdata.

How to markup Blogger blogs with Schema.org microdata

In order to let search engines know that my home page URL leads them to a Blogger blog, I have to annotate the first element (right after <body>) in my Blogger template with Schema.org microdata markups (colored in red). To be safe, I also apply some Blogger conditional tags to the same element. Here’s one example.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='tab' itemscope='' itemtype='http://schema.org/Blog'>
</div>
<b:else/>
<div id='tab'>
</div>
</b:if>

In order to force +Snippet to grab the description of my blog when somebody shares my blog in Google+, I have to rely upon some Blogger conditional tags and markup my blog’s description with Schema.org microdata. An example is shown down below, pay attention to the Schema.org microdata markups, purposely colored in red.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<p class='description'><span itemprop='description'><data:description/></span></p>
<b:else/>
<p class='description'><span><data:description/></span></p>
</b:if>

In order to force +Snippet to use my blog’s logo when somebody shares my blog in Google+, I also have to rely upon some clever use of Blogger conditional tags and of course mark it up with Schema.org microdata. Here’s the example.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<p align='center'><img alt='HomeBiss logo' border='0' itemprop='image' src='https://lh4.googleusercontent.com/-9BHI0U8OHs8/TrbrVH39-fI/AAAAAAAACgs/NvcO8i8DJu0/s125/HB-logo.jpg' title='HomeBiss logo' width='75'/></p>
<b:else/>
<p align='center'><img alt='HomeBiss logo' border='0' src='https://lh4.googleusercontent.com/-9BHI0U8OHs8/TrbrVH39-fI/AAAAAAAACgs/NvcO8i8DJu0/s125/HB-logo.jpg' title='HomeBiss logo' width='75'/></p>
</b:if>

In order to let search engines know that my blog posts are indeed blog posts, I have to annotate the element that wraps or contains my individual blog post with Schema.org microdata markups. Mine is an HTML <div> tag and I think this is consistent with other Blogger-powered blogs too. Here’s what I had done to mine.

<div id='main-wrapper' itemscope='' itemtype='http://schema.org/BlogPosting'>

In order to force +Snippet to grab snippets of my blog posts whenever somebody shares one of my blog posts in Google+, I also have no other choice but to rely upon Blogger conditional tags once again. The example is shown down below and don’t forget to take a look at my Schema.org microdata markups.

<b:if cond='data:blog.pageType != "item"'>
<span><p><data:post.snippet/></p></span>
<b:else/>
<span><p itemprop='description'><data:post.snippet/></p></span>
<b:if>

What happens after I markup some elements in my Blogger template with Schema.org microdata?

Here is what people would see if they want to share my blog in Google+.

Here is what people would see if they want to share any one of my blog posts in Google+.

Nice, isn’t it!? Just the way I want it to be! :)

Conclusion

It is entirely possible to markup Blogger blogs with Schema.org microdata. It is also entirely possible to give +Snippet the right kind of information and that will help bloggers that are using Blogger look so much better in Google+.

The examples that I have shown you just now are just the tip of the iceberg. We have so much more to explore and I strongly encourage bloggers to study every single documentation Schema.org has on their website. Don’t forget that Schema.org is an initiative put together by today’s top search engines!

Solution: Blogger’s OpenID ‘Your OpenID credentials could not be verified’ error – Solved!

2011-11-02T00:37:00.000+08:00

One of the biggest frustrations that we bloggers that are using Blogger have to endure is undoubtedly Blogger’s failure to let us conveniently leave comments on other Blogger blogs with OpenID. We are forced to use some other identities such as Blogger/Google Profile or Name/URL and we are not happy with that at all! :(

Even though Blogger has provided such facility for bloggers and blog visitors, it no longer works as it should be and the problem has been around for so many months (perhaps years!) now. Some bloggers have filed numerous complaints at the Blogger Help forum but so far nothing has been done to help us solve this particular problem.

Alright, let’s take a closer look at this problem now.

How does the ‘Your OpenID credentials could not be verified’ error look like?

You should see something similar with the one shown in the following screenshot after attempting to leave a comment on a Blogger blog via OpenID.

Alright, now that you know how the error looks like, let’s go and learn how to solve it (hopefully) indefinitely.

How to solve Blogger’s OpenID ‘Your OpenID credentials could not be verified’ error?

In order to solve this (hopefully) once and for all, you need to have at least one of the following requirements:

Your own Google Profile account or
Your own Google+ account.

Note: Your Google Profile account would no longer be accessible if you have joined the Google+ bandwagon like I do.

Go to your Blogger Dashboard, choose the blog that you want to destroy with this hack (just kidding!), hit ‘Template’ and click on the ‘Edit HTML’ button. You need access to your whole template to get this work for you, so please enable the ‘Expand Widget Templates’ option.

Locate your <head> and </head> section and place the following codes that contain a few HTML <link> rel attributes anywhere in between <head> and </head>:

<link rel='openid2.provider' href='https://www.google.com/accounts/o8/ud?source=profiles' />
<link rel='openid2.local_id' href='URL to your Google Profile OR Google+' />
<link rel='openid.server' href='http://www.blogger.com/openid-server.g' />

Kindly replace the part colored in red with the URL link to your Google Profile or your Google+ account. Once completed, hit the ‘Save template’ button and wait for a few minutes.

Yes, you have to wait for a while before you can start testing the hack shown earlier. I waited for about 10 minutes before testing the above hack and let me show you the result. Take a look at the following screenshot. :)

All hail Andrew!

Many thank to Andrew Arnott, the guy that ‘helped’ me on this particular solution. Yes… Back in March 9th 2010, Andrew shared a tip to help bloggers ‘upgrade’ Blogger’s kind of obsolete OpenID Endpoint address with the help of Google Profile. What Andrew didn’t know today is that his methods could also be used to help bloggers fix the Blogger’s OpenID ‘Your OpenID credentials could not be verified’ error!

Andrew’s tip didn’t work for me right away since I have embraced Google+ and no longer has my old Google Profile account. I had to run some tests of my own and then I discovered that we can also use our Google+ accounts to connect with OpenID. Thus, solving the irritating Blogger’s OpenID ‘Your OpenID credentials could not be verified’ error at the same time!

Thank you, Andrew! :)

Completely disable and remove Blogger Navbar with body HTML comment tag!?

2011-11-01T01:00:00.000+08:00

Of all Blogger hacks out there, this is surely one of the strangest of all. You will see why in a few minutes.

The purpose of this particular Blogger hack is pretty darn simple. It is to help bloggers using Blogger to completely get rid of the ugly looking Blogger Navbar that normally can be seen at the top of each Blogger blog.

But before we take a look at that strange Blogger hack, you should first know that most bloggers that are using Blogger simply hid the Blogger Navbar from view. This is accomplished with some simple CSS rules. Let’s see how they do this on their blogs.

How to use CSS rules to hide Blogger Navbar from view

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

As you can see, the above CSS rules force browsers to hide the Blogger Navbar from view. When bloggers apply the above CSS rules on their blogs, the Blogger Navbar is still there on their blogs but you won’t be able to see it because it has been purposely hidden.

Personally, I do not like this particular trick at all. This is because search engines such as Google frown upon the use of hidden elements and by hiding the Blogger Navbar from view; one might just put his or her blog in jeopardy.

If your site is perceived to contain hidden text and links that are deceptive in intent, your site may be removed from the Google index, and will not appear in search results pages. [Via Google Webmaster]

That is why I prefer the other, little known Blogger hack that can do so much more than just hiding the Blogger Navbar from view. Let’s take a closer look at this Blogger hack and soon you will understand why I deem it strange.

How to completely disable and remove Blogger Navbar

I first saw this particular hack at bloggerplugins.org. According to bloggerplugins, you have to place an innocent looking HTML comment tag somewhere in your Blogger template.

In the Template Code find <body> and just above that add the following Code.

Strange, isn’t it? Hang on! It’s about to get even weirder!

What happens after we add  HTML comment tag?

As if by magic, the whole Blogger Navbar will disappear for good! Totally! If you opt for this particular Blogger hack, you no longer need those CSS rules (as shown earlier)!

As what had been warned by bloggerplugins, we will no longer see those convenient Blogger Quick Edit iconic links on our blogs. Under normal circumstances, we would be able see those iconic links on our blogs after logging into Blogger.

Here’s the weird part that I have been talking about earlier where many have failed to see. If you take a look at your live page source and go back to where you put that HTML comment tag on your Blogger template, you will see the following line:

Very strange! It doesn’t make any sense at all! The  HTML comment tag is just a God damn comment tag. It is supposed to tell browsers to ignore the <body> tag! I don’t know how but the  HTML comment tag is able to ‘trap’ and completely disable the Blogger Navbar!

How the hell did it do that?

Can we completely disable and remove the Blogger Navbar?

This has been discussed ever since the time of Mahatma Gandhi and it took an employee of Blogger to settle this once and for all. According to the Blogger employee:

While we don't recommend or support the removal of the Blogger navbar, there is nothing in our Terms of Service that explicitly mandate its use.

I'll let you draw your own conclusions from there ;-) [Via Blogger Help Group]

Hey bloggers, do you get the message?

Great & Embarrassing Siri on iPhone 4S moments! No wonder Siri is one of the iPhone 4S’s top complaints!

2011-10-25T01:19:00.001+08:00

I have loads of disgust feelings inside me right now. Relax… It has nothing to do with the brand new iPhone 4S. These disgust feelings have something to do with an event that has taken place in my part of the world last Saturday but rest assured, I’m not here to talk about it.

Luckily for me, the iPhone 4S is here to ‘cheer’ me up! So, let’s take a closer look at Siri on iPhone 4S and see if we could somehow understand why it made it to my fine list of top iPhone 4S complaints and problems.

Siri on iPhone 4S: Killer Descriptions

Your wish is its command.

Siri on iPhone 4S lets you use your voice to send messages, schedule meetings, place phone calls, and more. Ask Siri to do things just by talking the way you talk. Siri understands what you say, knows what you mean, and even talks back.

Wow! The way Apple puts it, the whole thing sounds magical! Yeah, Siri on the iPhone 4S does sounds like a live, talking genie! Very interesting… Let’s take a closer look at this Siri the Genie!

Embarrassing Siri on iPhone 4S moments

I couldn’t help quoting a comment left by a YouTube user after he or she had watched the above video. Here it is;

obviously kids with high pitched voices are not the target group : P

But seriously, we should ask ourselves why Siri on iPhone 4S seems to have problems understanding questions and following instructions in public surroundings where ambient noises are prevalent. Here's one disturbing question that I can think off right now. Does the iPhone 4S’s microphone has sufficient noise-canceling features?

Hmm… To my understanding, Siri on iPhone 4S requires internet access to work properly. Theoretically, it should also work on 2G networks such as GPRS and EDGE but I suppose it won’t work at all if your network is clogged, sluggish or unreliable. Bad news for iPhone 4S users here in my part of the world! It would be a major heartbreaker if we could only use Siri on iPhone 4S via Wi-Fi only!

I sure had fun watching the above video, probably shot by a group of Indians. As you can see, one guy there had a very hard time trying to make Siri on iPhone 4S work for him. His problem doesn’t shock me at all. I already knew in advance that Siri on iPhone 4S currently only support the following languages; English (Australia), English (UK), English (US), German and French. Even though that Indian guy spoke English, his instructions and questions have heavy Indian accents. Siri on iPhone 4S is bound to have problems when you speak English with a foreign tongue. Just get rid of that accent, speak in plain English and Siri on iPhone 4S should work well for you.

Great Siri on iPhone 4S moments

Not bad! Not bad at all!

Wow! I'm impressed!

I don’t know what to say, I’m kind of speechless right now.

What can we conclude from all this?

Siri on iPhone 4S has some problems alright but it has great potentials and let’s not forget that it is still in Beta. In another word, quirks and bugs like the ones you have seen in the first few videos are acceptable if you look at it from the developers point of view. So far the iPhone 4S looks promising and I even approve of its 8-megapixel camera. It’s nowhere near my Nokia N8 but it sure can take some great photos and videos.

iPhone 4S vs iPhone 4: Examples & Comparisons of Photos and Videos taken with both iPhones

2011-10-21T02:27:00.000+08:00

I sure had fun, lots of fun yesterday digging into the comments left by some furious iPhone 4S users at Apple Support Communities.

If you had read my last post about the iPhone 4S, you would have known by now that the brand new iPhone 4S has some major problems and complaints. Let’s thrash out those negative iPhone 4S thoughts for a while and follow me to see if there’s anything great about the iPhone 4S’s brand new, enhanced 8-megapixel camera.

The iPhone 4S 8-megapixel camera: Killer (?) Description

The you-can’t-believe-it’s-on-a-phone camera.

With 8 megapixels and all-new optics, this just might be the best camera ever on a mobile phone. It just might be the only camera you’ll ever need. And if you think that’s amazing, wait until you see your photos.

More about the iPhone 4S 8-megapixel camera

According to Apple, the iPhone 4S has brand new optics that can play with lighting better than the old iPhone 4. If this is true, the iPhone 4S should of course be able to take better pictures than the iPhone 4. Heck, even Apple said that pictures taken with the new iPhone 4S have 60% more pixels than pictures taken with the old iPhone 4.

For someone that has a smartphone armed with a 12-megapixel camera, the iPhone 4S doesn’t really rock my world but I would like to see how that HDR functionality turns out for the iPhone 4S users. Let’s take a look at some photos taken with the iPhone 4S.

Examples of photos taken with iPhone 4S

The above photo is taken by a Flickr user in London a few days ago but his photo is very grainy! What the heck happened?

Not bad, not bad at all… But the background is kind of out of focus.

This one is not bad either but my Nokia N8 can do better. Nokia N8 with its 12-megapixel camera is in a class of its own so we can’t really compare them two.

So, we have seen a few photos, how about videos?

Examples of videos taken with iPhone 4S

I suggest you watch the above video in full 720p. I don’t know about you but I can see some bad artifacts and a little bit of fuzziness on some parts of the video. It’s not perfect but it is acceptable by my personal standard.

But hey, I’m just an idiot… So let’s go and see what the ‘experts’ have found after they compare photos and videos taken with the new iPhone 4S and the old iPhone 4.

iPhone 4 vs iPhone 4S: Comparisons of photos and videos taken with both iPhones

On second thought, I don’t think we should listen to the experts. The iPhone 4S is not a professional photography equipment. It’s just a God damn smartphone that comes with a camera and any Tom, Dick and Harry should be able to pick it up and shoot some photos. If we let the experts do the talking, we will end up scratching our heads, trying to figure out their geeky, out-of-the-world technical tweaks and jargons. I hate that. For that matter, I will just share some simple ready-made comparisons that won’t make you confused at the end of the day.

Warner Crocker for an example; has taken a few photos and prepared some quick comparisons for us and this is his simple conclusion:

“I’m liking the camera improvements quite a bit on the iPhone 4S.”

Quite a bit!? Doesn’t sound great, isn’t it? Well, at least there are some improvements.

GSMArena has also prepared a nice video to help us compare videos taken with both iPhones. Sit back and watch the following video in full screen. Don’t worry; you will hear no technical jargons from this video. Here’s a little hint before you start watching the video. Pay attention to the teeny-weeny details such as car plate numbers. You should see the difference there.

Not bad, huh?

What can we conclude from all this?

The iPhone 4S 8-megapixel camera can indeed take better pictures and videos than the iPhone 4’s 5-megapixel camera. But the improvements are not that much. So please do not expect greatness from the iPhone 4S’s camera. If you really want to see some photography greatness, go and get a Nikon. ;)

Motorola DROID RAZR! I want one! I want one! I want this Android phone!

2011-10-19T03:48:00.002+08:00

I’m in love! All over again!

Nope, not with a new girl! But with Verizon Wireless’s and Motorola’s latest Android-powered smartphone that comes with a pretty cool name too. Let’s take a quick look at DROID RAZR, currently the world’s thinnest 4G LTE smartphone!

Motorola DROID RAZR: Killer Features

It is powered by Gingerbread or Android 2.3.5 and has some kind of a water-repellant, nano-coating technology that protects both the outside and the inside of the phone from daily liquid spills.

DROID RAZR is super slim, 7.1mm thin! But don’t let such slimness fool you. Inside that amazing thinness lays a powerful dual-core 1.2 GHz processor and Verizon Wireless believes it would help users surf the web 10 times faster than 3G!

It also has a super-wide, 4.3” Super AMOLED Advanced display screen and Verizon Wireless claims that DROID RAZR’s display screen will show us more colors than we normally see on LCD HDTVs!

DROID RAZR comes with 1GB of RAM and just like the new iPhone 4S, it also has an 8-megapixel camera that is capable of shooting HD videos in 1080p. That 8-megapixel camera is at the back of the phone. DROID RAZR also has a front-facing HD camera to help facilitate communication (video chats, video calls etc) between you and friends.

DROID RAZR is pretty generous! Each phone comes with 16GB of onboard memory and there’s another 16GB waiting for you in the form of a pre-installed microSD card.

Last but not least, DROID RAZR comes with Bluetooth 4 support. Yup, just like the iPhone 4S.

Motorola DROID RAZR: How does it look like?

Motorola DROID RAZR: Hands-on videos

Blogger adds ‘Recommend this on Google’ to Google+ share button. I’m not happy! :(

2011-10-18T15:18:00.000+08:00

Here’s something new that bloggers using Blogger should take note.

Previously, the Google+ share button would only display its well recognized icon on Blogger blogs but as of today, Blogger has added ‘Recommend this on Google’ to the right-hand side of the icon. Thus making the Google+ share button the widest share button compared to other share buttons that have been prepared by Blogger.

Why did Blogger add ‘Recommend this on Google’?

I suspect Blogger somehow realizes that not many visitors of Blogger blogs know what the Google+ share button is for. By adding that long ‘Recommend this on Google’, Blogger is probably hoping that more and more visitors will use that Google+ share button.

Things to consider after the addition of ‘Recommend this on Google’ to Blogger’s Google+ share button

Some bloggers love to customize the look and feel of their Blogger share buttons. Some bloggers like me even integrate other 3rd-party share buttons with the existing Blogger share buttons. If you have done something like what I have done, then you have no choice but to do a little more tweaking to your customized share buttons. In my case, the addition of ‘Recommend this on Google’ to the right-hand side of the Google+ share button breaks (totally!) the visual presentation of my customized share buttons. The sudden width expansion of the new Google+ share button forced my Google+ share button to skip a line and pops out below other share buttons.

Damn! :(

Win free prizes (iPad 2s, iPod touch, Nintendo, PS3, HDTVs etc) every week! Anybody can win!

2011-10-18T01:28:00.000+08:00

Whoa! I think I can describe this as the mother of all contests or the mother of all giveaways! If you’re interested in winning cool, free prizes every single week, you better read this real quick.

Imagine having a great site offering everybody living anywhere in the world the chance to win cool, free stuffs such as popular, much sought after gadgets and home electrical appliances every single week! You can stop imagining now since we already have such a site today!

Let me introduce you folks to MyFREEbeez!

MyFREEbeez: Killer Description

The free site where you earn points for doing simple tasks and you are entered to win a prize every week!

MyFREEBeez: How does it work?

What can we win from MyFREEBeez weekly giveaways?

Possibly anything you can imagine! So far MyFREEBeez has given out free cool gadgets such as the iPad 2, iPod touch, Kindle, gaming consoles such as Nintendo 3DS, PS3 and many, many more. Last week’s lucky winner even won a cool 40” HDTV!

I’m in Antarctica, can I enter and win?

Hell, yeah! However, MyFREEBeez clearly said that anybody living anywhere in the world can enter and win but some international locations may pose some shipping problems. It has something to do with taxes but the good news is MyFREEBeez is willing to sit down with international winners and discuss the options with them.

Great! Keep up the good job, MyFREEBeez!

Samsung Solid-state Drive (SSD) 830 Series is super, lightning fast! Twice faster than SSD 470 Series!

2011-10-17T02:53:00.001+08:00

It looks like Samsung is all set to release a new line of super fast Solid-state drives and the Korean-based company says that their new SSDs (830 Series) will be twice faster than their current SSD 470 Series Solid-state drives!

Samsung SSD 830 Series: How fast are the new SSD 830 Series Solid-state drives compared to SSD 470 Series?

Samsung’s SSD 470 Series has a few models, ranging from 64GB, 128GB and 256GB Solid-state drives. Their read speeds are already pretty amazing since 470 Series Solid-state drives have read speeds up to 250MB/s! Their write speed are just as amazing, from anywhere between 170MB/s to 220MB/s! Bloody fast, I’m telling ya!

Such speeds are unimaginable and Samsung’s new 830 Series Solid-state drives will be twice faster than their current 470 Series Solid-state drives! So please, don’t even try to imagine how fast Samsung’s new 830 Series Solid-state drives are!

I would not be surprised if Samsung is able to build the world’s fastest PC with their new 830 Series Solid-state drives. For your information, Samsung has already built one a few years ago!

Cuptakes iPhone, iPod touch cases that compliment Cuptakes wallpapers! Holy Girly!

2011-10-15T03:15:00.000+08:00

Oh my! Here’s something awesome for the ladies and it has something to do with the immensely popular Cuptakes iPhone, iPod touch app.

But before that, I want to mention that the Cuptakes iPhone, iPod touch app is very popular among the young girls and of course the ladies. The Cuptakes iPhone app provides users with some girly (I’m telling ya, very girly!) designed themes and wallpapers to help users give their precious iPhones and iPods that girly look and feel.

Let me show you what that girly look and feel is all about.

Cuptakes iPhone, iPod touch App: How does it look like?

Now, here’s the awesome news for Cuptakes users. Now you have Cuptakes iPhone, iPod touch cases that you can use to compliment your Cuptakes themes and wallpapers! Yes, those Cuptakes iPhone, iPod touch cases were just released today!

Cuptakes iPhone, iPod touch cases: How do they look like?

Shocking! Simply shocking! One particular Cuptakes iPhone case actually has the same dots and colors with my favorite boxer short. OMG! How did it get there!?

Cuptakes iPhone, iPod touch cases: Where can we get them?

Cuptakes iPhone, iPod touch cases are currently priced at $34.99 each and you can buy one or two directly from the Cuptakes Store.

How to get iPhone 4S for free. Yes, you can!

2011-10-15T01:08:00.001+08:00

Here’s something interesting for my Twitter followers tweeting from the US.

PhoneDoctors has given you guys some tips to not only save money but also get that brand new iPhone 4S for free! Yes, it is possible. That’s what they said.

To be honest, I’m not at all interested in the brand new iPhone 4S. I was expecting more from the new iPhone, just like everyone else but Apple has created a strong cult (sometimes creepy and when that happens, you guys really freak me out!) over there and I can see that Apple fans have put their iPhone 4S disappointments behind them.

Alright, here are the tips.

Free iPhone 4S

According to PhoneDoctors, you should call up or visit your local AT&T, Sprint or Verizon store and go for upgrades. You may either add or totally renew your existing contract. When you’re done with that, quickly visit PhoneDoctors online and send (via mail) your old iPhone to PhoneDoctors. Upon receipt, PhoneDoctors will take a look at your old iPhone, do some evaluations and provide you with their offer price within 72 hours.

Here’s what Alex Iser (CEO) has to say about their buy-back program:

Our competitive smart phone buy back program is a great way to upgrade to the latest iPhone 4S practically for free, without the risk and hassles of trying to sell your old phone on the open market.

Alex Iser also said that you can get better offers from them if your old iPhone is in good shape and comes with its original accessories (box etc). Sounds great! Check it out, folks!

10 Amazing, Beautiful Tributes to Steve Jobs

2011-10-14T02:59:00.000+08:00

Steve Jobs, died on October 5th 2011.

It has been a week now and I have seen many amazing, beautiful tributes made by fans and critics from all over the world. I have made one quick Steve Jobs tribute myself last week but it was nothing compared to what you’re about to see here today.

Believe me, you don’t have to go far to see those amazing and beautiful tributes for Steve Jobs. We have plenty on Flickr itself and the numbers keep rising every each day. I had a tough time going through each one and I may have missed some great ones but I hope you will enjoy what I have prepared for you today.

1. Tribute to Steve Jobs: Flickr user rvnix

2. Tribute to Steve Jobs: Flickr user LilyAnna*

3. Tribute to Steve Jobs: Flickr user futuresticboy

4. Tribute to Steve Jobs: Flickr user Divergent Learner

5. Tribute to Steve Jobs: Flickr user Liyin the Designer-in-Pajamas

6. Tribute to Steve Jobs: Flickr user norsted

7. Tribute to Steve Jobs: Flickr user jmsmytaste

8. Tribute to Steve Jobs: Flickr user aeleazer1 BACK!!!(Busy, behind, catching up!!!)

9. Tribute to Steve Jobs: Flickr user SONG.TSE

10. Tribute to Steve Jobs: Flickr user Performita

Nokia releases Nokia 603! Comes with Facebook, Twitter & Angry Birds apps… Angry Birds!

2011-10-13T17:45:00.000+08:00

Hmm… Nokia has something new today. Let’s take a quick look at Nokia 603, the latest Nokia Symbian Belle smartphone.

Nokia describes their new Nokia 603 as a colorful, affordable, no compromise smartphone. In another word, it is not a high end model. Probably suitable for those looking for an affordable smartphone that comes with some basic features that will not dent their wallets.

Nokia 603: Features

Nokia 603 has a generous, scratch-resistant 3.5” touchscreen (with ClearBlack display that reduces reflection). It also comes with some cool home screens; a built-in, social network-friendly photo and video editor and it runs on a fast 1GHz processor. Facebook and Twitter users should be happy because Nokia 603 comes preloaded with Facebook and Twitter apps. Nokia 603 users will also get free Nokia maps and turn-by-turn voice navigation assistance for their whole lifetime. Nokia 603 also supports NFC (Near Field Communication), allowing users to connect with other NFC-enabled devices and share some fun together. Oh yeah, Nokia 603 also has Angry Birds.

Not bad! Not bad at all!

Nokia 603: How does it look like?

New ArtRage for iPad 1.3 goes cheap, $1.99 instead of $6.99! Offer ends October 18th!

2011-10-13T04:18:00.003+08:00

Of all apps for the iPad, there’s one in particular that gets the most oohs and aahs from me. Nope, it’s not that God damn Angry Birds gaming app, it’s a digital painting app called ArtRage. Yeah, painting is an old hobby of mine. I no longer have the time to play with brushes but I still appreciate beautiful art very much and ArtRage can sure produce some great paintings. You can see it in a moment.

Talking about ArtRage, I might as well mention that the digital painting app now comes in version 1.3. The new version provides support for direct Facebook, deviantArt and Dropbox uploads. The new version also allows users to export their digital paintings into PNG or JPG and send them via email or share them with friends via iTunes.

It is normally priced at $6.99 but for a very limited time, iPad users can get ArtRage for the iPad for only $1.99. The sudden price reduction has something to do with ArtRage’s current involvement with New York Comic Con.

ArtRage for the iPad: Killer Descriptions

…ArtRage is designed to work like real painting and drawing tools, it can be used by almost anyone. The interface is easy to understand and gets out of the way while you are working so you don't spend time configuring panels when you could be painting. What's more, it's fun to smoosh around paint and blend colors right there on the canvas.

ArtRage for the iPad: How does it work and how does it look like?

Examples of digital paintings made with ArtRage

Now I can seriously say that I want an iPad but… But… [Hands on my face]

Free 42” Vizio LCD HDTV up for grabs! Giveaway ends October 31st 2011!

2011-10-13T01:31:00.000+08:00

Great! Another giveaway!

This one offers a cool 42” Vizio LCD HDTV to the lucky winner and you do not have to pay anything to enter. I’m not so sure about the exact model of the Vizio LCD HDTV since there are a few models that fit the description given by people behind the giveaway.

It doesn’t matter since the winner will be getting a brand new 42” Vizio LCD HDTV that comes with an impressive 120Hz refresh rate and 1080p resolution for free! What more can you ask for?

How to enter and win that 42” Vizio LCD HDTV

You won’t believe it!? You only have fill up a form to stand a chance to win that cool LCD HDTV! Visit Land Rover Merritt Island and complete the form before October 31st 2011 and the winner will be picked on the following day.

Good luck!

Good news for Sprint users! TeleNav GPS Navigator 7.1 Android App comes with custom car icons at $0.99 each! Huh, WTF!?

2011-10-12T03:53:00.000+08:00

I think you all know by now that I’m an absolute sucker for GIS, Mapping and Navigation apps. Give me one such new app and I will play around with it all day long. Here’s one from TeleNav. It is a newly improved navigation app and I would love to get my hands on it but unfortunately it is not available for people in my part of the world.

But Android users on Sprint get the chance to use it since it is now available on their network. Check out TeleNav GPS Navigator 7.1. According to TeleNav, their new GPS Navigator 7.1 is:

…a more personalized GPS search, traffic and navigation experience for Android devices. TeleNav GPS Navigator 7.1 goes beyond turn-by-turn directions to help on-the-go people run errands around town, explore and discover what's around them, or commute to work or school.

TeleNav has some nice features that are not available on some other navigation apps and its new Home Screen gets my approval. Nicely done!

TeleNav GPS Navigator 7.1 Android App: How does it work and how does it look like?

The major con, the big, big major con

It’s their new custom car icons. Sure, those custom car icons look nice but why do they have to put price tags ($0.99 each) to such icons? Come on… Even Garmin (the world renowned leader in GPS technology) offers custom icons for free!

Free Smokin’ Hot Clear-Coat-protected iPod Touch 8GB up for grabs!

2011-10-11T01:03:00.002+08:00

Here’s a giveaway worth mentioning today and I have to say that there are not that many around these days. Go ahead and blame it on the global economy, the doom and gloom future outlook freaks out even the freakiest gadget geeks!

This particular giveaway offers an 8GB iPod Touch as the winning prize but it is no ordinary iPod. It is very special for it comes with custom-engineered Clear-Coat coating, made from urethane film making the iPod virtually scratch-proof.

More about Clear-Coat

I’m not so sure about the rules but I think anybody living anywhere in the world can enter!

How to enter and win that smokin’ hot Clear-Cut-protected 8GB iPod Touch

In case you missed the instructions, here are what you have to do to win that smokin’ iPod Touch:

Tweet something nice about Clear-Coat on Twitter and include @clearcoat in your tweet.
Visit tentblogger.com, leave a comment and don’t forget to mention your tweet. Should be something like this:

Better hurry, folks! Contest ends in a few days time and the winner will be announced on October 14th!

4shared releases Upload Folder and new 4shared Sync App for the iPhone and iPad. Oh my… Poor Malay music stars… Poor Malay girls…

2011-10-10T04:18:00.001+08:00

I’m hopping mad (just like Namewee), getting restless and feels the need to blog about something. Since I was just using 4shared a few minutes ago, I might as well mention a few interesting news about 4shared.

But before I do that, allow me to send a few shockwaves that should shock the local authorities, parents and kids working or living here on my part of the world. You see, 4shared is very popular here and I just want folks out there to know what some naughty 4shared users are doing with the fine service that 4shared has provided for users all over the world.

Alright, some screenshots should suffice.

Free MP3s shared by 4shared users?

Beautiful Malay girls?

If you’re not happy with it, don’t blame or get angry with 4shared. Blame the users.

4shared Killer Description

4shared is a Ukraine, Kiev based file storage and sharing service. It was founded in 2005. 4shared is one of the world’s largest file-hosting sites, with 317 terabytes of file transfer every day and handling up to eleven million users simultaneously.

4shared Killer Features

The service allows users to upload files of up to 500 MB each for free and 5GB GB for paid subscribers. Account size after activating account get 15GB of free space.

Alright, let’s see what 4shared has released recently.

New: 4shared ‘Upload Folder’

Instead of tediously uploading one file after another, 4shared now lets users upload their whole folders! There is a limit though; each folder must not be more than 2GB in size. You can read more about this new feature from 4shared Blog.

New (Upgraded): 4shared Sync version 1.2.0 App (free!) for the iPhone and iPad

The new version now allows users to open and download stuffs with other apps, share stuffs with friends via Twitter, iTunes and manage their playlists in background mode. The app is free and you may download it from iTunes.

Credit Card Fraud & Identity Theft: 19.7 million students, 90.6 million credit cards and Parenting just got tougher!

2011-10-08T03:13:00.000+08:00

Here’s something that parents anywhere in the world should take a look at.

According to this piece of information that I have found, there are well over 19.7 million college and university students in the US, they have more than 90.6 million credit cards and every one of them is using the internet! Oh my! No wonder credit card fraud and identity theft are thriving like crazy over there!

The above information is just the tip of the iceberg for we have even more disturbing information about college and university students in the US. Let me give you some more:

More shocking facts and figures about American college and university students

54% of students over in the US have received sick images from perverts via MMS.
2 in 3 students over there have sent out sick messages via SMS.
10% of those sick messages were sent secretly, without the knowledge of the senders. What the heck is this? Text-hijacking?
47% of students over there are normally awakened by text messages. No wonder they look like zombies on Stickam!
93% of students over there also read text messages while driving! OMG!
While 91% of American parents believe in the threats posed by identity theft, only 21% of students give a damn about it! What a gap!
50% of students have actually shared private data among themselves and 9% of them had even shared passwords with their friends! Oh my, that’s crazy!

What can we do about Identity Theft?

I don’t know about credit cards but I do have some tips for those concerned about identity thieves lurking around social networks such as Twitter and Facebook. Just follow the link that I provided earlier.

Where can we get more information about Credit Card Fraud & Identity Theft?

Right here, thanks to CreditDonkey that has kindly provided us with a great infographic about internet safety. I have it all down below. Check it out, folks.

Americans prefer Android!? Oh my Apple…

2011-10-07T02:27:00.001+08:00

Barely 24 hours have passed since I gave Apple and iPhone 4S (their new toy) some quick, well deserved bashings when I suddenly heard news about Steve Jobs death late yesterday afternoon.

I really don’t know what to say. Kinda speechless… Tried to put some nice words here but I simply couldn’t! I guess it is true after all, some things are better off unsaid.

If you have been following my posts and Twitter tweets, I think you all know that I have certain dislikes for Apple. Don’t ask me why because I have my reasons but that doesn’t mean that I do not appreciate their innovations and contributions to the world of technology.

A little Tribute for Steve Jobs

I could never forget my Apple IIC, my first personal computer. Yes! Despite my disliking for Apple, my first PC was an Apple IIC! It was a present, given to me by my super rich uncle (now retired, he’s a former Major General in the Army) back in the late 80s. Back then he told me and my late parents that the world runs on microchips and we must learn to use computers. He said a lot of other things back then and he was right all along. Today, we could do little without our computers, laptops and gadgets!

Oh yes, I sure had lots of fun with my Apple IIC. I’m even smiling right now, thinking of the time when I spent practically hours playing ‘Where in the World is Carmen Sandiego’ on my Apple IIC. :)

Thank you, Steve. Thank you for all those fond memories!

Alright, let’s go down back to earth and crunch some numbers that would not go well with Apple.

August 2011: Americans prefer Android even more and more

"The Android operating system's share jumped to 43.7% in the three months ended August from 38.1% in May, according to comScore. Apple's share edged up to 27.3% from 26.6%, while RIM's dropped to 19.7% from 24.7%. Microsoft's (MSFT) slipped to 5.7% from 5.8%." Via investors.com

Yes, I’m afraid Apple is losing the war against Android. It looks bad for Apple and I don’t think bundling iOS 5 with iPhone 4S will help Apple either in the next few months.

I would have put in some more thoughts here but they’re nasty thoughts and out of respect for Steve Jobs, I will stop here and let Apple fans ponder upon the future of Apple which is definitely without the help and assistance of Steve Jobs from yesterday onwards.

Internet Explorer 10 Platform Preview 2 can be unlocked and installed on Windows Vista?

2011-10-06T04:19:00.000+08:00

Here’s something that caught my attention just now, mainly because most of my laptops and desktops are still running on Windows Vista and Vista users all know that we could not install Internet Explorer 10 on Vista.

Well, somebody just claimed that he had successfully unlocked and installed Internet Explorer 10 Platform Preview 2 on his Windows Vista Ultimate. He didn’t say how he did it but he did include a few screenshots to prove his claims. He also left a download link that leads to an executable file (malicious?) stored at MediaFire (file hosting service provider).

Screenshot of the purportedly unlocked Internet Explorer 10 Platform Preview 2, installed on Windows Vista

Should we download the executable file provided by the ‘unlocker’?

Oh no. At least, not until he has properly explained how he unlocks and installs IE10 PP2 on Windows Vista.

Hitler is not happy with iPhone 4S. Oh my Apple!

2011-10-05T17:36:00.001+08:00

I guess you have probably known all about the new iPhone 4S by now. The new (is it really new?) iPhone 4S was revealed yesterday but many feels that it falls short of expectations. Yes, many were expecting more from Apple. Poor souls!

Random thoughts and opinions about the iPhone 4S new features

So, the iPhone 4S has a brand new processor. Tell me, what is so damn great about the iPhone 4S’s dual-core A5 chip anyway?

It’s nothing to shout about since a few Android smartphones have jumped into the dual-core bandwagon long before Apple put one into the iPhone 4S. So please, don’t give me that crap about Apple being the pioneer anymore.

Hmm… The new iPhone 4S also has a new 8-megapixel camera. OMG! An 8-megapixel camera?

Hey, my Nokia N8 has a better camera than the iPhone 4S and I can easily name a few other phones that can shoot better pictures and videos that the iPhone 4S too. No big deal!

But I have to admit that the new iPhone 4S’s Siri feature sounds interesting. It is nice to have an intelligent assistant doing things for us when we’re mobile but then again, the idea is not entirely new. We have many apps (Vlingo is a good example. Watch the following video) that can do the job for us and they have been around long before Apple developed one for the iPhone 4S.

So, once again I’m telling ya. Don’t give us that Apple-pioneering crap again.

Should we go and buy the iPhone 4S?

The iPhone might be kinda affordable in the US but it becomes bloody expensive once it hits the shelves especially here in my part of the world. By looking at the iPhone 4S new features so far, I feel it is pointless to spend hard-earned money on the new iPhone. Just hang on to your old iPhone and wait for the next, new and better iPhone 5.

In the meantime, have fun with the following Hitler parody video and I don’t blame Hitler for being mad at the iPhone 4S. :)

3Defy goes public! Now anybody can convert common photos to awesome 3D models/objects online

2011-10-05T01:21:00.001+08:00

Here’s something that comes with a wonderful solution for those looking for a free service that can convert common photos to amazing 3D models. The wonderfulness doesn’t stop there. The whole service is also available online and you can access it anywhere in the world!

I’m talking about the initial public release of 3Defy and the developers behind this awesome project have one huge dream. They wanna see more and more people use 3D-powered content and their newly launched web-based conversion service will allow users to share their 3D creations with anybody.

Today I’m gonna show you that we can provide 3D-powered content very easily with 3Defy. You can see what I mean in a few minutes. ;)

3Defy Killer Descriptions

3DEFY gives you the power to transform your photographs into rich 3D models.

The 3D models created with 3Defy are much more realistic than anything previously possible in the field of 2D to 3D photography.

Believe me, they’re not joking!

How does it work and how does the web interface looks like?

Examples of photos converted to awesome 3D models/objects with 3Defy

You may click on the next 3D model to see it in action.

Wow! Awesome, aren’t they?!

Do we need to register for 3Defy?

Yes, Registration is required to save your 3D creations in 3Defy website galleries but don’t worry, registration is free.

Can we try out 3Defy for free?

Yes, you can. Feel free to play around and have fun with 3Defy’s 3D Modeler today.

Use HTML p (paragraph) tags with sheer confidence and turn Blogger into an HTML-friendly blog

2011-10-04T18:12:00.000+08:00

I have been using the new Blogger Dashboard interface for quite a while now and I think I like it a lot.

There are many reasons why I like it but today I’m gonna show you one. It has something to do with HTML p tag. In the old Blogger Post Editor interface, using HTML p tag is a complete nightmare unless you’re using some third-party blogging tools such as Windows Live Writer. But in the new Blogger Post Editor interface, Blogger has made it really easy for us to use HTML p tag thus making Blogger a much more HTML-friendly blogging platform.

You could use HTML p tag in many ways but here’s how I do it in my Blogger blogs.

Examples of HTML p tags usage

<p>Here’s something interesting.</p>

<p>Tell me, how many of you could type the following sentence with your mobile phone in less than 10.7 seconds?</p>

<i>The razor-toothed piranhas of the genera Serrasalmus and Pygocentrus are the most ferocious freshwater fish in the world. In reality they seldom attack a human.</i>

<p>If you can, then you might be on your way to break the current world speed texting record! However, I very much doubt that you can do it on your own. Even the current world record holder needs the assistance of a very intelligent Android app called SwiftKey X to break the <a target="_blank" rel="nofollow" href="http://techcrunch.com/2010/03/22/swype-user-sets-guinness-world-record-for-texting-speed/">previous</a> record!</p>

As you can see from the above screenshot, HTML p tags are extensively used but unlike in the old Blogger Post Editor interface, HTML br tags are not visible at all in the new Blogger Post Editor interface.

What happens to those missing HTML br tags?

They are still around but we no longer need to place HTML br tags in our new Blogger Post Editor interface. This is because Blogger will automatically do it for us. Each line break will automatically get one HTML br tag but you won’t be able see those HTML br tags from your new Blogger Post Editor; you can only see those HTML br tags by viewing the live page source of your published blog post.

Things to consider before using HTML p tag

Take a look at your .post p CSS rule. Mine looks something like this:

p {
margin: 0;
padding: 0;
}

If you hate line breaks and wishes to use padding properties instead of line breaks to space paragraphs, then you need to modify your .post p CSS rule a little bit. Perhaps something like this:

p {
margin: 0;
padding: 0 0 15px 0;
}

There’s one problem with using padding properties instead of line breaks in the new Blogger Post Editor. You have to compose your blog post in the following manner:

<p>Here’s something interesting.</p><p>Tell me, how many of you could type the following sentence with your mobile phone in less than 10.7 seconds?</p><i>The razor-toothed piranhas of the genera Serrasalmus and Pygocentrus are the most ferocious freshwater fish in the world. In reality they seldom attack a human.</i><p>If you can, then you might be on your way to break the current world speed texting record! However, I very much doubt that you can do it on your own. Even the current world record holder needs the assistance of a very intelligent Android app called SwiftKey X to break the <a target="_blank" rel="nofollow" href="http://techcrunch.com/2010/03/22/swype-user-sets-guinness-world-record-for-texting-speed/">previous</a> record!</p>

Pretty ugly (confusing too!), isn’t it?

If you have any questions, feel free to ask.

New World Speed Texting Record, 10.7 seconds! Thanks to SwiftKey X Android App. Record holder even got away with a brand new Samsung Galaxy Tab 10.1!

2011-10-04T02:07:00.002+08:00

Here’s something interesting.

Tell me, how many of you could type the following sentence with your mobile phone in less than 10.7 seconds?

The razor-toothed piranhas of the genera Serrasalmus and Pygocentrus are the most ferocious freshwater fish in the world. In reality they seldom attack a human.

If you can, then you might be on your way to break the current world speed texting record! However, I very much doubt that you can do it on your own. Even the current world record holder needs the assistance of a very intelligent Android app called SwiftKey X to break the previous record!

The new world record holder goes by the name of Rachael Loncar and she managed to speed text the above mentioned sentence in just 10.7 seconds, shaving nearly 25 seconds off the previous world record! Pretty amazing! She did that in a little competition held in conjunction with Big Android BBQ (community-organized Android event). For her amazing feat, she even got away with a brand new Samsung Galaxy Tab 10.1. Lucky girl!

Now, let’s get to know SwiftKey X a little better today.

SwiftKey X Killer Descriptions

SwiftKey X is an Input Method Editor (IME) powered by TouchType’s Fluency™ Prediction Engine, currently available for smartphones on Google’s Android™ platform.

SwiftKey X’s predictions are so accurate, it can predict your next word before you press a key. You’ll be amazed by the time you save each day.

How does SwiftKey X Android App looks like?

Where can we download SwiftKey X?

SwiftKey X is a paid Android app, currently priced at $3.95 and you can download it straight from Android Market. You may also download a free version of SwiftKey X but the bad news is that you can only use it for 30 days.

CartoMobile, Best Mobile GIS App for the iPad? You decide…

2011-10-01T03:28:00.000+08:00

Something in the GIS world caught my attention today and I think you GIS folks should hear this. It seems that some GIS professionals believe that CartoMobile is the best mobile GIS app for the iPad!

The bold statement can be found in a press release recently released by CartoMobile to announce the launch of CartoMobile 1.1, an iOS app that is designed for the iPhone and the iPad. It was previously known as Cartographica Mobile and for some unknown reasons, the developers now gave it some new brand name. The mobile GIS app uses OpenStreetMap as base maps and it seems to support ESRI shapefiles and a few well know raster file formats such TIFF, GeoTIFF and GeoPNG. I couldn’t find its full technical specs and I’m very disappointed with that. Let’s see what we have so far.

CartoMobile 1.1: Killer Descriptions

CartoMobile is designed for field data entry and visualization, with an emphasis on compatibility with existing SDI (Spatial Data Infrastructure) to integrate into existing workflows and allow for new ones.

The key benefit of any mobile product is the ability to see the world directly in your vicinity. CartoMobile integrates with the GPS in the iPad and iPhone to bring your immediate world in to focus at the touch of a button.

How does it work and how does it look like?

ClueTrust (the people behind CartoGraphica for Mac OS and CaroMobile 1.1) has kindly provide us with a short CartoMobile Getting Started screencast video (requres the Apple QuickTime plugin). Take a look!

Where can we download CartoMobile 1.1?

CartoMobile 1.1 is currently priced at $79.99 at you may download it straight from iTunes App Store.

720p HD Video Sunglasses! Perfect for Christmas gifts!

2011-09-29T03:54:00.002+08:00

I stumbled upon this cool gadget couple of minutes ago and I wanna share my discovery with you folks today because I think the gadget is somewhat perfect for Christmas gifts.

It’s a slick looking sunglasses that can capture videos in high-definition! It can shoot videos (along with audio) in 720p. Yes, videos with 1280x720 resolutions in full vivid colors and clarity. A few different types and models are available. We have a few that can record multiple videos, each in the form of a 3-minute long video clip. According to its online shop, short 3-minute video clips are perfect for YouTube users who normally shoot and upload short videos. There’s also another type that can shoot one long video up to 30 minutes. Each 720p video sunglasses come with a microSD card and some models have 2GB microSD cards. If that is not enough for you, you can always go for types that come with 16GB microSD cards.

720p Video Sunglasses Killer Description

720P Video Eyewear and accessories. Hi Def Video and Audio, hands free! Great for motorcycling, bicycling, sports, warranty work, traveling and anytime you need easy, hi quality Video!

Too bad… I would have said that it is perfect for those hoping to catch bad politicians having helluva fun time with Chinese dolls. It’s a political habit that is quite popular here in my part of the world. ;)

Example of a video taken with 720p HD Video Sunglasses

Where can we get 720p HD Video Sunglasses

You can get those 720p HD video sunglasses from VSUN Canada.

KneeBouncers releases Free Android, iPad & the iPhone Gaming App for… Babies and Toddlers!?

2011-09-28T19:19:00.000+08:00

Here’s something that will interest (geeky?) parents with babies and toddlers ‘armed’ with Android and the iPhone. Looks like you folks have one more ‘armament’ coming your way.

KneeBouncers is running some kind of a campaign called ‘Bounce, Play and Learn’ and it comes with some great offers (limited time only?) and I’m just gonna mention one here. The offer comes in the form of a free (previously priced at $1.99) gaming app for parents, babies and toddlers. The gaming app comes with 5 unique fun, entertaining educational games that the developers believe will get instant attention from babies and toddlers. The developers even say their website is the world’s best website for babies and toddlers! The funny thing is… I actually believe them!

KneeBouncers Killer Description

Big, bright, colorful fun games for babies and toddlers and everyone else. No computer experience necessary.

How does the game look like?

Do you like it?

As a parent myself, hell yeah! But I’m not fond of letting babies or toddlers play around with mobile devices such as smartphones and tablets. Without proper supervision, parents might end up hearing a lot of people talking about UFIs (Unidentified Flying iPhone/iPad) and UFAs (Unidentified Flying Android) in their neighborhoods! :)

Where can we download the app?

KneeBouncers is available for Android, iPad and the iPhone and you may download it from their respective marketplaces.

CSS3 Text Effects that you can use in your Blogger blog posts: Deliver your killer expressions/phrases in style?

2011-09-28T03:18:00.000+08:00

CSS3 has been around for a very long time and popular browsers such as Chrome, Firefox and Safari had already shown more and more support for CSS3 in the recent years but unfortunately bloggers especially those using Blogger have failed to capitalize on CSS3’s delightful effects.

Perhaps they were ignorant, they were probably thinking that CSS3 is a toy designed only for the designers but the truth is CSS3 is really quite easy to understand and anybody with a little amount of creativity and CSS knowledge can play around with it.

Let’s take a look at some simple, delightful CSS3 text effects that we can apply straight on our blog posts.

Note: In order to apply the examples given below on your existing posts, just edit your post with Blogger Post Editor, locate your killer expression/phrase and wrap it with the given inline CSS (there are other better ways to do it but this one is by far the easiest). Don’t forget to hit the preview button and see how it looks before publishing. Feel free to modify the values of each CSS property. Play around with it!

CSS3 Text-Effect: Anger?

I wanna kick some ass!

<span style='font-size: 30px; text-shadow: rgb(255, 0, 0) 2px 2px 0px, rgb(242, 68, 5) 0px 0px 0px, rgb(242, 116, 5) 0px -5px 4px, rgb(242, 159, 5) 2px -10px 6px, rgb(242, 226, 5) -2px -15px 11px;'>PUT YOUR EXPRESSION HERE</span>

CSS3 Text Effect: Confusion? Sadness?

Matt Cutts, what are you talking about?

<span style='color: transparent; font-size: 30px; text-shadow: rgb(51, 51, 51) 0px 0px 3px;'>PUT YOUR EXPRESSION HERE</span>

CSS3 Text Effect: Fantasy? Wish?

I wanna be Prime Minister... Hell yeah!!

<span style='font-size: 30px; color: #ffffff; text-shadow: #000 0 0 30px;'>PUT YOUR EXPRESSION HERE</span>

CSS3 Text Effect: Bold? Elegance?

Google PageRank 11 ;P

<span style='font-size: 60px; color:#f0f0f0; text-shadow: -1px -1px #FFF, 1px 1px #333;'>PUT YOUR EXPRESSION HERE</span>

CSS3 Text Effect: Defeat? Frustration?

Manchester United sucks...

<span style='color: red; position: absolute; font-size: 30px; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); text-shadow: -2px -3px 3px #292929; -webkit-text-stroke: 1px #000;'>PUT YOUR EXPRESSION HERE</span>

Conclusion

As you can see from the above examples, it is entirely possible to create wonderful visual effects with CSS3 text-shadow property alone! Those are just ideas though. It is entirely up to you and your creativity now. Do some experiments and bring them to a whole new level. While I’m at it, let me just say that such ‘decorations’ are perhaps more suitable for personal blogs but don’t let me stop you from doing whatever you like on yours. :)

Text-to-Speech-based Custom Ringtones? Do they sound cool enough for Android and the iPhone? You decide…

2011-09-27T02:19:00.000+08:00

I borrowed somebody’s (My cute neighbor... Bwah ha ha...) Android phone (yes, I’m still using Nokia... So what?) earlier today and I have been downloading and testing a few Android apps in the last few hours when I stumbled upon a paid app over at the Android Market that lets Android users create custom ringtones with a little help from Text-to-Speech technology.

The Android app is called AutoRingtone and it offers phone users a very interesting solution especially to those that have lost control of their contact lists and custom ringtones. Come on, admit it. We all love to associate somebody on our contact list with a unique ringtone. The reason is pretty obvious, to let us know who is calling us when we’re not around our phone.

But what if… What if we have too many custom ring tones and we no longer could recognize nor remember to whom that one particular ringtone ‘belongs’ to?

Well… If you’re having that kinda problem, Text-to-Speech-based apps such as AutoRingtone is perfectly made for you.

AutoRingtone Killer (?) Description

WHATEVER YOUR NAME, WHOMEVER IS CALLING, THERE'S A RINGTONE FOR THAT! Create TALKING ringtones using DOZENS of TEXT-TO-SPEECH voices including: American Man & Woman, Babe, BritishMan & Woman, Cowboy, JerseyGirl, OldMan, QuietTime, Robot, SpaceAlien, ValleyGirl, WiseGuy & more!

AutoRingtone’s Text-to-Speech voices, how do they sound like?

Do you like it?

I like the app and the solution it offers very much but… But I think the Text-to-Speech-generated voices need a little work. Whoops…

Where can we download AutoRingtone?

AutoRingtone is available for Android and the iPhone at their respective market places for $0.99.

Standard, Custom Avatar for Anonymous & OpenID: Silly Blogger CSS hacks that you SHOULD NOT use

2011-09-26T19:46:00.000+08:00

Blogger’s comment system has seen a lot of improvements in the last few years and the introduction of profile images alongside comments way back in September 17th 2009 was one of its most welcomed new features.

Yeah, it was really cool for the first couple of months. After a while, bloggers begin to question Blogger’s decision to use a blank avatar for anonymous comments. Some even condemns the use of OpenID’s logo as the standard avatar for comments left via OpenID. Personally, I don’t mind seeing OpenID’s logo as avatars but I couldn’t accept Blogger’s decision to use a blank avatar for anonymous comments. It is a horrible decision and Blogger should have come up with some creativity there.

Can you hear me, Blogger?

Now, some bloggers have came up with some silly Blogger CSS hacks to show a standard, custom avatar for anonymous comments and comments left via OpenID. Let’s take a look at some of their silly CSS hacks.

Common Avatar for Anonymous & OpenID Blogger CSS hacks

#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
background:url('URL to custom avatar ') no-repeat;
height:37px;
width:37px;
}

.avatar-image-container { background: url("URL to custom avatar") no-repeat scroll center center;}

Why do I call them silly Blogger CSS hacks?

Such hacks manipulate Blogger’s ‘avatar-image-container’ CSS rule, giving hack users that seemingly cool ability to place a standard, custom avatar for anonymous comments. But what most of them didn’t realize is that CSS hacks as shown earlier have also subtly undermined the look and feel of other avatars. You see, Blogger’s server-side scripting treat ‘avatar-image-container’ class in 2 different ways (for the time being). If the comment is left by a visitor logged in via Blogger (and the visitor has a picture on his or her profile), Blogger’s server-side scripting will push their avatars under the ‘avatar-image-container.vcard’ sub-class. Anonymous comments (including those logged in via Blogger but have no pictures) and comments left via OpenID on the other hand, will be placed under ‘avatar-image-container.avatar-stock’ sub-class.

By manipulating Blogger’s ‘avatar-image-container’ CSS rule, such hacks inadvertently apply some unnecessary CSS rules to avatars classified under the ‘avatar-image-container.vcard’ sub-class and that is really bad. Many things can go wrong here. For an example, such hacks will crop and warp those otherwise perfect avatars classified under the ‘avatar-image-container.vcard’ sub-class. Yes, this is the classic case of CSS Inheritance gone totally wrong!

That’s why I called them silly hacks.

The better way (still silly but better) to place a standard, custom avatar for anonymous & OpenID

I propose a direct manipulation of the ‘avatar-image-container.avatar-stock’ CSS rule. An example is shown down below;

#comments-block .avatar-image-container.avatar-stock span img {
background: url(URL to custom avatar) no-repeat;
background-position: center;
float: left;
height: 37px;
width: 37px;
}

The above proposed hack works best if the height and width of the standard, custom avatar is set at 37px x 37px. Yes, a perfect square.

Bear in mind that the above Blogger CSS hack would not help you in replacing that horrible blank avatar (originating from http://img1.blogblog.com/img/blank.gif). That blank avatar would still be in the background and there’s nothing we can do about that since the whole thing is generated by an external CSS style sheet that belongs to Blogger. The best we can do so far is to place another image right on top of it and this is what the above code will do for us.

Feel free to use it if you want but I certainly would not encourage anyone to use hacks similar with the ones mentioned in this post. We should leave this Blogger and Blogger should replace that damn blank avatar with something that has some kind of a picture on it.

Do you hear me, Blogger?