Adding a video bar can be little tricky in blogger based blogs. Even when I used to blog on my older blogs, I faced some problem which doesn’t allow me to use videos there. So here is the small trick I did which can be useful for you too. Be careful enough to backup your theme first. I was just going through the article for “HOW TO ADD VIDEO BAR to your site” article and tried to add it to my blogger but faced one major problem.

The Problem to add a video bar in Blogger

When I tried to add a function to call a script through “onload” function of the “body” element it gave a warning “about to remove navigation bar”,Navigation bar is one which is always on the top of any blog when u open in browser.Well i saved it and then when I tried to add another element through add element template wizard it open with error message “Page Not found”.That was scary.Good i always save my template before I edit it so i recovered it (Thats a tip always save before you edit!)

The Solution to add a video bar in Blogger

Then I tried different ways and its a success now which you can see if you are here right above.

Step 1: Get The Api Key for ur site from Google AJAX Search API.

Step 2: Code Sample

–Video Bar Test—-

#videoBar {

width : 160px;

margin-right: 5px;

margin-left: 5px;

padding-top : 4px;

padding-right : 4px;

padding-left : 4px;

padding-bottom : 0px;

}

Step 3 :Insert the key u get from google in place of YOUR_KEY

<script xsrc=’http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR_KEY ‘

‘type=”text/javascript”></script>

<link xhref=’http://www.google.com/uds/css.gsearch.css.css‘

rel=”stylesheet” type=”text/css”/>

<script xsrc=’http://www.google.com/uds/solutions/videobar/gsvideobar.js ‘

type=”text/javascript”></script>

<link xhref=’http://www.google.com/uds/solutions/videobar/gsvideobar.css ‘

rel=”stylesheet” type=”text/css”/>

<script type=”text/javascript”>

var videoBar; //keep is outside the function OnLoad

function OnLoad() {

var barContainer = document.getElementById(”videoBar”);

var playerContainer = document.getElementById(”videoPlayer”);

// create a horizontal Video Bar with small thumbnails

options = {

horizontal : true,

thumbnailSize : GSvideoBar.THUMBNAILS_SMALL

}

videoBar = new GSvideoBar(barContainer, playerContainer, options);

videoBar.execute(”vw gti”);

}

<script/>

Step 4: Add this to any page element

<table>

<tr>

<td><a xhref=”javascript:OnLOad();” >Start Video</a></td>

<td><a xhref=”javascript:videoBar.execute(’mac vs. pc ad’);”>Mac

Ads</a></td>

<td><a xhref=”javascript:videoBar.execute(’ads’);” >Ads</a></td>

<td><a xhref=”javascript:videoBar.execute(’mtv’);” >MTV</a></td>

<td><a xhref=”javascript:videoBar.execute(’jessica

simpson’);”>Jessica</a></td>

<td><a xhref=”javascript:videoBar.execute(’south

park’);”>SouthPark</a></td>

<td><a xhref=”javascript:videoBar.execute(’reset’);” >Reset</a></td>

</tr>

<tr>

<td>

<div id=”videoBar”>Loading…</div>

</td>

<td>

<div id=”videoPlayer”>Loading…</div>

</td>

</tr>

</table>

Put it in a noticeable area.The viewer just have to click on Satrt Video Hyper Link and Then he can choose and enjoy it. Good Luck!