Wednesday, October 29, 2008

Fix for "missing" favicon

Well, not exactly missing favicon, but having your own favicon replaced by Blogger favicon. There had been many complaints about this at favicon for your blog as well as at a newer post free favicon generator and host and I myself experienced the problem. Thanks to the alert by "The Adventures of MYK Jones", the favicon is back.

Fix for missing favicon

Just move your codes for the favicon from it original position in the template to just after ]]></b:skin> and just before </head>, preview and if everything looks all right, save template.

Actually, I left the original code for the favicon in its original place and copy-paste to just after ]]></b:skin> and just before </head>

This is how that section of the template looks like after the fix:

]]></b:skin>

<!-- iconj.com dynamic favicon code -->
<link href='http://www.iconj.com/favicon.php?user=manature' rel='shortcut icon' type='image/x-icon'/>
<link href='http://www.iconj.com/favicon2.php?user=manature' rel='icon' type='image/gif'/>
<!-- end of iconj.com dynamic favicon code -->

</head>

<body>


Fix for "missing" favicon for old classic Blogger template

If you are using the old classic Blogger template instead of the New Blogger xml template, go to blogger.com (Dashboard) > template > Edit HTML and look for

<$BlogMetaData$>

and paste the favicon codes immediately after <$BlogMetaData$>

Peter Chen's nice graphic signature

Monday, October 27, 2008

Error code bX-4d29hg - what to do

I had earlier wrote about Error code bX-jdokxi - what to do. I got another error message when I tried to change the template of Isaac Low's blog. The error code was bX4d29hg. I did the same thing as for Error code bX-jdokxi. I backed up Gadgets (Page Elements). (I didn't backup template because the blog was relatively new, but it is always a good idea to backup template whenever you are making changes to the template. I then deleted the all the gadgets. After deleting all the gadgets I had no problem changing to the 4 column Minima template.

Peter Chen's nice graphic signature

Saturday, October 25, 2008

Hide navbar for New Blogger

Blogger has started advertisement above the navbar (the usually blue navigation bar at the very top of a blog) on a random basis (now you see it, now you don't) and this has taken valuable space. See screen shot below:

advertisement above Blogger navbar

Since that is taking valuable real estate plus the fact the the Blogger TOS (Terms of Service) did not specify that one must have it for the blog, I have decided to hide the navbar.

There are various ways to do that, not all of them effective. I have found that the hack by Aditya to be effective.

Aditya's hack is simple. Here is my interpretation of his hack: Go to LAYOUT > EDIT HTML to open the template editor. Look for <b:skin> and paste the following after that:

/* By Aditya http://the-lastword.blogspot.com/
----------------------------------------------- */
div.navbar {
opacity:0.0;
display:none;
}

Related posts:
Simple adjustable way to hide navbar
How to hide navbar for New Blogger (xml template

Thursday, October 23, 2008

jQuery Expandable Post Summary

This expandable post summary uses jQuery which is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML (Wikipedia. You do not need to understand what that means, only to be able to follow instructions in order to implement it for your blog. If you want an easier way, you can use the 4 column Minima template with jQuery expandable post summary pre-installed. You don't have to do anything, just backup current template and backup Gadgets which can be backed up, then replace the template with the one in 4 column Minima template with jQuery expandable post summary pre-installed.

The advantage of jQuery Expandable Post Summary is that it is an easy ONE TIME 2 step easy edit of the template and the job is done. Nothing else need to be done. No fiddling with the post needed. Disadvantage I discovered is that you can't have too many gadgets and a slow downloading blog, otherwise it will initially display the full post and only display the truncated post summary after all the gadgets is fully downloaded.

You can see a demonstration of a blog with jQuery expandable post summary at Holidays and festivals. Please note that if you have too many gadgets like in Home Improvements or Careers, the full posts will initially be displayed and only after all the Gadgets are completely downloaded will you see the posts truncated to short summaries followed by a [Read More...] link.

Now to the implementation (This is a variation to the excellent description by Amanda of Elegant post summary with jQuery: You are reminded to backup current template and backup gadgets (Page Elements). Now go to LAYOUT > EDIT HTML and [v] Expand Widget Templates. When the template had been fully expanded, look for </head> and paste this script just before the </head> tag:

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: '[Read More...]', // default is 'read more...'
});

});
</script>


Note that you are free to edit the part in red. For example, instead of [Read More...], you can edit it to [Expand post...] or something similar. The second part in red, 280, is to control how big is the summary. If you want the summary to display more, you may edit it to 400 and if you want to make the summary shorter, you may edit it to 100 etc.

Now after having done that, look for
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Delete all of that (highlight all and press DELETE key) and replace it with

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>


Preview and if satisfied, save template. You may follow the above instructions or use the pre-edited template at 4 column Minima template with jQuery expandable post summary pre-installed.

Related posts

If you want to have a lot of gadgets in your blog, perhaps it is better to use the less sophisticated expandable post summary where you have to add some HTML tags in the post itself but which will show the truncated post summary immediately without having to wait for all the gadgets to be fully downloaded.

Peter Chen's nice graphic signature

Wednesday, October 22, 2008

Changing widths of blog - sidebars, main column

I have previously showed how to determine main column and sidebar widths. A blogger asked how to change the widths. It is not difficult, but before I show how to change the widths, let me explain something about web designs. If you are only interested to find out how to change widths, skip to Change Width

Webmasters always take into considerations the kind of visitors to their websites. One important considerations is the screen resolutions of their visitors and previously, small screen resolutions of 800x600. This is so that such small screen visitors will see the whole blog without having to use the horizontal scroll bar. Visitors with larger wider screen will see so called "wasted space". Even Vprofessional webmasters for big websites like CNN.com have this "wasted space". The so called "wasted space" are there for a reason, that is, to make things convenient for small screen visitors. You would not want to make it inconvenient for small screen visitors and discourage them from coming back to your blog.

Now we come to the part about changing width:


Change Width
The widths of the whole content, the Header, the Footer, the main column and the sidebar or sidebars are controlled via the CSS (Cascading Style Sheet) of the template. The sections involved in the case of the 4 column template used for this blog are:

Overall
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:0;
text-align:left;
font: $bodyfont;
}

Main column
#main-wrapper {
margin:0 0 0 20px;
width: 450px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Left sidebar
#left-column {
width: 163px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

First right sidebar
#rightsidebar-left {
margin:0 0 0 10px;
width: 163px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

second right sidebar
#rightsidebar-right {
width: 164px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Note that the total widths of the main column plus the 3 sidebars = 450+163+163+164 = 940 pixels

The overall width is 990px. The difference = 990 - 940 = 50 pixels are taken up by the margins.

If you do not want to change the overall width, but only want to change the widths of the sidebar and/or the main column, what you should do is to make sure the the total widths of the main column plus the sidebars are alway 940 pixels (assuming you want the margins to be maintained)

For example, I want to change the main column to 400 pixels. Thus there will be an extra 50 pixels to be distributed among the 3 sidebars. Thus I might add 30px to the first sidebar, 10 each to the 2 right sidebars. Thus the new widths will be

Left sidebar = 163 + 30 = 193
Main column = 450 - 50 = 400
First right sidebar = 163 + 10 = 173
Second right sidebar = 164 + 10 = 174

and that part of the CSS become

Overall (no change)
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:0;
text-align:left;
font: $bodyfont;
}

Main column
#main-wrapper {
margin:0 0 0 20px;
width: 400px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Left sidebar
#left-column {
width: 193px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

First right sidebar
#rightsidebar-left {
margin:0 0 0 10px;
width: 173px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

second right sidebar
#rightsidebar-right {
width: 174px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

ANOTHER EXAMPLE:

You want to make the whole blog wider to, let's say 1200 pixels wide. That means there will be an extra 1200-990=210 pixels to be distributed among the 4 column. Thus I may add, for example, 120 to the main column, and 90 (30 each) for the 3 sidebars.
Thus
overall width = 1200
Main column = 450 + 120 = 570
Left sidebar = 163 + 30 = 193
First right sidebar = 163 + 30 = 193
Second right sidebar = 164 + 30 = 194

Peter Chen's nice graphic signature

Tuesday, October 21, 2008

Blogger Gadget Page Element backup

Previous post related to Gadgets (previously Page Elements) are screen shots of 19 Gadgets and list of gadgets with some explanation and a link to a demonstration blog Investment, money and finance.

Now if you ever have to change your blog template, most of the gadgets you installed will either be deleted or become empty. So it is best to backup the gadgets. However, not every gadgets can be backed up. Some gadgets also need no backup because they can easily be restored via the LAYOUT.

Here is a list of gadgets with those which can be backed up in red, those which need no backup in green, and those which cannot be backup in black:

  1. Blog List

  2. Followers

  3. Slideshow

  4. Subscription Links

  5. Poll

  6. List

  7. Link List

  8. Picture

  9. AdSense

  10. Text

  11. HTML/Javascript

  12. Feed

  13. Labels

  14. Newsreel

  15. Video Bar

  16. Logo

  17. Profile

  18. Blog Archive

  19. Page Header


How to backup TEXT and HTML/Javascript Gadgets

Open/Edit the TEXT or HTML/Javascript Gadgets. For the TEXT Gadget, click EDIT HTML. For both, just highlight all everything inside the "Gadget editor" (name is my "invention" given for want of a name) by clicking inside the "Gadget editor" and press Ctrl+A keys simultaneosly, right-click and select COPY. Open a Notepad file, paste into the Notepad file and save in a suitable folder using an easily recognizable name for easy retrival.

How to restore TEXT and HTML/Javascript Gadgets

Just open the backup files, highlight by clicking ctrl+A and copy into clipboard, open the TEXT or HTML/Javascript Gadgets, paste the codes from the clipboard into the "Gadget editor" and save.

For Gadgets that cannot be backup, if you want it restored, you will just have to reconstruct. For Gadgets that need no backup, just restore them from LAYOUT.

Peter Chen's nice graphic signature

Blogger Gadgets (Page Elements) and what you can do with it

This post is best read with a wide screen and at least 2 windows opened with one displaying this post and another displaying Investment, Money and Finance and minimize the 2 to display side by side, and perhaps either a third window or tab of a browser with tabbed browsing displaying screen shots of "gadget editors" for want of a better name.

I have previously written about the 19 Gadgets (Page Elements) together with a screen shot of those 19 Gadgets. If you want to see a demonstration of them excluding the Archives Labels Gadgets, have a look at the second right sidebar of Investment, Money and Finance

The Gadgets in the second (last) right sidebar of Investment, Money and Finance are in descending order:

  1. My Blog List (a more elaborate version of Link List with choice of displaying in the list, an icon, post title, snippets (extracts), thumbnail and date, all of the most recent posts. When you click "Add a blog to your list, you will be prompted to enter the blog URL

  2. Followers

  3. Slideshow (I used the keyword "money" to display images from Flickr. You will get a choice to display slide shows of images from Flickr, Picasa Web Albums, Photobucket using keywords and Album using username using a feed, or select "Other" using a feed)

  4. Subscription (for your readers to click on so as to be able to subscribe to your blog feed in a feed reader)

  5. Poll

  6. ListThis is almost link a link list because you can link the items on the list to a webpage by clicking on the link icon and then entering the URL of the webpage you want the item to be linked to. I used the title "BOOKS" for the list and link it to books at Amazon

  7. Link List or another name, blogroll. I don't like to use this as this cannot be back uped. I prefer to use HTML/Javascript gadget and hyperlinks as this can be backed up. If you do not know how to do this, ask

  8. PictureI did not add this in the demonstration blog. However, if you chose to add this, you can either chose the pictures from your computer or the web. I prefer to use HTML tag <img>

  9. AdSenseRather than using this gadget, I also prefer to generate the script myself and use the HTML/Javascript gadget. If you do not know how to do this, ask

  10. Text This TEXT gadget is practically a post editor as you will have icons to make the text bold, italic, set the color of the text, hyperlink it, block quotes, use HTML

  11. HTML/Javascript This is the gadget I use most often as there is a great variety of things you can do with this even if you don't know HTML or Javascript, you only need to know where to get the codes and paste them into this gadget. It can also be easily backed up

  12. Feed For your readers to click on and subscribe to your blog feed

  13. Labels This is a list. Other blogging platform call this categories

  14. Newsreel I added financial news in the demonstration

  15. Video Bar I added video with keyword "Money"

  16. Logo

  17. Profile not added in demo

  18. Archive not added in demo

  19. Page Header This would be present in practicall all blogs



I will follow up with a post on backing up gadgets or page elements later.

Peter Chen's nice graphic signature

Sunday, October 12, 2008

Blog displayed in different browsers

I have written previously about the advantages of having many web browsers. Let me elaborate on one more reason why you should have many browsers.

A blogger is by default a web master responsible for the way a blog is displayed over the Internet. Any web master worth his salt would have a visitor counter and would check the statistics every now and then. Below is the browser statistics for visitors to this blog:

browser statistics bar chart
browsers statistics percentage

It shows that visitors to this blog uses varied web browsers ranging from FireFox, Internet Explorer, Safari, Opera and the newly introduced Chrome. It pays to check how your blog is displayed in these browsers so that you know how your blog appears to different visitors using different browsers.

For example, I viewed this blog - Guide to United States of America with different browsers and noticed that the blog title and description are displayed differently in different browsers. Below are the screen shots of how the blog displayed in Firefox, Internet Explorer 7, Opera, Safari, Flock and Chrome:

blog as displayed by Opera
Guide to USA as displayed by Opera

blog as displayed by Internet Explorer 7
Guide to USA as displayed by Internet Explorer 7

blog as displayed by Google Chrome
Guide to USA as displayed by Google Chrome

blog as displayed by Safari
Guide to USA as displayed by Safari


The blog Guide to USA uses Final Sense Butterfly template and displayed with only very slight difference in Chrome, Firefox, Flock, with the last part (after Rhode Island) hidden by the Google Search box. The most noticeable difference is in Opera where you can barely see the hidden portion of the description through the Google Search box. To bring that into sharper focus, I paste below the part in question below:



The other noticeable difference is in Internet Explorer 7 where the part of the description starting from North Carolina is hidden by Google Search button and the blog title is blur with shadow. Again, to bring that in sharper focus, below is portion of the blog title as displayed by Internet Explorer 7:

blur blog title with shadow as displayed by Internet Explorer 7

The above blog is only a demonstration blog so I decided not to do anything about it. If it is the main blog, I will then of course seek solution to the little problems as having part of the blog description hidden or getting a blur blog title is not quite acceptable.

Peter Chen's nice graphic signature

Saturday, October 11, 2008

Embed Video in sidebar


Update: For embedding Youtube video, you can do the resizing at Youtube.com itself by either ticking one of the 4 size option (560x340 640x835 835x505 1280x745) or by clicking CUSTOM and typing in your choice of width while letting Youtube automatically fill in the value for the height to keep the aspect ration constant (see screenshot below). However the method described in this post will still be useful if you want to resize other video embed codes or similar:



Method of resizing video embed codes while keeping aspect ration constant



A blog reader asked how to embed a video into the sidebar. I have embedded a video into the right-most sidebar at the bottom of Dummies Guide to Google Blogger. The method is not much different from the procedure to embed a as explained in embed Youtube video in blog post, but for completeness and simplicity, I will explain the procedure in full here:

The very first step is to find out the width of the sidebar as explained in how to determine the width of the blog Header, main column and sidebars. The blog Dummies Guide to Google Blogger uses a 4 column Minima template and the width of the right-most sidebar is 164 pixels.

The original embed script of the video is pasted into the scroll box below with the width and height attributes highlighted in red:

<object width="400" height="333"><param value="http://www.youtube.com/v/bU4gXHkejMo&rel=1" name="movie"/><param value="transparent" name="wmode"/><embed width="400" src="http://www.youtube.com/v/bU4gXHkejMo&rel=1" wmode="transparent" height="333" type="application/x-shockwave-flash"></embed></object>


We have to resize the video to fit into the sidebar. The easiest way is to first create an empty image with a photo editor such as the free Irfanview with the same width and height as the video (400x333). Then, with the option to preserve aspect ratio ticked, the width is changed to 160 and the corresponding height is noted (in this case I found it to be 133). So I changed all the width attributes to 160 and all the height attributes to 133.

I then get into the LAYOUT and clicked "Add a gadget" (previously "Add a Page Element") and then select HTML/Javascript and pasted the edited Youtube embed script into the page element:

<object width="160" height="133"><param value="http://www.youtube.com/v/bU4gXHkejMo&rel=1" name="movie"/><param value="transparent" name="wmode"/><embed width="160" src="http://www.youtube.com/v/bU4gXHkejMo&rel=1" wmode="transparent" height="133" type="application/x-shockwave-flash"></embed></object>



Update: "How do i find out if a video has embedding enabled!!!"

Look at this video for example: How to play make a circuit light a bulb game. If you look at the bottom, you will see at the bottom an EMBED button (highlighted in red). Click on the EMBED button and you will get the embed code:

Complete circuit light a bulb online game

In other circumstances, you will see an up arrow button at the bottom right corner of the video which when clicked will reveal the embed code (see screen shot below, arrow button and embed code highlighted in red:

Malaysia Singapore express Aeroline bus


Related posts:
Resizing Youtube video to fit main column or sidebar using calculation
Embed Youtube video in blog post

Branding and blogs

Brand is powerful stuff. The CocaColaTM brand is known worldwide. Consultancy Interbrand estimated Coca-Cola's brand to be worth $67.5 billion (£39 billion or 55 billion euros). That sure is a huge amount of money. Google, Yahoo, Blogger are all branded and each have their logo. In addition, all their web pages are distinguished by a distinct favicon like those below:


Yahoo! faviconstatcounter faviconBlogger Tips and Tricks faviconmail faviconGoogle FaviconBlogger favicon

Perhaps Blogger Tips and Tricks should be branded too and have its own logo and favicon?

As per favicon, this blog already has one as you can see from the address bar above. I used my profile photo for the favicon. However, the blog Header is plain, no decoration. Perhaps I should add the profile photo to the blog Header as in Advertising Tips and Tricks.

I am no website designer, graphic artist nor brand management expert so had simply used my profile photo as a quickie logo for Advertising Tips and Tricks as a demonstration. But if I am to be really serious about branding, I should perhaps think of name creation and domain name and trademark availability testing and use custom domain.

Peter Chen's nice graphic signature

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics