Saturday, December 19, 2009

Why sometimes AdSense unit missing and how to fix them

Bloggers who have Google AdSense units set to display in their blogs often complained about missing AdSense units. I will use this blog to explain.

I have set the following AdSense units to display in this blog with the number of AdSense units in bracket):
  1. wide skyscraper unit in the left column (1 unit)
  2. leaderboard unit in the footer (1 unit)
  3. large rectangle in between posts (6 in the main page but only 1 in the individual post page)
Note: There should be 6 ad units in the main page or homepage) because I have set the number of posts to display in the main page to be 7 (the default).

Now in you count the total number of ad units, you will get a total of 8 ad units (1+1+6) in the main page but only 3 in the individual post page (permalink).

Google AdSense only allows a total of 3 AdSense ad units in any page and so in the main page, the extra 5 ad units get suppressed and you only see 1 wide skyscraper unit in the left column, 1 between the first and second post and 1 between the second and third post giving a total of three.

However, in the individual post page (permalink), there is only 1 ad unit immediately after the only post, 1 in the left sidebar and 1 in the footer giving a total of 3 (allowed) units with none suppressed.

Now if you have set AdSense units to display between posts and you don't want any ad units to be suppressed and you have similar settings for the AdSense units, all you need to do is to set the number of posts to display in the main page to 1 and only 1.

Sunday, December 13, 2009

Resizing Youtube video to fit main column or sidebar using calculation

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


Two previous posts Embed video in blog post and Embed video in sidebar described how to use Irfanview photo editor and resizing image to help resize Youtube to fit the width of the main column or the sidebar of the post. I have been told that Irfanview may not work on a MAC.

In this case, we will have to resort to mathematics, using proportion (ratio) to keep the resized video undistorted. I will do this using example. Below is the code for embedding a video:

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/qBro4dANNGU"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/qBro4dANNGU" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>


Let's say we want to fit the video post (main column) into a blog using the standard Blogger 2 column Son of Moto template which main column has a width of 400 pixels (refer to How to find the width of the blog Header, main column and sidebar). Note from the code above that the the width and height of the video is 425 and 350 respectively, so the video is too wide for the main column and we have to resize it down to, say 395 pixels wide. In order that the video be undistorted, the height will also have to be resized down, say to h pixels.

Thus we have

original width = new width
original height   new height

Thus

425 = 395
350     h

Transposing, we have

h  = 395 x 350 = 325
       425

Thus the resized video will be 395 pixels wide and 325 pixels high, and the code for embedding the video should be changed to

<object width="395" height="325"><param name="movie" value="http://www.youtube.com/v/qBro4dANNGU"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/qBro4dANNGU" type="application/x-shockwave-flash" wmode="transparent" width="395" height="325"></embed></object>


Resizing video to fit sidebar

Taking the same example blog (Son of Moto 2 column) which has sidebar width of 226 pixels, let's say we want to resize the video width to 220 pixels. Using the same calculation like above, we have

425 = 220
350     h

Transposing, we have

h  = 220 x 350 = 181
       425

Thus the resized video will be 220 pixels wide and 181 pixels high, and the code for embedding the video should be changed to

<object width="220" height="181"><param name="movie" value="http://www.youtube.com/v/qBro4dANNGU"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/qBro4dANNGU" type="application/x-shockwave-flash" wmode="transparent" width="220" height="181"></embed></object>

Blogger Dashboard (Create Posts Settings Layouts etc)


"..I am having trouble with finding the settings everyone is talking..."

Today's post is pretty basic but is important because it is the starting point for all your blogging tasks. I am referring to the Blogger Dashboard which essentially is the main launching pad to whatever you want to do with your Blogger blog. Many instructions will first ask you to log into Dashboard (from blogger.com). Once you log in, you will see something like the screen shot below:

screen shot of Blogger Dashboard

In the Dashboard you will see the link for SETTINGS which the blogger who asked the question above is looking for, among other tabs including "create" NEW POST, EDIT POSTS, LAYOUT, MONETIZE and STATS (visitor counter using Google Analytics). Clicking on SETTINGS will take you to another window with many sub-tabs (see screen shot below):

screen shot of Blogger SETTINGS

and initially you will be in the BASIC sub-tabs, and right at the bottom, you will see the GLOBAL SETTINGS (applicable to all blogs in the same Blogger account) where you can toggle between the Updated post editor and the old post editor.

Reblog this post [with Zemanta]

Saturday, December 12, 2009

Make blog into a website


The title of this post could just as well be How to remove the time stamp, etc or Configure blog post. Let me explain.

This post is inspired by a blogger's question - how to remove the time stamp. I don't know his motivation for wanting to remove the time stamp, but I suspect that it is likely to be that he wants it to look more like a website than a blog. Which takes us to the question, what is the difference between a website and a blog?

Let me just quickly state what to me are some characteristics of a blog without going into controversies and then described how to remove those characteristics of a blog such as "time stamps", "posted by ....", comments, etc. so that they look more like a "website". Update: to those characteristics, perhaps I should also add Hide navbar.

Blogger with the "drag and drop" LAYOUT (New Blogger xml template) has made this very easy. All you need to do is to sign into Blogger (Dashboard), click on LAYOUT, then click EDIT in the BLOG POST section (see screen shot below):

screen shot showing Blogger LAYOUT and BLOG POST section with EDIT

Clicking on EDIT will then give you a window to CONFIGURE BLOG POSTS where you can just simply remove the ticks against those elements which you do not want to appear in your blog (see screen shot below):



The above screen shot showed all the elements (Day and Date, Posted by, time stamp, comments, trackbacks {links to this posts}, labels, quick edit icon) characteristic of a blog post removed (unticked). You can see an example of how such a blog will appear at Computer and Internet. I have left the other "give away's" like blog archive intact. The things you would notice missing are Day and Date accompanying the post title and the time stamps, "posted by", comments, labels, etc. at the bottom of the posts. This leave just the title and the post body.

Perhaps later I will elaborate more on the difference between a blog and a website and an illustration of what I mean.

Thursday, October 29, 2009

Updated post editor: remove image border




First thing to note is that with the Blogger updated post editor, you can only upload pictures in the compose mode. To remove border from uploaded photo, you will need to edit the HTML used to display the photo and that you can only do in the Edit HTML mode where in place of the photo, you will see this script:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_jizoPL28qCY/Suj7U1LF3rI/AAAAAAAADL0/ZvBqjo6s6eg/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_jizoPL28qCY/Suj7U1LF3rI/AAAAAAAADL0/ZvBqjo6s6eg/s320/kimchi.jpg" /></a>
</div>
Now one would think that the attribute border="0" would ensure that the displayed picture would not have a border, but it does, as you can see in that photo of kimchi (Korean version of sauerkraut or fermented cabbage) above.

In order to make the border disappear you can add this attribute style="border:none;" to the <img> tag like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_jizoPL28qCY/Suj7U1LF3rI/AAAAAAAADL0/ZvBqjo6s6eg/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border:none;" border="0" src="http://3.bp.blogspot.com/_jizoPL28qCY/Suj7U1LF3rI/AAAAAAAADL0/ZvBqjo6s6eg/s320/kimchi.jpg" /></a>
</div>

and the result of that edit is this photo minus the border:




Update: As a result of test removing border from images uploaded via Blogger I have found out that the attribute style="border:none;" must be placed before src="photo URL" and not after.

Update 2: "Hi Peter, How about adding an image border? Simply changing border="0" to border="5" or "10" and making sure my colors were correct didn't cut it. Please help."

My response: Since Blogger add border to images as a default, I suppose one does not need to do anything to have border with images and to prove that, I uploaded 2 photos, first with the updated post editor, then with the old post editor, both without editing the codes. As you can see below, both are framed with a border:





Related posts:
Related posts:
Images and the Blogger updated post editor
New Blogger updated post editor - Birthday gift?

Wednesday, October 21, 2009

Images and the Blogger updated post editor


Previously with the old Blogger post editor, when you upload images, Blogger adds an alt="" tag for you to complete as seen in an example below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_jizoPL28qCY/SD_AiGSnP8I/AAAAAAAABfk/F5OUlKXf57E/s1600-h/comments+blogger+tips+and+tricks.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_jizoPL28qCY/SD_AiGSnP8I/AAAAAAAABfk/F5OUlKXf57E/s400/comments+blogger+tips+and+tricks.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5206091386300350402" /></a>

Now with the updated post editor, you will only have the image upload icon in the COMPOSE mode and Blogger also inserts codes different from the above example to display the image (visible only in the Edit HTML mode) illustrated by the example below:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_1354hN3vRng/St5dV5-SaFI/AAAAAAAAAP8/FxEq55ak_GQ/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_1354hN3vRng/St5dV5-SaFI/AAAAAAAAAP8/FxEq55ak_GQ/s320/kimchi.jpg" vr="true" /></a>
</div>


The code which actually display the image is highlighted in green above. Although in this case, Blogger wasn't as considerate to add the alt tag for you, you can still add it in yourself together with the title tag if you wish like the example below:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_1354hN3vRng/St5dV5-SaFI/AAAAAAAAAP8/FxEq55ak_GQ/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_1354hN3vRng/St5dV5-SaFI/AAAAAAAAAP8/FxEq55ak_GQ/s320/kimchi.jpg" vr="true" alt="Kimchi, Korea's signature dish" title="Kimchi" /></a>
</div>


Note: You can switch between the old post editor and the updated post editor by signing into Dashboard, SETTINGS > BASIC and near the bottom of the page, you will see this for your selection:

selecting Blogger post editor

Related posts:
Blogger updated post editor: Removing image border
New Blogger updated post editor - Birthday gift?

Monday, October 12, 2009

How to delete own comments in other blogger's posts


A previous post described How to delete comments and another post was about a delete comment utility. However, "But I was thinking more in lines of my comment in another person's blog"

That is not difficult. All that is needed is that you be logged into your Blogger account when you surf over to the post where you have left comment you want to delete. You will then see a trash can icon at the bottom corner of your comment like in the screen shot below:

trashcan delete comment icon

All you need to do is to click the trashcan icon, confirm the deletion, and your comment will be (partially) deleted, leaving behind this:

deleted Blogger comment message

Related posts:
Delete comment utility
How to delete comments
How to delete comments Part 2

Saturday, October 10, 2009

How to center date header and change font size

"Do you know how centre the date?????"

Open the template editor by going to Dashboard > Layout > Edit HTML and look for these codes:
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}


and change it to

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
text-align:center;
}


and if you also want to change the font size, add this line - font-size:200% or font-size:12px; or whatever values you wish, so that the codes become

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
text-align:center;
font-size:200%;

}

Friday, October 09, 2009

"Horizontal scrolling recent posts" for your blog


Found this hack to make a horizontal scrolling recent post at IdeasBubble, tested it at Star Home Improvements. Before you implement this, read this caution note.

If you want this horizontal scrolling "recent posts" just below your blog Header, first you got to add extra "Add a gadget" to the blog Header section (more specific instructions at Adding "graphic" to blog Header)

When you have this extra "Add a gadget" (gadget were previously called page element), sign into Dashboard, click LAYOUT then the "Add a gadget" in the Head section. Chose the HTML/Javascript gadget:

HTML/Javascript gadget

then copy-paste this script into the HTML/Javascript gadget:

<script style="text/javascript" src="http://dreamydonkey.googlepages.com/scrolling_blogger_posts.js"> </script><script style="text/javascript"> var nMaxPosts = 15; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script>


Replace http://YOURBLOG.blogspot.com/ with you actual blog URL, preview, and if satisfied, save.

Caution

I tried varying some of the parameters (attributes) like changing

nScrollDelay = 175;
to
nScrollDelay = some number;

and got eratic results, among which were getting error messages when trying to access the edited blog like this one: Recreation and sport (blog only displayed by clicking OK in the error message. Would do more testing later if I find the time) (Update: managed to get rid of that irritating error message by changing templates, and finally by going to LAYOUT > EDIT HTML > click Revert widget template to default at the bottom of the page, publishing a few posts. Don't know exactly what cleared the problem. Will do somemore experimenting later)

Thursday, October 08, 2009

Make blog into book including photos

Many bloggers want to make their blog into a book and one possibility is Blog Collector. Unfortunately, Blog Collector cannot print photos.

Here is another possibility - Blog2print which can also print photos. Just give them the blog URL, set the date range, choose your book cover and add an acknowledgement or dedication if so desired, and Blog2print will generate a preview of your book including a table of content plus quote their prices.

If you are not prepared to foot out $24.95 for a 20 page hard cover book or $14.95 for soft cover, you can opt for PDF file for $7.95

Wednesday, October 07, 2009

How to delete Google Account


"This sounds weird, but how do I delete my google account?"

Strangely, I too had some problems when I first tested deleting a Google Account as it was not as straight forward as I thought. So here is a step-by-step instruction on how to delete your Google Account. Warning: Deleting your Google Account means you will not be able to access your Blogger account, gmail account or whatever Google Products you have signed up for. So be absolutely sure you don't ever want to access those accounts again later before you delete your Google Account.

First, sign into your Google Account. Then, next to My Products, click Edit.

Edit Google Products

At the next page, under Delete Account, click Close account and delete all services and info associated with it.

delete google account

At the next page, tick all the services and products shown and enter your password.

delete google account final step

Click Delete Google Account and your Google Account will be gone almost forever.

Related posts:
How to recover deleted Google Account (not fool proof)

Google Account deleted, cannot access Blogger.com, what to do

Tuesday, September 29, 2009

Motorcycle safety tip

This is not a normal Blogger Tips and Tricks post but a post with an important safety message on which your life may depend if you ride a motorbike. I do not know how many of visitors to this blog ride motorbikes, but the post Motorcycle safety tip - keep to the side of the road as far as possible has an important safety message and a horrific video of a motorcyclist being run over by a truck. I hope all who view that video will tell any motorcyclist they know about the motorcycle safety tip.

Do let those you know who ride motorbikes about that video.

Picture to link to label page or any webpage

"I have a picture on my side bar, I would like to link it to all labels containing say books. There are five post under that label, and when my guest push the picture of the books, I would like the page to pop up only the posts with the label, Books."

Well, that is easily done. First you have to be familiar with hyperlink, namely using <a href="URL of target webpage">anchor text (some text descriptive of target webpage)</a>. And since you want the link to go to the label page "Books", that URL will be the URL of the label page of "Books" which you can get by right-clicking on the label "Books" in the sidebar and selecting "Copy link location".

You also need to be familiar with uploading pictures to the web and getting the picture URL like what is described in Using Blogger to host pictures.

Now the required codes are

<a href="URL of target webpage"><img src="picture URL" /></a>

and if that is not clear enough, ask.

Saturday, September 26, 2009

Using Google Sites to host music files for hotlinking and embedding


Because the reliability of various third party web hosts are in question, I am now looking into using Google Sites for hosting music files for the purpose of hotlinking and embedding. I have done a test at Testing Google Sites for hosting music file for hotlinking (Click Play button , also, you may need to install Apple Quicktime) and the test is successful.

Using Google Sites to host music files for hotlinking and embedding

Go to Google Sites and log into your Google Account if necessary.
Click Create new site Create new site button
Give your site a name (Fill in the box for
Site name:....:
Google Sites will automatically create a URL for your new site
http://sites.google.com/site/.... (depend on availability)
(If the URL is not available, a list of alternatives may appear below. Tick one if suitable, otherwise repeat the "Give your site a name" process again)
You may fill in a Site Description if you want
Site Description:.... (optional)
Choose Share with (.) Everyone in the world can view this site
Choose a theme
Complete captcha
Click Create page Google Sites Create Page at the top right corner
Select a template (see screen shot below)
Google Sites choose template
Choose (.) File Cabinet
Choose (.) Put page at the top level (unless you are creating a homepage)
Give your new page a name (example "Music")
Click Create Page

Click Add file Google Sites Add file
Add a file from:
(.)Your computer
Click Choose File and browse to location where you have your music file stored)
Fill in the File Description
Click Upload and wait till your file complete uploading
When the file has finished uploading, the uploaded file will be displayed below. Right click on it and choose Copy link location to save the uploade music file URL into clipboard (see screen shot below):

Replace the URL of hot-linkable MP3 file in the embed code below:
<embed width="160" src="URL of hot-linkable MP3 file" autostart="true" loop="true" height="50"></embed>

with the music file URL that you have saved into clipboard. Edit autostart="true" to autostart="false" if you don't want the music to play automatically.
Paste the embed code into your post editor if you want the music player in a post or into a HTML/Javascript gadget if you want the music player in the sidebar or similar locations.

Related posts:
Install Apple Quicktime to make MP3 player work
Hotlink filehost and embedding music player
Invisible background music player
Testing embedding music player with Imeen
Embedding Imeen playlist
Embed eSnip music player in sidebar
Make music slideshows with Fliptrack
Add music to your blog another easy way
Adding music to your blog

Monday, September 21, 2009

Access blocked sites with proxy servers


For a long time, I have known that if a website is blocked (like how blogspot.com was blocked in China), one can use a proxy server to bypass the blocking, but have never tried it before. Recently, because the Malaysian government blocked Malaysia Today because the blog exposed what the Malaysian Cabinet tried to hide from the public information contained in this damning confidential Cabinet paper, I came across How to access Malaysia Today by proxy to beat the block.

Basically, this is what I gathered from that post. These are various proxy servers you can use:

Update: Those search boxes you see below are images of the search boxes of the proxy servers mentioned below. If you want to use the proxy servers, you will have to click on the links and search on those proxy servers sites themself.


Zend2.com

Surf over to http://zend2.com/ where there is a box (see screen shot below):

zend2.com proxy server

type in the URL (in that particular case, mt.m2day.org) and click Go!, and presto, the blocked site Malaysia Today is accesible again!!

Here are some more:

Free Anonymizer:

Free Anonymizer for browsing anonymously

Hide My Ass (has pop-up)

Hide my ass proxy server

Kproxy

Kproxy anonymizer

HAPPY SURFING AND THUMBS DOWN TO THOSE ATTEMPTING TO HIDE WHAT NEEDS TO BE REVEALED.

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