Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Mar 24, 2007

Digg This Story

Background Image for Blogger Template

With this guide, you would be able to add a background image or picture to your Blog, customize the position of your image, and have a static background image that stays in place when you scroll through the contents of your blog.

You will need to create an image. Find a picture you like. If you need a free photo editing tool, you can either search the net for one or use Google's Photo Editing Software Picasa. You can also use a small tile-size image which can be repeated so as to cover the entire page. Try not to have an image file that is too large as your page may take a little longer to load.

After creating a picture, you will need to upload it onto a free picture host. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL.

Next, log in to your dashboard layout; under Template -> Edit HTML, scroll to where you see this:-

body {
background:$bgcolor;


Change background color

If you would like to change the background color of your blog to a very unique color, you can manually specify the color value. Search online for color codes, or take a look at the HTML Color Chart to see if you can find your desired color. For example, if you have chosen a color code #B38481, change the above code to this:-

body {
background-color:#B38481;


If you are changing the background color of your sidebar only, add the color code under the relevant sidebar heading.

#sidebar-wrapper {
background-color:#B38481;


Similarly, if you want a different color for your main post column, add the color code as follows:-

#main-wrapper {
background-color:#B38481;


Note that different templates may label their stylesheets differently. The #sidebar-wrapper may be called #side-wrap or something to that effect.

In some templates like the TicTac Template, the background color you see is due to a background image and inserting a color code into the template will not help. To have a different color, this background image will have to be edited. For more details, read the article on Background Color of TicTac Template.

Add a background image

The code to insert is this:-

body {
background-image: url(URL address of your image);


Remember to insert the URL address of your image in the brackets. If you would like to have a feel of how a background picture will look like, I have uploaded a test image at this address – http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg

Insert the URL of this test image into the above brackets and Preview your blog.

You can also have a background image just for your sidebar. Locate the style and add the background image code accordingly.

#sidebar-wrapper {
background-image: url(URL address of your image);


For a background image to your main post body only, add the code here:-

#main-wrapper {
background-image: url(URL address of your image);


Repeat background image

By default, the image is repeated to fill up the entire background of the page. If you have a small or tile-sized image, it will appear like a print pattern in the background. Sometimes, you may choose not to have the image repeated. If that is the case, you can insert this code:-

background-repeat: no-repeat;


Alternatively, you may only want the image to be repeated horizontally. The code is this:-

background-repeat: repeat-x;


To have the image repeated vertically, the code is this:-

background-repeat: repeat-y;


Position background image

If you have an image that is not repeated, you may like to specify the exact position of this image on your page. The HTML code to be inserted is this:-

background-position: top left;


Your image will appear at the top left corner of your page. The other possible values that you can use to replace “top left” are:-

top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;

If you do not want it entirely left, right or center, you can also define the horizontal and vertical alignments either in percentage or in pixels. Use either of these values instead, with x being the horizontal value and y being the vertical value.

x% y%;
xpx ypx;

Static background image

After that, you may specify whether you want your background image to remain in a fixed position when the contents of your blog are scrolled. By default, the picture scrolls with your content. To have it stay put, the code to insert is this:-

background-attachment: fixed;


Putting it all together

The eventual CSS code that you will have for your customized template may look like this:-

body {
background-color:#B38481;
background-image: url(http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;



You can also combine the attributes into one line and the shorthand code will look like this:-

body {
background:#B38481 url(http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg) no-repeat center center fixed;



Putting the above code into my blog, this is what you would see.

Background Image for Blogger Template

Of course, after having added the background image, you will need to adjust the colors of your text so that they stand out against the backdrop. Go to Template -> Fonts and Colors to do that.

This guide will give you an image background to your Blog. Sometimes, you may have several images, all of which are suitable for your Blog. You can read Random Header and Background Images on how you can have the background images rotated and a random image shown upon every page load.

You may also want to refer to the related article if you are thinking of adding an image to the Blogger Header.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Mar 20, 2007

Digg This Story

Add Picture Banner Link to Blogger Header

Update:

With the latest Blogger feature, there is an easier way to insert a background image to replace your Blogger Header. The image is also clickable and links to your Blog's main index page. The steps are discussed in the article Background Image for Blogger Header (New).

However, by using the new feature, the image appears in the center, as a background to the title. For those who want more control over the position of the picture, like having the picture appear on the left or on the right of the title, it may be better to follow this guide. After inserting the background image, use the instructions in the section titled “Align Header Image, Title and Description” to position the picture and adjust the title and description text.

This guide is about adding an image or picture to your Blogger Header to replace the Header Title, and to add a unique personal touch to your Blog. At the same time, we would like to have a clickable Blogger Header so that anybody clicking on it will be brought directly to your Blog's home page. For purposes of search engine optimization (SEO), we would include a text in the code so that the title of your Blog can still be read by search engine spiders despite your removing the Header text.

Before we begin, if your intention is simply to add a background picture to the Header, but still retaining the Header text and description, please refer to my other article on “Background image for Blogger Header” or the article “Background Image for Blogger Header (New)”.

Next, you will have to enable additional Page Elements to your Header section. When you log in to your dashboard, and go to Template -> Page Elements, you should see an option for you to add a Page Element above your Header.

Add Picture Banner Link to Blogger Header

If you don't, please refer to the related article on “Add Page Element to Blogger Header and Blog Posts” to see how you can enable the option to add further page elements to your Blogger Header. (NB.: I am referring you to the other article as I do not wish to repeat the steps here, making this article unbearably lengthy.)

Add picture without link to Home page

This is simple. If all you want is to have an additional picture or image above or below your Header text, click the “Add a Page Element” link and select “Picture” to upload the image from your computer. Save and refresh.

Add picture with link to Home page

Instead of uploading the picture, you will need to create a link. To do this, you need to have the picture uploaded somewhere. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL.

Now that you have the picture URL, click “Add a Page Element” in your Header section and this time, choose “HTML/JavaScript”. The HTML code is as shown below:-


<a href="YOUR BLOG URL" title="YOUR BLOG TITLE"><img src="YOUR PICTURE URL" alt="YOUR BLOG TITLE" /></a>




Allow me to explain:-

1. Insert the URL of your Blog beginning with http:// into the portion marked red.

2. Insert the picture or image URL into the part in blue. This is the direct link to your picture that is uploaded onto Google Pages, Photobucket, Blogpulp, or whatever image host that you use. To check whether the link is correct, you can copy and paste it into your browser and press Enter. You should be able to see your image.

3. Insert the title of your Blog into the part marked orange. You will notice that there are two attributes – ALT and TITLE – bearing your Blog Title. The ALT attribute is an alternative text description for images. For browsers that are unable or are slow to read images, this text will be displayed instead. The TITLE attribute is not restricted to images and can be used for any page element. In most browsers, hovering your mouse over the link will show this title. It is widely believed that adding these texts will boost your Blog's accessibility by search engine spiders. Whether or not that is true, there is no harm putting these in to aid the search engine ranking algorithms.

When you have inserted the HTML code, press Save, refresh the Home page and you will see the Header picture.

Align Header Image, Title and Description

Update: The following section talks about the method to have a picture on the left side of the Header and the Title on the right. In addition to this guide, we have an article in our FAQ giving you tips on how this can be done. If you want a guide on general alignment of the Title, Description and Header background images, we have other articles explaining how you can move the Title, Description and image to the center, or towards the left or right of the Header. Follow the guide on Header Image and Title Alignment (I) if you are using the Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe template. Go to Header Image and Title Alignment (II) if yours is a Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar or Simple II template.

Should you want the Header picture to be beside the title, and not as a background to the title, follow the guidelines in the above section “Add picture with link to Home page” to insert the picture in the Header.

Next, if you are not linking your picture to the Home page, amend the HTML code to this:-

<img border="0" src="YOUR PICTURE URL" alt="YOUR BLOG TITLE" width="100" height="100" align="left"/>


If you are linking the picture to the Home page, the HTML code will be this:-

<a href="YOUR BLOG URL" title="YOUR BLOG TITLE"><img border="0" src="YOUR PICTURE URL" alt="YOUR BLOG TITLE" width="100" height="100" align="left" /></a>


Change the width and the height of the image to suit your requirements. If you want the picture on the right of the Header, change the word "left" to "right".

An example of a picture on the left of the Header is this:-

Add Picture Banner Link to Blogger Header

Notice that the Header and the Description are in the center of the Header. If you would rather have this:-

Add Picture Banner Link to Blogger Header

where the Header and the Description are at a fixed position from the picture, under Template -> Edit HTML, scroll to this line and remove the code (shown in red):-

#header {

text-align: center;


Next, scroll to this line and add the code (shown in red):-

#header h1 {

margin-left:150px;


This gives you control over where exactly you want the Title to appear. You can change the 150px to other values and Preview the template to look at the position of the Header.

To shift the Description, scroll to this line and add the code (shown in red):-

#header .description {

margin-left:150px;


To have an idea how wide the margin would be, the Header and Description in this Business Fables Blog is set at margin-left:230px.

You may see in your stylesheet a margin like this:-

#header h1 {
margin:5px 5px 0;


For those who are familiar with the shorthand for margin code, you can insert a fourth value to define the left margin. Otherwise, it is alright to insert a margin-left:150px; after that.

Remove Header Title

Go to Template -> Edit HTML. Scroll to where you see this code where your blog title is shown in the part marked orange:-


<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>




Change the locked='true' to locked='false'. Save and click the “Page Elements” tab. When you “Edit” your Header, you will now see a “Remove Page Element” option. Remove it if you want, and refresh the your home page. You should no longer see your title displayed.

Create Banner Link

Here, we are referring to animated picture files. You can create one using GIF Animator programs or free online softwares. Key in search words like “free online banner generator” into your search box to look for sites that offer services to create your free banners.


After creating the banner, you would have to host it on a free picture host. Look up the list of free Image Hosts and File Hosting Services. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. The steps to insert it into the Header are the same as outlined above in “Add picture with link to Home page.”

Remove border around Header

When you go to Template -> Edit HTML, you will see somewhere near the top a style defined for the #header-wrapper and #header. There is a setting for the border. It may be at 1px width with a solid, dotted or whatever line, of a certain color. To remove the border, either delete this setting entirely or change the 1px to 0px width. Preview the template and if you like what you see, save it.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Mar 18, 2007

Digg This Story

Add Digg button to Blogger or Blogspot

This is a step-by-step guide to automatically place a real-time Digg count and vote button to every single blog post. Digg is a social content website where your readers or you can submit content to. If you have a good story, members will 'digg' the post and write comments. As a blog owner, you may want to make it easy for and encourage your readers to submit and digg your articles.

Automatic Count and Vote Button

Before you do that though, you would want to take note of the following:-

1. Your blog should be set to save Post Pages. Post Pages are archived blog posts published to their own web page. Each post will have a unique URL, which is required by Digg for the individual posts to be submitted. To verify or enable it, login to your Blogger Dashboard. Under Settings-> Archiving, set the “Enable Post Pages?” to “Yes” and save the settings.

2. This template hack will put a Digg button to every post. You are therefore not able to choose which post you want to include or exclude a button. If you would prefer to have a Digg button added only to some posts, read the later part of this article on “Button for selective posts.”

3. The code reads the URL of the individual blog page and this shall be the URL used for submission of the story to Digg.

Under “Template”, click the “Edit HTML” tab. Block copy the entire HTML code for your site and save it in a text file. You can also click the "Download Template" link. This is one of the two necessary steps whenever you want to change the template. The second step is of course to “Preview” the new changes, and save the changes only when you are satisfied. The backup you have saved in a text file will come in handy when you accidentally click to save the changes without previewing them. With a backup, you can easily restore the template to the prior state if need be.

Add Digg button to Blogger or Blogspot

Click the box next to “Expand Widget Templates”. Scroll about two-thirds down the template to look for the code that reads:-

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




If you want the button to show at the top right corner of your post, replace the above code with this.

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>


This is what you get:-

Add Digg button to Blogger or Blogspot

If you would like the button to appear at the end of your post, replace with this following code instead.

<p><data:post.body/></p>
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>


The result will be this:-

Add Digg button to Blogger or Blogspot

If you want to have the button at the top left corner of your post, change the alignment.

<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>


The outcome is this:-

Add Digg button to Blogger or Blogspot

Digg has another compact button. If you insert this code:-


<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
digg_skin=&quot;compact&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>


You will see a compact Digg count button like this:-

Add Digg button to Blogger or Blogspot

You can also change the background color of the button to blend with your site. For example, a code like this:-


<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
digg_bgcolor=&quot;#BDEDFF&quot;;
digg_skin=&quot;compact&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>


will give you this:-

Add Digg button to Blogger or Blogspot

You can insert the color code of your choice into the red portion. For a list of color values to insert, you may refer to the Hexadecimal HTML color code list.

Automatic Count Button in Blog Footer

[Update] This segment is added in response to user's request to have the Digg button in the Blog footer, i.e., after the labels. If you scroll through your template, you will see this chunk of code which gives the labels in your Blog footer.

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>


If you want a Digg button to appear just after the labels, add the appropriate Digg button code right after the above code. For example, if you want the compact Digg button, add this code below the labels code:-


<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
digg_skin=&quot;compact&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>


The resulting layout is this:-

Add Digg button to Blogger or Blogspot

Move the Digg button code above the labels if you'd like. Experiment a little. Just remember to preview the template and not to save it unless you are satisfied.

Digg Button in Blog Footer

If you do not want to see an Automatic Count button, you can also place a link button into the template. This button will appear at the bottom right corner of every post and readers can click it to submit that post to Digg.

Scroll to this part of the template and insert the lines (in red):-

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<div style="float:right; margin-left:10px;">
<a expr:href='"http://digg.com/submit?phase=2&amp;url=" +
data:post.url + "&amp;title=" + data:post.title'
target='_blank'><img border="0" alt="Digg this" src="http://digg.com/img/badges/91x17-digg-button.gif"/></a></div>



With the code, this is what you will see at the end of every post.

Add Digg button to Blogger or Blogspot

You can change the position of this button. Go through what we discussed earlier in this article to understand where to place the code if you should want the button to be at the top of the article.

The button 91x17-digg-button.gif is simply an example. As the following section explains, there are many buttons you can use. To change the button to another design, replace the image URL with that of the new button.

Button for selective posts

The methods of manually adding a Digg button to selective posts are rather tedious and complicated. The problem is that Blogger does not allow you to simply insert a JavaScript into a blog post. Since this blog is targeted at the majority of us who are not computer experts, I shall suggest a method that I think is simple enough for us.

First, go to the Digg tools site to select a Digg button that you like. You will see a wide selection of Digg buttons.

Digg Digg Digg Digg Digg Digg

Digg Digg Digg Digg

Digg

Take note of the image URL. For example, the image URL of this button Digg is

http://digg.com/img/badges/91x17-digg-button.gif


Write a post and publish it. Next, refresh the page and click on the title of your post. This will bring you to the post page. Take note of the new URL of your story. Insert it into the orange portion of this HTML code. If you want a different image, insert the image URL into the blue portion of the code.

<a href="http://digg.com/submit?phase=2&url=URLofyourstory" target="_blank"><img border="0" alt="Digg my article" src="http://digg.com/img/badges/91x17-digg-button.gif"/></a>


Now, go back to your article and Edit it. Choose the “Edit HTML” mode and not “Compose” mode. Copy the above code and paste it into whichever part of your blog article. “Preview” it, and if you are happy with it, “Publish” it.

For this article, I have manually inserted the Digg button. If you would like to Digg this article, or just to see how it works, click this button. Add Digg button to Blogger or Blogspot

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Digg This Story

Hide or Remove Navbar in Blogger

The Blogger or Blogspot Navbar is a default feature that appears at the top of every Blogger powered blog. It is a useful navigation tool which allows readers to search the blog for targeted content, mark the blog as objectionable, and randomly view other member blogs.

Hide or Remove Navbar in Blogger

The Navbar can be disabled for users who publish contents via FTP, but it will appear on all freely hosted BlogSpot blogs. While the feature is undeniably useful, some people find that its position at the top of the page looks obtrusive even with a choice of 4 colors. Some therefore pick a template with a black background to blend well with a black navigation bar. There are also parents and educators who find the 'view random blogs' feature inappropriate, as their children may inadvertently view objectionable blogs.

Nevertheless, this article is not a discussion on the merits or demerits of a Navbar. That is for you to decide. Here, I am assuming that you have made a conscious decision to hide or remove the Navbar. Having so decided, this is the guide on how you can do it.

Log into your dashboard, go to Template -> Edit HTML. Scroll to anywhere on the template and insert the following CSS style definition in red within the head section.


#navbar-iframe {
display: none;
}
</head>


Preview the template. You will notice that the Navbar is no longer displayed, and (depending on your template) your contents might shift upwards to take up the space reserved for the Navbar.

[Update:

This code display:none no longer works. Those who have used this may want to try out the other 2 methods (height and visibility) instead.]

Now, try this style definition:-


#navbar-iframe {
height: 0px;
}


This will reduce the Navbar height to zero, effectively removing the Navbar. You can also explore this other style:-


#navbar-iframe {
visibility: hidden;
}


You will notice that your contents do not shift upwards. The space is still reserved for the Navbar, but the Navbar is now hidden and not visible.

Either one of the above codes would do. You can also combine them if you'd like. For example, giving a numerical value for the height of the Navbar and hiding the visibility will give you a margin at the top and yet without the Navbar. Choose one that best fits your blog design. If you change your mind in future, and wish to have back your Navbar, simply remove the style definition.

Search Box

If you decide to remove the Navbar, you can still place a Blogger Search Box within your site. This is one of the great features in the Blogger Navbar.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Mar 17, 2007

Digg This Story

Add Video Clip to Blog

Update: Blogger released a new Add Video feature which allows you to upload videos into your Blog posts. Should you want to know more about it, or resize or align the video, or put it into the sidebar, you may follow our guide in Customize Video Upload in Blogger.

This is a step-by-step guide on how to add a video or movie clip to your Blog or webpage. There are many sites that offer free video hosting. Most of them automatically generate the relevant HTML code for you to easily insert/embed into your web template or blog post. I shall start with two of the most popular providers – Google Video and YouTube.

Google Video

Create an account with Google Video using your Gmail account. After the formalities, you will see a Video Status page. Click "Upload Video."

Add Video Clip to Blog

If your file is less than 100MB, which is probably the case, use the Web-based uploader.

Add Video Clip to Blog

Insert the video title, description, genre, and language. Under “Access”, you can either choose to have the video made public or unlisted.

Add Video Clip to Blog

The “unlisted” function is rather useful. A public video is listed in the Google Video search directory, and anyone can view it. However, you may have a video which you would rather not share with everyone except your blog readers. If you had created a private blog accessible only by your family and friends, you would all the more want to unlist your video.

In case you are wondering, an “unlisted” video enjoys the same features of a public video. It can be embedded in web pages, emailed, or linked to from other public sites.

Add Video Clip to Blog

After you have uploaded your video, you will see a link that reads “Embed this video on your website or blog.” Click on that and copy (Ctrl-C) this code to paste into your post. Your code should look something like this.

<embed style="width:400px; height:326px;" id="VideoPlayback" align="middle" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf? docId=-6608265653837650172&hl=en" quality="best" bgcolor="#ffffff" scale="noScale" salign="TL" FlashVars="playerMode=embedded"> </embed>




If you would like, you can change the width and the height of the video screen so as to have it fit neatly into your page. I have created an account and uploaded a sample video just to let you see how it will look on your site. The video screen you see below has a width of 300px and height of 245px.



YouTube

You would have heard of this popular video-sharing platform. Although Google has now acquired YouTube, it does not appear to be the end of Google Video. If you do not have an account at YouTube, sign up for a free account. For first-time users, you would need to confirm your email by following the instructions that YouTube sends to your email account. After confirmation, you will be able to upload your videos.

Add Video Clip to Blog

In YouTube, you assign tags to your video to enable it to be easily found by viewers through their search function. At the second step, select “public” viewing.

Add Video Clip to Blog

When you are at the screen shown below, you will see towards the bottom an option for you to “allow external sites to embed and play the video.” Check that box. Copy (Ctrl-C) the generated HTML code and insert it into your post.

Add Video Clip to Blog

Should you want your video to be a permanent feature of your site layout, you can create a video widget. For instance, if you would like to have a video in your sidebar, login to your Dashboard, go to Template-> Page Elements. Add a “Page Element” and select “HTML/JavaScript”. Paste the generated HTML code and save. (Note: Whenever you create any new page element, it will always appear at the top of all the other elements. If you want it near the bottom, simply drag and drop it to the desired location.)

Your HTML code will look like this.

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




Again, you can change the width and the height of the video screen if you'd like. For the purpose of this guide, I have used one of my favorite YouTube videos, a hugely popular clip of an electric guitar version of Pachelbel's Canon in D. The video screen has been reduced to a width of 300px and height of 245px.



Other video host sites

The other video hosts you might want to check out are:-

1. Yahoo Videos which is increasingly popular. Its interface resembles Google Video and you should find it easy to use.

2. Live Video, a new YouTube clone but with innovative features such as Digg-like voting by its users, customizable profile pages, and backgrounds to go with your videos.

3. Grouper which incorporates a desktop software for you to edit your videos before uploading them to the site.

4. Metacafe, iFilm, Motionbox, and Dailymotion are also popular video hosts which you can consider using.

If you need more information, enter search words like “free video share” to look at what these or other sites have to offer.







Further reading:


If you are looking to have music on your blog, you may check out our other article Add Music to Blogspot blog. Should you want to insert a music playlist of several songs, have a look at the article Flash Music Player and Music Playlists.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Mar 16, 2007

Digg This Story

Language Translation Flags and Script

This tutorial explains how you can add a script to allow readers to view your English site in other foreign languages. As you can see on the right of this page, a reader needs only to click the relevant country flag to read this site contents in his preferred language.

English is not the most popular language in the world. In fact, according to many reports, the Chinese language (Mandarin) is certainly the most widely spoken language. In the internet community, the other popular language platforms are arguably Spanish, Russian, Arabic, Portuguese, Malay, Italian, French, Japanese, and Korean.

Translation from English to other languages

If you have a blog written in English, it therefore makes much sense to be able to reach out to the non-English speaking population as well. There are several online translation tools, the popular free tools being AltaVista's Babel Fish translation and Google's Language Translator. WorldLingo is no longer a recommended tool, as the website translator has a translation limit of 500 words, beyond which you have to pay a monthly fee for their service.

For this site, I have used the Google Language Translator. Google is able to translate English website contents into Arabic, Chinese, French, German, Italian, Japanese, Korean, Portuguese, Russian, and Spanish. The JavaScript used here can be applied to most of the blogging sites like Blogspot, Typepad and Wordpress. Copy the following script and paste it at the part of the template where you want your language translator to appear.

<form action="http://www.google.com/translate" >


<script language="javascript" type="text/javascript">


<!--


document.write ("<input name=u value="+location.href+" type=hidden>")


// -->


</script>



<noscript><input name="u" value="http://tips-for-new-bloggers.blogspot.com/" type="hidden" /></noscript>



<input name="hl" value="en" type="hidden">



<input name="ie" value="UTF8" type="hidden">



<input name="langpair" value="" type="hidden">



<input name="langpair" value="en|ar" title="Arabic" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/358406/gse_multipart12399.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">



<input name="langpair" value="en|zh-CN" title="&#20013;文(简体)/Chinese (Simplified)" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/546049/gse_multipart12397.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">



<input name="langpair" value="en|zh-TW" title="&#20013;文(繁体)/Chinese (Traditional)" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/208681/gse_multipart12398.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">



<input name="langpair" value="en|fr" title="Fran&#231;ais/French" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/327620/gse_multipart12413.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">



<input name="langpair" value="en|de" title="Deutsch/German" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/734899/gse_multipart12400.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">



<input name="langpair" value="en|it" title="Italiano/Italian" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/306145/gse_multipart12401.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">



<input name="langpair" value="en|ja" title="&#26085;本語/Japanese" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/443122/gse_multipart12402.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">



<input name="langpair" value="en|ko" title="&#54620;국어/Korean" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/581031/gse_multipart12403.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">



<input name="langpair" value="en|pt" title="Portugu&#234;s/Portuguese" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/670301/gse_multipart12404.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">



<input name="langpair" value="en|ru" title="&#1056;усский/Russian" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/111692/gse_multipart12405.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">



<input name="langpair" value="en|es" title="Espa&#241;ol/Spanish" src= "http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">



</form>




Points to note:-

1. For those using Blogspot, once you have logged into your Dashboard, go to Template-> Page Elements. Add a “Page Element” and select “HTML/JavaScript”.

2. Copy the above JavaScript. Under the “value” (in red), you will see the URL of this website. Please change that to the URL of your own website. Save and refresh the page.

3. If you want a slightly bigger flag, you can increase the width of the images, for example, from “30” to “36” and the height from “20” to “24”.

4. Should you come across a translation that doesn't look right, you can always suggest to Google a better translation to help them improve their translation quality.

Translation from other languages to English

If you have a site written in another language, you can also have a translation tool on your Blog to translate it into English. At the moment, Google is able to translate Arabic, Chinese, French, German, Italian, Japanese, Korean, Portuguese, Russian, and Spanish sites into English.

Go to the official Google Language Tools site. Key in your Blog URL at the place circled in the picture below. Choose the languages e.g., “Italian to English”.

Language Translation Flags and Script

Once you click “Translate”, you will be taken to the translated page. Copy the translated page URL in the browser. We have to insert this URL into the HTML code.

Language Translation Flags and Script

Next, login to your Dashboard, under Template -> Page Elements -> Add a Page Element, choose HTML/JavaScript at the place where you want to put your translation flag.

If you want a United Kingdom flag, copy and paste this code into the page element.

<a href="translated page URL" title="English"><img border="0" alt="Google Translation" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/212122/gse_multipart16503.png"/></a>




If you want a United States of America flag, use this code instead.

<a href="translated page URL" title="English"><img border="0" alt="Google Translation" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/724501/gse_multipart16505.png"/></a>



Please remember to insert the translated page URL into the code. If you wish to resize the picture by specifying the width and height, or if you want to have readers go to a new window when they click the link, you may read the article on Hyperlinks and Image Links (II) to see how you can do that.

Save and refresh your Blog to see the translation flag.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button