MH Blog

Sunday, 17 October 2010

Super Bowl Party Tips: How to Eat a Chicken Wing

You may eat chicken wings wrong way. Watch this

Read more...

Models in X-ray Films

I always wanted to buy those X-Ray glasses out of the back of comic books. Now there is no need! Japanese monitor maker Eizo has released a pin-up calendar of provocative X-ray images where see-through models are posed in highly suggestive poses. They was not trying to create social commentary. It says it just wanted to catch people's attention. Models in the X-ray films are sexy models but what we see is their sexy poses, we cannot tell whether they really looks sexy or pretty because every lady looks about the same in X-ray photos. OK, I admit I wish I had the actual photos of the models themselves to compare and contrast ... in the name of science, of course :)

Numbered Page Navigation For Blogger

Page Navigation is a really awesome and long awaited feature. You might have seen numbered page navigation on many wordpress blogs(wp-pagenavi by Lester Chan). Muhammad Rias of Techie Blogger had already developed a page navigation system for blogger.It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger.It had some minor bugs and now Abu Farhan has perfected it and he has now given us the perfect page navigation solution.Here is a little screenshot of what this is all about.

When you use this hack,you will see this kind of navigation on your blog’s home page and label pages(needs little customization).

Implementation of Blogger Page Navigation

Those who are bad at HTML modifications can use my one click installer

After installing this widget proceed to the label fix.

The Complex Method

If you installed the widget you shouldn’t be here. Scroll down to the label fix.

1. Login to Blogger Dashboard and navigate to Layout > Edit Html

2. Don’t click the checkbox which says ‘Expand Widget Templates’

3. Now find

]]></b:skin>

and replace it with

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need

4. Next is the JavaScript part. Find

</body>

and replace it with

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

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>

</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

As you can see,there are some customizable parameters in this code

var pageCount=5;

This code determines the number of posts that would be displayed per page.

var displayPageNum=5;

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

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;

These two lines determine the text that would be shown for the previous page and next page respectively.

Label Fix

Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template

How to Edit the template to cut short the posts per page?

Go to the Edit HTML page and expand the Widget Templates

Now find each occurrence of

'data:label.url'

(including the quotes) and replace each of it with

'data:label.url + &quot;?&amp;max-results=5&quot;'

Here 5 is the number of posts to be displayed per page.

Now if you are using the label cloud widget by phydeaux3,then find

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

and replace it with

a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;

Here also 5 is the number of posts to be displayed per page.

Now you should have the Blogger Page Navigation working perfectly on your blog. :)

This tutorial is based on Codes from Abu Farhan and Muhammad Rias. So if you plan to write this tutorial on your blog,do link back to them also.
Read more...

Comment Spam Filtering and Comment Inbox in Blogger

Many of you might have noticed that Blogger has made some Cool Improvements to its Commenting System. Blogger has introduced an improved Spam Filter and a Comment Inbox. Most of you must have noticed the new “Comment” tab in your Dashboard (This may not be present on all blogs. Blogger is in the process of rolling out this feature to all users)

Comment Inbox

Blogger has introduced the “Comment Inbox” where you can view all the Comments published on your blog.The Comment Inbox has Sub tabs namely Published , Awaiting Moderation and Spam

Comment Spam Filtering

Most web forms are targeted my spammers and bots. Most Blogging Platforms have their own ways of keeping the bots and spammers away. Wordpress uses Akismet for this process.Blogger has its own filtering mechanism to keep the odd ones out. Now Blogger improved its spam fighting mechanisms by integrating Google’s Spam Filtering Technologies into Blogger. Blogger will automatically detect Spam comments and move them to Spam in your Comment Inbox. The comments in the Spam Inbox are not visible in your blog. You can mark Comments as Spam and move them to the Spam Inbox.You can also mark comments as Not Spam that have been incorrectly classified or marked as spam and the comment will be immediately published on to your blog.

What do you think of the new additions?
Read more...

How to Remove and Hide Blogger NavBar (Top Navigation Bar)

When browsing Blogger powered weblogs hosted on blogspot.com domain or custom domain, there is always a NavBar (Navigation Bar or Banner) that appears on top of the blog. The Blogger NavBar contains Search Blog textbox, Flag Blog to notify Blogger about objectionable contents on the blog, Next Blog link to visit another blog randomly, plus links to create a blog or sign in to Blogger.

No many visitors nor bloggers themselves may find it useful though. It’s possible to hide and remove the NavBar with a little CSS hack. The trick will not interfere or mess up with the custom layouts that webmaster has designed, and pretty safe and easy to implement. In fact, if you’re publishing the Blogger blog to own custom domain with FTP or SFTP, it’s possible to turn off NavBar.

Turn Off and Disable NavBar in Blog Published by FTP or SFTP

Login to Blogger.
On the Blogger Dashboard, click on the Template link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.
The Edit HTML page under Template tab should be loaded. Click on the drop down box beside Change the Blogger NavBar and select Off.
Click on SAVE TEMPLATE CHANGES button when done.

Remove and Hide NavBar in Blogger Widget Template

Sign in to Blogger.
On the Blogger Dashboard, click on the Layout link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.
Under the Layout tab, click on Edit HTML tab to view the template’s HTML code.
Search for the following line of code:

]]>
Before the line, add in the following line of code:
#navbar { display: none; }
or:
#navbar-iframe { display: none !important; }
Click on SAVE TEMPLATE to make the change effective.

Remove and Hide NavBar in Blogger Classic Template

Login to Blogger.
On the Blogger Dashboard, click on the Template link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.
The Edit HTML page under Template tab should be loaded. If not, go to the tab.
Search for the following line of code:

</style>
Then, add the following line of code before that line:
#navbar-iframe { display: none; }
The Blogger Classic Template uses iframe to load the NavBar, and styles it with ID named navbar-iframe. The name actually also works for new Blogger Widget Template too.
After hiding the Nav Bar in Blogger using Classic Template, there tends to be a gap that replaces the navigation bar. The gap may be white, red, green, blue, or black in color, depends on what is your background color. To remove the gap, find the following code (normally near the top of the HTML):

body {
Add in the following like of code after the body tag:
position: relative; top: -32px;
Click on SAVE TEMPLATE CHANGES button when done.

Tip: To display and show NavBar again, just remove and delete the additional codes that have been added.