Monday, January 29, 2007

Expandable Post Summary for the New Blogger (formerly beta)

Update: Blogger have already implemented its own version of expandable post summary which they call JUMP BREAK and which require no or very little coding on your part. Being wanting to update this with a new post on JUMP BREAK but need pushing. If you are looking forward to reading a new post on JUMP BREAK, do give me a nudge at my contact form.


If you just want to read the instructions, click here
Update 3 March 2010: If your template doesn't have the line: div class='post-body'
look for
div class='post-body entry-content.
The above is from the comment of Kid Novice

Please also note that Blogger.com has recently introduced "jump break" which is what others call expandable post summary. Look out for a post detailing a test for their jump break,

What is expandable post summary

Expandable post summary is the term applied to blog posts where only short snatches (usually the first few paragraphs or sentences) are displayed with a link at the bottom that may say, usually, "Read More..." which if a reader is interested and when clicked, takes the reader to the full post. Expandable post summary is useful if you have the habit of writing long posts and you don't want your visitor to scroll through long line of text to see the next post in your main (home or index) page.

Instruction to implement Expandable Post Summary for New Blogger

To execute expandable post summary for your blog, the first thing you have to ensure is that "individual post page" (permalink) is enabled. Sign into Dashboard, then in the section for the relevant blog, click SETTINGS, then ARCHIVING and ensure that ENABLE POST PAGES is set to YES.

Next step: click the TEMPLATE tab, and highly advisable, click DOWNLOAD FULL TEMPLATE to backup your current template in case anything goes wrong or you want back your blog as they were before. Save it into a suitable folder with a suitable name like blog29jan07 or blog29jan07beforePostSummaryHack or something like that, so you can figure out why and when the template was saved. This is an important step you should take which you should not neglect. Make sure you have also backup the Page Elements as some will be deleted and some will become empty if ever you need to upload back your backup template. Then the backup Page Elements can help you quickly put back the deleted or empty Page Elements. See

Backup New Blogger template PLUS Page Elements and change new template

Backup New Blogger template PLUS Page Elements and edit template

The following instructions will need you to search for particular line of code in the template. There is a section "How to easily locate the code you are looking for" near the bottom of the post to help you quickly locate the code. So if you have problems is scanning through long lines of codes and do not know the trick on how to make it easier, scroll down the post and read that section first

Next, click EDIT HTML, then tick the "Expand Widget Template" and wait for the template to be fully expanded. In the template editor window, look for this line of code:

<div class='post-body'>

and just below that paste this code:

<!-- post summary hack begin -->
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<!-- post summary hack end -->


Note: I have added comments:
<!-- post summary hack begin --> and
<!-- post summary hack end -->
to mark the beginning and the end of the necessary codes. These comments are not essential, and do not do anything except to tell the reader of the program what the codes are for, where the hack begins and end and is a very common practice to document programs so that it is easier to read and understand, and to edit if necessary.

Amazon computer products

Now look for the following line of code which should follow immediately after the codes above:

<p><data:post.body/></p>

an then paste the following code after that line:


<!-- post summary hack begin -->
<a expr:href='data:post.url'>Click Here to Read More..</a>
</b:if>
<!-- post summary hack end -->


After the you have pasted the codes in the relevant places, the whole thing should look like this:

<div class='post-body'>

<!-- post summary hack begin -->
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<!-- post summary hack end -->


<p><data:post.body/></p>

<!-- post summary hack begin -->
<a expr:href='data:post.url'>Click Here to Read More..</a>
</b:if>
<!-- post summary hack end -->

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

where the codes in black are the existing codes and the codes in green are what you add in. When done, save the template.

What to do when you prepare your post

When you type your post, where you want the post summary to end, add in this code:

<span class="fullpost">


and then type in the rest of your post. At the end of the post, just add the last line of tag:

</span>


If you want to make the above task easier, you can go to SETTINGS > FORMATTING and then in the POST TEMPLATE, add in these lines:

Type your summary here
<span class="fullpost">
Type rest of the post here
</span>


then save the settings. If you do this, then each time you create a new post, the above codes will already be in the post editor window. Then all you have to do is to delete "Type your summary here" and replace it with the beginning of the post you want displayed in the post, then delete "Type rest of the post here", leaving <span class="fullpost"> at the place where you want the post summary to end, and type in the rest of the post. The last line of the post should be </span> which had already been added in by the post template.

For me, (and for you, if you understand completely what is explained above), I would just type in the post template the following:

<span class="fullpost">

</span>


and leave out "Type your summary here" and "Type rest of the post here". Then you will not need to delete anything, just type in the part of the post in the relevant section.

If you are still not clear about how you should go about typing the post, I append below one of the posts I have typed for the post What is a healthy diet (scroll down to the bottom of the scroll box to see where the </span> is placed):

What IS a Healthy Diet
by: Chris Chenoweth

There is so much information about what is healthy and nutritious these days that it is very difficult to sort out the hype from the truth. Following a healthy diet can be accomplished by making some simple adjustments to your current diet.

If you think it is just too much trouble to make some simple changes to improve your family’s diet, think again. Most people do not realize the incredible impact that a healthy diet has on our bodies, making the difference between poor health and good health.

<span class="fullpost">

Along with regular physical activity, a healthy diet is the most important factor that determines your weight. If you are overweight or obese, your chances of developing many diseases or conditions, including heart disease, diabetes, high blood pressure, osteoarthritis, and certain cancers, increase significantly.

EASY STEPS TO A HEALTHY DIET

Your first step to following a healthy diet is to make sure you include food from all food groups. Vegetables, fruits, whole-grains, legumes, lean proteins and low fat milk products should all be incorporated into your daily diet.

*VEGETABLES – A diet rich in fruits and vegetables can lower the risk of heart disease, stroke, and cancer. It also contributes to a healthy weight, reducing your risk of obesity and the conditions associated with it. There are a multitude of vegetables to choose from, the healthiest being dark green vegetables like broccoli, lettuces, and kale, orange vegetables like carrots, sweet potatoes, and squash, and red vegetables like red peppers and tomatoes.

*FRUITS – Eat a variety of fruits each day, canned, dried, fresh or frozen. Stay away from fruit juices as they can be high in sugar. (Unless you make the juice yourself.)

*WHOLE GRAINS – Choose whole grain cereals, breads, rice, and pasta. Read the food label and make sure the grain that is listed such as wheat, rice, oats or corn is referred to as WHOLE in the list of ingredients. Whole grains are an excellent source of fiber. Fiber can help reduce your risk of diabetes, heart disease, and cancer.

*LEGUMES – This class of vegetable includes beans, peas and lentils. They are low in fat, contain no cholesterol, are high in protein, and have phytochemicals, compounds that help prevent heart disease and cancer. They are also a good source of fiber. Add pinto, kidney, black and garbanzo beans, split peas and lentils to your daily diet.

*LEAN PROTEINS – Choose lean meats, poultry, and fish. Bake, broil, or grill it. Do not fry! Beans, nuts and seeds also provide protein.

*LOW-FAT MILK PRODUCTS – Eat low-fat yogurt, low-fat cheese or low-fat milk every day. Dairy products can lower your risk of diabetes and help build strong bones, reducing your risk of osteoporosis.

There are a variety of foods that should not be present in your diet except in very small amounts. These foods, such as sugars, alcohol, and some fats, contribute to diseases and poor health.

*SUGARS – Avoid foods containing sugar. You know what they are! Always check food labels to see how much sugar is present as some foods contain sugar that may surprise you.

*ALCOHOL – Avoid alcohol. If you must drink, limit intake to one drink a day. Alcohol can increase your risk of many conditions including some types of cancers.

*FATS – There are different kinds of fat in our foods. Some are detrimental to your health and others are very healthy.

1. Monounsaturated fats (olive oil, flaxseed oil, peanut oil and avocados)

2. Polyunsaturated fats (safflower, sesame, sunflower seeds)

These fats raise your good cholesterol levels. To stick to a healthy diet, choose foods with these fats.

3. Saturated fat and trans fatty acids raise your bad cholesterol levels, contributing to your risk of heart disease. Limit your intake.

Saturated fats are found in beef, veal, lamb, pork, lard, butter, cream, whole milk dairy products and can be present in processed foods like frozen dinners and some canned food. Always check food labels before purchasing.

Trans fatty acids, the kind of fats that increase the risk of heart disease, are formed during the process of creating cooking oils, shortening, and margarine and are found in commercially fried foods, some baked goods, and crackers. When checking food labels, make sure the ingredients do not include hydrogenated fats.

Following a healthy diet is a necessary step for the improved health of you and your family. It is not difficult to make the simple changes necessary to change an unhealthy diet to a healthy one. The advantages, better health, longer life, and more energy, far outweigh any inconveniences you may experience.

About The Author
Chris Chenoweth is the author of the DO-IT-YOURSELF HOME, HEALTH & MONEY GUIDE, 500 pages of household tips, home remedies, diet and nutrition information, health issues and thousands of recipes! Money Home Biz. If you would like additional information on healthy ways to lose weight, learn how to burn fat with one of the most effective and healthy fat-burning systems available, the BURN THE FAT program. Burn the Fat
</span>


How to easily locate the code you are looking for

To make your task of scanning the long lines of codes in the template, press ctrl+F and a Find [ ] will appear at the left of bottom of the browser. Tpye all or part of the code you are looking for and the scrollbar will scroll down to the part where the code is located and highlight it. See screenshot below:



Do all the necessary editing and preview. If everything seem OK, click "Save template" and VIEW BLOG" to ensure everything is OK

If this method don't work, click on the inside of the template editor window and press ctrl+A (or right-click and chose "Select all") to highlight all the template. Click ctrl+C (or right-click and chose "copy") to copy the template into clipboard, open a Notepad file, click ctrl+A again (or right-click and chose "Select all"), then click EDIT > FIND in the menu bar of Notepad at the top (or press ctrl+F), and in the "pop-up" FIND box, type or copy all or part of the code into the box and click "Find Next" and again the code you are looking for will be located and highlighted (see screenshot below):



Do whatever editing you need to do, then press ctrl+A (or right-click and chose "Select all") to highlight all the edited template in Notepad to copy into clipboard. Go back to the template editor. The whole unedited template should still be highlighted. Click the DELETE key and the template editor window will become empty. Paste the edited template into the empty template editor window, preview, then save.



Update 10 March 2007: There have been numerous enquiries about how to not display the "Read More..." link in short post with nothing additional to read. Unfortunately, this hack will place the "Read More..." even in short posts. Perhaps a good way to let your readers know that there is no more is to add in the word END OF POST. THERE IS NO MORE at the end of the short post.

This can be done by adding the HTML shown in the scroll box below:

<span style="color:red;">END OF POST. THERE IS NO MORE</span>
.

Alternatively, if you don't want "Read More" to appear in short post, refer to Testing Hackosphere peekaboo expandable post summary. This long post Guanxi. The First Word in Chinese Trade. On the other hand, a short post in the same blog Why the emphasis on things Chinese has no "Read More" at the bottom of the post.

UPDATE: This is in response to a reader who asked if the "Read More" can be made bigger. Yes, it can. The way to do it is simple. Simply surround the "Read More" with an inline CSS as follows:

<!-- post summary hack begin -->
<a expr:href='data:post.url'><span style="font-size:150%; color:red;">Read More......</span></a>
</b:if>
<!-- post summary hack end -->


I have, in addition to increasing the font size by 50%, have also changed the color to red so it is more visible. If you don't want the red text, just leave out color:red;

You can see this hack in this blog: Buy or Sell Advertising


Update 21 April 2007: Someone asked for help because she spent hours and couldn't implement this hack. The reason was she used a non-standard template and <div class='post-body'> didn't exist in her template. I had to spend some time to find the alternative place to paste the script for the hack. See the comments.

Update: 27 April 2007: A blog reader asked how to make the "Read More" link open in new window. I think it is not wise to have links to the same blog open in new window, but if you still want it, add target='_blank' to the script


<!-- post summary hack begin -->
<a expr:href='data:post.url'>Read More......</a>
</b:if>
<!-- post summary hack end -->


so that it becomes


<!-- post summary hack begin -->
<a expr:href='data:post.url' target='_blank'>Read More......</a>
</b:if>
<!-- post summary hack end -->


Update 16 May 2007: This hack will show "Read More" even for short post. You have another alternative. Have a look at this post: Testing phydeaux3 peekaboo expandable post summary

Update 22 May 2007: If you are worried about the effect of implementing expandable post summary for your blog, I did a test and it should have no effect. See post Expandable post summary and search engines

Acknowledgement: This post is a redo of Ramani's Expandable post summary with beta hack which I believe contain some additional information you should know when doing the hack plus I have attempt to make it easy, clear for those new to Blogger to follow the full instruction and implement it.

Sunday, January 28, 2007

How to link a spot on a page to another spot in a DIFFERENT page

Below are the instructions on how to hyperlink from a particular spot in a post of webpage to another particular spot in a
DIFFERENT post or webpage
. If you are looking to linking from one part of a page to another part in the SAME page, then refer to How to enable visitor to jump from one part of a page to another part in the SAME Page.

This is how you can link a particular spot in a page/post to a particular spot on a DIFFERENT page. Let's say you want this link Vitamin D to a particular spot on another post of another blog: Get a dose of sunshine. It is good for you, in particular to a particular word "Vitamin D" in that post, which can be the same or different blog.

What you have to do is to first get the URL of the target page, which in this case is:
http://foodasmedicine.blogspot.com/2007/01/get-dose-of-sunshine-it-is-good-for-you.html
.

The visible word "Vitamin D" (link) that you see above is surrounded by a pair of HTML hyperlink tag as shown below (it is the actual HTML to display the link "Vitamin D" above):
<a href="http://foodasmedicine.blogspot.com/2007/01/get-dose-of-sunshine-it-is-good-for-you.html#XYZ" target="_blank">Vitamin D</a>


Note that the link is followed by a name attribute #XYZ where the name attribute XYZ can be anything you want. Then in the post editor of that other blog, you surround the word "Vitamin D" by a title, paragraph or division tags, for example, <h2 id="XYZ">Vitamin D</h2>

This had been done. You can click on the link "Vitamin D" above and see where it takes you. Note that clicking on the link "Vitamin D" at the top of this page opens up a new window to a spot in the middle of a page with the word "Vitamin D". If you don't need the link to open in a new window, just leave out target="_blank" in the HTML.

Acknowledge: This post is a result of a tip from ces1977 of Thirty Is the New Twenty

Tuesday, January 16, 2007

Incorporate AdSense ads in your New Blogger blog post.

Stavanger of Blogcrowd Forum sent me an email alerting me to a post he did on how to incorporate AdSense Ads in your New Blogger (formerly beta) blog post. It involves some slight modification of the AdSense script, and I expressed my reservation regarding violation to AdSense TOS. However, Stavanger, wrote to AdSense Help Center, and received some vague replies that seem to indicate that slight modification of the code for the New Blogger is OK. I paste here the email he received:

"Hi,

You are permitted to make minor edits in Blogger Beta. However, please keep in mind that in general publishers are not allowed to alter the AdSense ad code for any reason. Once you've generated the ad code in your AdSense account pages, you may not alter any portion of the code or manually change the layout of the ads.

Thanks for your understanding.
Sincerely,

The Google AdSense Team"

Having received some kind of reassurance, I proceeded to test his hack in this blog: Good Parenting Practices and it worked. You can see AdSense ads (half banner) at the bottom of the first 2 post as I already have 1 skyscraper in the sidebar. Theoretically, there should be ads in the remaining posts, but they are suppressed by AdSense, so there are only the maximum 3 ad units in the main page.

If you want to see an example of a New Blogger blog with AdSense incorporated into the top of the post, look at this blog Recreation and Sport.

If you want to do it, check out his post Insert Google Adsense Into Blogger XML Post Body

This is how it is done. You generate the AdSense script from AdSense site, then replace HTML characters like < with script to display special HTML code etc. You can read more about it at Google AdSense In Blogger Beta XML Update. You can actually parse the script in Notepad using Replace All, but Stavanger has even made it convenient for you by giving a parser at Parse Google AdSense For XML Blogger:.

Update 28 April 2007: This update should have been made earlier, but I only recently review the post when I got a query from a blog reader. And alternative to replacing < with , etc, is to remove the comment tags and from the AdSense script. I have written to AdSense Help, but if my memory is OK, they did not reply. I also posted in a pinned message in the Google AdSense Help group and added to the subject "It is not OK. Will AdSense allow it" but found that the message was deleted and the subject was changed back to the original title.

Update 8 June 2007: I got a query from a reader in the comment and thought I would paste the reply to the comment here for general reading for everyone:

AdSense allows max 3 ad units, and if you have more than 3 posts in the main page plus an ad unit in the sidebar and an ad unit in the footer, you will get 3 ad units displayed in the main page. The rest of the posts will have the ad suppressed, and the ad in the sidebar and the footer wouldn't display either.

However, in the individual post page (only one post) the ad in the post plus the ad in the sidebar and the footer will be displayed.

The last time I implemented something like this, I contacted Adsense Support and they replied that it is OK for THAT blog, but didn't say anything about other blogs, so it is left hanging whether we can just implement it and leave AdSense to suppress additional ads or we have to get their permission each time we implement it. Anyway, you can either protect yourself by limiting the number of posts displayed on your main page, use this is at your own risk or verify with Adsense Support.


Update 22 2007: Actually new about this new feature in New Blogger sometime ago, but was reminded by an email from AdSense so I went ahead and tested it out. You can read about it at AdSense between posts direct from Blogger Layout (click BACK button to get back to this page).

Friday, January 12, 2007

Ways to enable your readers to contact you

If you want to interact with your readers, there are various ways, one of which is via the comment system. However, some may want to enable their readers to email them, like I do. The standard way to do so is by using the HTML mailto link like this:

<a href="mailto:email address">Click here to eMail Me</a>

However, some people do not like that because that email address you put in the link can be harvested by robotic programs for spam. However, I have created a Gmail address specially for this purpose, and used the links for my blogs, and it has worked OK so far. I do get spam, but Gmail spam filter is very good and practically all ended up in the spam filter and only an occasional few get through which is simply dealt with by deleting.

There are also other ways for you to let your readers reach you. One of them is showing your email address in your profile. Another way to to generate a graphic that shows your email address either by yourself with a graphic program, or to use email graphic generators like E-Mail Icon Generator which can generate a graphic such as this one: graphic email text to hide email address from email address harvester. In this case, your reader will have to manually type in the email address into their compose window of their email program. In this way, your email address will be visible to your readers who can read the graphic, but the email address will be hidden to the email harvesters as they cannot read graphic. You can see an example of this in the blog Site Promotion Tips. It is at the bottom of the right sidebar, below the Profile.

To put this in your blog, if you are using the New Blogger template, get into Layout, click "Add a Page Element", in the pop-up, select "HTML/Javascript> and paste the script generated as described above into the box, and add a title like "My Email address". If you are using the old template, you will have to add the script direct into the template. As a guide to where to paste your script, see post Blogger template tutorial: Adding content via the template (click "BACK" button to get back to this page).



  NEWER POST    HOME  OLDER POST

Thursday, January 11, 2007

Recent posts widget using feed and script generator

Note: A number of inconsitencies have been found as I am editing this post. I will have to do many tests later and reedit this post. Please be patient.

A reader asked for a hack for RECENT POSTS for the New Blogger (formerly beta). Have a look at this list of posts in this blog Natural Remedies. The RECENT POSTS is at the second from the bottom of the right sidebar, just above the "Contact Me" link.

You can generate a Javascript to put into your Page Element to display any number of posts you want, including all. The script generator is at http://itde.vccs.edu/rss2js/build.php.

You will have to enter the feed URL for your blog which will take the form of
http://yourblog.blogspot.com/rss.xml or
http://yourblog.blogspot.com/feeds/posts/default?alt=rss or

(substituting "yourblog" with the actual URL of your blog and respond to a number of choices as shown in the screenshot below (click to enlarge):

Feed2js Recent Posts widget generator

If you select the number of items to display to zero, then all the posts will be listed. I have limited it to 8 as showing all posts will give a very long list. Putting "Show item descriptions?" as 0 will give no description, 1 will give full description, and n>1 will display the first n characters of the description. The rest are self-explanatory.

I chosed "1=show full description text". When you are finished, click "Generate Javascript", highlight all the script by clicking inside the script box and press ctrl+A keys (or right-click and select "copy") to copy the script into the clipboard.

It will be good if you are using a browser like FireFox which has tabbed browsing (FireFox is also recommended by Blogger). Then you can open a new tab and log into your Blogger account to get to the Dashboard which will show a list of all your blogs. Click LAYOUT for the relevant blog and click ADD A PAGE ELEMENT in the section you want the "Recent Posts" to be (most likely in the sidebar). Select HTML/Javascript and paste the script from the clipboard into the box. Preferably type in something like "Recent Posts" or something like that in the title, then click "Save Changes". This new Page Element will appear at the top of the section. If you want it elsewhere, hover your mouse cursor over the new Page Element. The cursor will change to a cross. Drag it to wherever you want. In the above case, I dragged it to the second last in the right sidebar section,. Click "Save" at the top of the LAYOUT and if you want to see the result, click VIEW BLOG.

I used
http://foodasmedicine.blogspot.com/feeds/posts/default?alt=rss
for Natural Remedies and tested adding a new post. When I view the blog after publishing the new post, I could not see the latest post in the list of "Recent Posts", so I tried again with another blog Medical Matters using

http://medical-products.blogspot.com/rss.xml

and also this time chose "Show title and description"

(the "Recent Posts" is at the second from the bottom of the right sidebar, just above the Profile. I published a new





http://foodasmedicine.blogspot.com/?










copy the generated script, go to the Layout of your blog, click "Add a Page Element", then select HTML/Javascript, and paste the script into the pop-up window. In the pop-up for the "Add a Page Element" widget, put in the TITLE "List of Post" so that your list of post will have a visible heading.

Just a little note. Whenever you add a script into a Page Element, it is good to add a comment (not seen on the web) which tells what the script is for. This is so that when you know what the script is for. In my case, I have added the comment
<!-- list of posts hack --> at the top of the script so that I will know what the script is for. Comments are not displayed on the Webs, and are good to document codes so that one will not forget what it is for.

<!-- list of posts hack -->
<script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Ffood-drinks-and-recipe.blogspot.com%2Frss.xml&chan=n&num=0&desc=0&date=n&targ=n" type="text/javascript"></script>

<noscript>
<a href="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Ffood-drinks-and-recipe.blogspot.com%2Frss.xml&chan=n&num=0&desc=0&date=n&targ=n&html=y">View RSS feed</a>
</noscript>


UPDATE: This hack does not seem to be working. Using the above feed URL, a List of Post is produced which does not show new posts added. I tried another URL, in this case, http://food-drinks-and-recipe.blogspot.com/feeds/posts/full. The first time, it was added, it showed a list of post. The moment a new post is added, all the post titles disappeared.

UPDATE 23 January 2007: Someone commented in this post about using JSON. Did a Google search for "JSON blogger beta" and found this: JSON on New Blogger and a backlink to Blogger Hack for recent comments and posts. Added what I found in that blog, changed "comment" to "post" and got a list of post but with the title RECENT COMMENTS". Anyone knows how to change that to RECENT POSTS?

UPDATE 23 January 2007: Found another hack at Beautiful Beta: Widget Installation and download page. The result of the hack is at the bottom of the left sidebar at Food, Drinks and Recipe. So now, you have 3 methods of adding List of Recent Posts.

  NEWER POST    HOME  OLDER POST

Monday, January 08, 2007

Newer Article link, Home link, Older Article link, at bottom of every post

I did a post How to have Previous and Next links at the bottom of every posts. Actually it should be titled "How to have NEWER POST, HOME, OLDER POST links at the bottom of the post" as that is what I have decided to do for this blog.

I have decided to redo the post for the following reasons"

1. I used tables for this blog. A reader commented he didn't like tables
2. Another reader asked how she can have the title of the posts rather than NEWER POST and OLDER POST in the links. It is very hard to answer in the comments, so I promised to answer in a new post.
3. I did not describe how I easily obtained the links to put in the codes for the links.
4. old (classic) Blogger is being phased out, and is being replaced by the New Blogger (formerly beta) blogs. This will be good for those without any HTML knowledge and don't want to tangle with it. However, I am betting that there will be a few die-hards who will want to stick to the old (classic) template, as with a little HTML knowledge, it is easier to have better control over the "look and feel" of the blog. This hack, for example, will be with 2 types of links in the new Blogger. The links as a result of this hack and the NEWER POST | HOME | OLDER POST that is automatically put there by the New Blogger.

So here I am doing a new post. First, look at the result of what I will be describing in this post: The Mayo Clinic diet and the 7 rules of dieting. You will see both what we are trying to achieve in this post (at the bottom of the post) and what is put there automatically (NEWER POST | HOME | OLDER POST at the bottom of the comments (That is a New Blogger Blog). Click on the links and see how it works.

Method

If that is what you want, this is what you need to do. Sign into Dashboard, select the blog, click SETTINGS > FORMATTING, then at the bottom of the page, in the box for the Post Template, add this into the box:

<a href="Newer Article URL">Newer Article title</a>special character for HTML non-breaking space|special character for HTML non-breaking space<a href="Main page URL">Home</a>special character for HTML non-breaking space|special character for HTML non-breaking space<a href="Older Article URL">Older Article title</a>


Note that special character for HTML non-breaking space is an image, not a text, so if you are copying the codes from the box above, you will have to manually type in the character, which is the HTML for a non-breaking space to put some space between the links. Now each time you create a post, the codes will be included in your post, and you have to do is to substitute the New Article URL with the actual URL of the new article, the Main Page URL with the actual URL of your main page (this is better done in the post template, so that you don't have to do it each time you do a new post), the Older Article URL with the actual URL of the older article, and the Title of the Older Article with the actual article of the older article.

How to get the URL's and the titles

I would suggest that if you do not already have FireFox browser installed in your computer, you download it from this site: FireFox Alert or direct from this blog by clicking on the "Get FireFox with Google toolbar for better browsing" link at the top of the right sidebar. This is because FireFox has tabbed browsing and will help you greatly in this task.

Now when you modify the codes given in the above box, you will need the post URL and title. The easiest way to do this is the following. Assuming you are still in the post editor and using the FireFox browser, middle click on the EDIT POST tab at the post editor (or right-click and select "Open in New Tab"). A list of all your post will appear in the new tab in the same window. To get the URL of the relevant post, right-click on the VIEW link and select "Copy Link Location", then go back to the post editor tab, and paste the URL in the relevant place. Regarding the post article title, you can either refer to the title in the list of posts and manually type in the post title, or if you want to copy-paste, right-click on the VIEW link and choose "open in new tab", then in the new tab, just highlight the title, return to the post editor tab and paste in the post article you have copied.

Since in your previous post, you don't have a NEWER POST and likely didn't put in the link for the latest post, click EDIT POST and the list of post including your latest post will appear. Right click on the VIEW tab against your latest post, click EDIT against the previous post, then add in the link (and also add in the new title) in the post editor, then publish.

If you already have a lot of posts, and you want to do it for each post, then copy the above code, substitude the Home URL with the actual url of your main page, then copy again. This is so that you don't have to do it in each post. Click EDIT against those old posts you want to add the link, , paste the modified codes at the bottom of the post and repeat the process described above.

Now if you understand what is going on, you will be able to modify my instruction to do whatever you want done. If you still have questions, put them in the comments and I will try my best to answer.

  NEWER POST    HOME  OLDER POST

Saturday, January 06, 2007

Own domain for blog hosted with Blogger: Why and how?

Just read this interesting news that you can have your own custom domain, still use the Blogger platform and not need to get someone to host the blog because Blogger will host it for you for free! And you need not bother with FTP (File Transfer Protocol)! You don't even have to find someone to host your blog and pay for the monthly/yearly hosting fees! This is indeed good news for blogger who want their own domain like xxxxx.com instead of a sub-domain xxxxx.blogspot.com. See How do I use a custom domain name on my blog?. This is only for those who are using the New Blogger (formerly Blogger Beta), not for those still using the old (classic) Blogger.

Why own domain

First, why some people want their own domain like myblog.com instead of myblog.blogspot.com. People have compared using blogspot for their blog to having a free Yahoo! or Google email address. They say having an email address like myname@mysite.com command more respect than having an email address like myname@yahoo.com. For me, I may quote the difference between having your business office at a proper office address rather than your own home.

Also, you have more control over your site. You own the site, not Blogger. Blogger can't take the site away from you. However, to be fair to Blogger, Blogger doesn't take away your blog (even blogs which have been neglected by the creators with no post or no update for umpteen years, much to the chagrin of those who wants those particular URL), except for what they identify as spamblogs.

How

It is pretty simple. The first step is to register a domain (.com, .net, .org, .us, .co.uk, etc). A place which has gained a reputation for cheap domain registration is godaddy.com. There are many others.

The next step is create a CNAME record for your domain with the DNS (Domain Name System) with the registrar. (I will explain what DNS is all about below so it does not interfere with the flow of the instructions here) The instruction on how to do it you can get from the registrar. For example, if you register the domain with godaddy, the instructions are given here: Creating Your CNAME Record: GoDaddy.com. For your convenience, I reproduce here the instruction so you have an idea of what is involved so that you can see it is not something very complicated:


1. Log in to your account at www.godaddy.com.
2. Open the Domains tab and select My Domain Names. You'll be directed to the Manage Domains page.
3. Click the domain that you'd like to use with Google Apps for Your Domain.
4. Click the Total DNS Control And MX Records in the box entitled Total DNS Control.
5. Click Add New CNAME Record. If you've already created a CNAME record for your website's address with Google Apps, click Edit next to the existing CNAME record.
6. Step 1: Enter the part of your website's address that you picked in your Google Apps control panel. For example, if you picked urban.mydomain.com as your address, enter urban for step one.
Step 2: Enter ghs.google.com as the host name.
Step 3: Leave as default selection.
7. Click Continue, and then click Add. If you're editing an existing CNAME record, click Continue and Update.

Congratulations! Your CNAME record is now configured to point to Google. Keep in mind that changes to DNS record settings may take up to 48 hours.



Now that you have the CNAME record, you log into the new Blogger Dashboard, select the blog, click the SETTINGS > PUBLISHING tabs, then click "Custom Domain" (see screenshot below. Click to enlarge:)
New Blogger (formerly beta) Custom Domain
You will be then taken to a page where you enter the URL of your new domain (see screenshot below:)
New Blogger Custom Channel Part 2
When you are done, just click "Save Settings". Then all you have to do is to wait a couple of days for your blog to be viewable at your new URL. Reason for the delay is given below.

Why I will not be changing to custom domain names for my blogs

Yes, there are people who do not respect a person who has an email address like xxxx@yahoo.com. Yes, there are people who will not do business with someone who maintain an office at his own home. However, I believe that respect is earned, not bought. The respect that a blog command should depend on its content, not whether its URL is xxxx.com or xxxx.blogspot.com. Further, I do not want the bother of having to renew my yearly subscription for the domain name. If something happen to me and I cannot be around to renew the subscription, my blog will still be on the Web. If you use a custom domain, you will have to ensure by hook or by crook the subscription is renewed whenever it is due. I don't want that problem.

Anyway, there are a great diversity of people, preferences, opinions, requirements, etc. To each his own.

DNS (Domain Name System)

The Internet consist of a multitude of devices like computers, printers, Internet fax machines, etc. connected in a massive network sharing information with each other using a language called Internet Protocol (IP). Each of these devices have a unique IP address which is a number like 60.48.216.107. An IP address can be equated with a house address or telephone number in the physical world. However, numbers are hard to remember compared to an URL like http://blogger-tricks.blogspot.com. So, to make life simpler for folks like you and me, there are DNS servers that store information associating each URL to a unique IP address. So, rather than typing the series of numbers associated with my blog, all you have to do is to type in blogger-tricks.blogspot.com into the address bar at the top of a browser and the DNS server will translate this into that unique number that bring you to the server that store the files for this blog.

Now the reason for the delay between adding the CNAME record for your domain with the DNS (Domain Name System) with the registrar and the time the blog at the new URL gets online. Your registrar will have to give the relevant information to a DNS server, which will then inform all the other servers in the Internet, and this take time.


UPDATE 12 January 2007: There have been some complaints about the difficulites using custom domain for the new Blogger blogs. See threads
Thread 1
Thread 2
Thread 3
Thread 4
and a few more. Looks like it is better to hold off using custom channel until the dust clears.

UPDATE 18 January 2007: There have been many problems regarding custom domain and getting a domain from Godaddy. For a first hand account of how Chuck goes about it, have a look at his post: Google Custom Domain: Case Study # 1

NEWER POST HOME OLDER POST

Friday, January 05, 2007

How to change language if you are an expat in a foreign country

There have been complaints of people whose mother tongue is, for example, English, but is living in a foreign country, eg. Japan. When they log into their Blogger Dashboard, it is all in that foreign language and they have problems understanding it. For such cases, it is easy to change the language even if you are living in a foreign country. Sign into Dashboard, then at the top right hand corner of the Dashboard is this:

new EDIT PROFILE with drop-down menu for language choices

Right at the bottom is a section "Language" with a drop-down menu. Click the down arrow and a long lists of available languages will be shown. Selectg your preferred language and your preferred language will automatically be saved.

Amazon products for languages

There is also another setting you can do. In the Dashboard, for the relevant blog, click SETTINGS, then click the FORMATTING sub-tab. Somewhere in the middle of the page will be a drop-down menu to set the language for the blog:

FORMATTING SETTING  language drop-down menu

Click the down arrow and select your preferred language. Then at the bottom of the page, click "Save settings".

Amazon products for expatriate

If that still didn't get the effect you want, you may have to change the language option of your browser.

For FireFox, in the menu bar at the top of the browser, click TOOLS > OPTIONS and in the pop up, click the "Advanced" tab . Then in the "Languages" section, click "Chose":

Firefox Tools Options Advanced Languages Chose

In the second section which is a drop-down menu for "Select a language to add...", click the down arrow and select your preferred language. Once you select the language, the "Add" button will become active. Click that. The rest, I have never tried because I have no need to change the preferred language of my browser, and you are on your own from there.

BTW, if you are like the majority of surfers who only have Internet Explorer, you should seriously consider getting the FireFox browser. I would highly recommend it, and if you go to FireFox with Google toolbar, you will see a screenshot of a section of a page from Blogger Help where Blogger recommend Firefox.


  NEWER POST    HOME  OLDER POST

Thursday, January 04, 2007

How to change the color of your hyperlink

Someone commented in blog Blogger for Dummies and I went to his site Dogs Puppies Training and Care by Kevin the Collie. I noticed in his header a link which was in dark blue which merged into the dark green background and thus became almost invisible. I don't know if the color was controlled by the CSS (Cascading Style Sheet) or not, but in any case, if you want a link to be of a certain color, you should write the link in the following way (assuming you want it to be in red): <a href="URL><span style="color:red;">description</span></a>.

Update: Someone asked whether it is possible to post things other than hyperlinks in color. Sure. Just enclose the text with the <span style="color:red;"> and </span> tags. For example you want these text to be in green, just put <span style="color:red;"> in front of "these" and </span> after "green"

  NEWER POST    HOME  OLDER POST

Monday, January 01, 2007

Create and Embed Youtube Playlist


From a comment at Google sites to host and hotlink music files

"ok I have loaded a list, how do I play more than one song?"

Haven't studied how to create playlist with Google Sites (check back later), so I tried using Youtube and tested it twice - Test embedding Youtube Teresa Teng playlist (my favorite singer who unfortunately died young) as well as Test embedding Youtube Bee Gees playlist (bring back memories of the good old times), and here are the steps I took to embed those 2 playlists:

Create a Youtube if you don't already have one and sign in. Either upload your own videos with music or search for those songs you want to include in your playlist. At the page showing the selected video, click + Playlist:

Youtube plus playlist

Update: A commentator has drawn my attention to a change on how to create playlist and the screen shot above can now be replace by a new screen shot below where you hover your mouse over "+ Add to" and then click on the drop down choice:




Give your new playlist a name, then click ADD. Search for more videos and repeat the ADD process till all the videos you want have been added.

When done, click the down arrow next to your Youtube username at the top right-hand corner of the page and select ACCOUNT:

Youtube to select Account

At the next page, click Custom video players:

Youtube custom video player

then click Create custom player. Give your player a name and enter some description, select the color theme, the layout, then under CONTENT, highlight the playlist, then click SELECT:

Youtube Playlist Select

Next, at the section for Generate Code and Save Player, click GENERATE CODE and you will get a script similar to the one below to copy-paste into your post editor or into a HTML/Javascript gadget:

<object width="416" height="337"><param name="movie" value="http://www.youtube.com/cp/vjVQa1PpcFNYcUl_cZNmLaxf1CI296PUeiBMfZ3_X9k="></param><embed src="http://www.youtube.com/cp/vjVQa1PpcFNYcUl_cZNmLaxf1CI296PUeiBMfZ3_X9k=" type="application/x-shockwave-flash" width="416" height="337"></embed></object>


Note width and height (in red). If you want to edit the codes so that the width of the embedded video player is commensurate with the width of your main column or the sidebar, use the method to resize Youtube video with no distortion so that it fits nicely into your post or sidebar.

width of

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