Google Video Search in Blogs. ~ The Blog Doctor.
Loading...

Google Video Search in Blogs.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

By putting Google Video Search in your blog you can enable your reader to search for videos without leaving your blog. He/She can view the videos in your blog and even upload their videos from your blog. Click below picture to enlarge it.



Above is a video of an octopus playing on my blog at Google Search Map site.

In your blog you will need a space for the Video Search Control. I have chosen the Minima template and given a float:left; property to the outer-wrapper so that I can locate the Google Video on the right hand side.


Your first step is to sign up for a Google API at : http://code.google.com/apis/ajaxsearch/signup.html With your key in hand, add the following three lines of code to your page or blog template. This key identifies your web site to Google and helps them track usage of Google Video. A new and distinct key is needed for each directory on your website that includes Google Videos.
Put a check in the box where it says I have read and agree with the terms and conditions and paste your blog url in the text box below and click on Generate API Key button.(Step 1)

Copy paste this code (ONLY THE BLUE LINES) just below the title tag in your template :



<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR-KEY"
type="text/javascript">




IN THE ABOVE LINE ADD amp; AFTER BOTH THE & CHARACTERS OR YOU WILL GET ERROR MESSAGE.
Add your key number instead of YOUR-KEY.


<script src="http://www.google.com/uds/solutions/videosearch/gsvideosearch.js"
type="text/javascript"></script>
<link href="http://www.google.com/uds/solutions/videosearch/gsvideosearch.css"
rel="stylesheet" type="text/css"/>





In the second step define a place on your page for the search control (note: you can have more than one). This is typically done by defining a named <div> element as shown below:

<div id="videosc">Loading...</div>


Set some styling attributes on this element to constrain the width of the control, set a border or margin, etc. For example in your css put the following code :

#videosc {
width : 300px;
margin-left: 10px;
padding-top : 4px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 0px;
border : 1px solid #f9f9f9;
}

To override standard player dimensions add the following code just beneath :

.playerBox_gsvsc .player_gsvsc {
width : 320px;
height : 260px;
}

Next find the <body> element on your page and add an onload handler.

<body onload="OnLoad()">


Add the following scripts just before the </head> tags


<script type="text/javascript">
function OnLoad() {

var options = {
largeResultSet : true,
startupDelay : 100
}

new GSvideoSearchControl(
document.getElementById("videosc"), // container
defaultTags, // default tag array
loadTags, // optional load function
saveTags, // optional save function
options // optional options
);
}

function loadTags() {
var tagStrings = GSvideoSearchControl_JSON.stringify(defaultTags);
return tagStrings;
}

function saveTags(tags) {
//alert(tags);
}

</script>

<script type="text/javascript">
var defaultTags = [
{
query : "feed:top100",
label : "whatshot"
},

{
query : "big wave surfing",
label : "surfing"
},

{
query : "genre:comedy",
label : "comedy"
},

{
query : "mtv"
},
{
query : "christina aguilera type:music_video",
label : "christina"
},

{
query : "jessica simpson",
label : "jessica"
},

{
query : "vw gti"
},

{
query : "type:music_video",
label : "music videos"
},

{
query : "feed:top100new",
label : "whatsnew"
},

{
query : "ferrari f1",
label : "f1"
},

{
query : "toyota tacoma",
label : "mytruck"
},

{
query : "type:gpick",
label : "google picks"
},

{
query : "nascar"
},

{
query : "ads"
}
];

</script>


Save Template. View Blog.
Click on individual videos to play them in the player.
Conduct your own searches through Google text box.
Check it out in the right sidebar at the bottom here at Google Search Map site.

This is what itlooks like :



Technorati Tags:, ,

1 comments:

service video said...

Your blog is very much good. I am very much impressed by your blog content; I also come across number of sites, you can also check these are also very much useful for everyone.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.