How Do You Replace The Default Ning Bar With The Google Custom Search Bar? (SOLVED)

[Ceddy J]

I have search far and wide, looked at different ways to to put the google search bar, but which I liked. Now I did see someone put up a screenshot showing the google search bar was in place of the ning search in the ning bar. Appreciate the help, and yes I have the google search set and ready to go!

-----

Look In The Comments and Sweet Potato Will Explain It!

Thanks J Farrow, SoaringEagle, and Jen as well for chiming in to figure out this rubix cube.

 

Link To SP's Tip On How To Implement This http://creators.ning.com/forum/topics/tip-search-function-like-crea...

[JFarrow]

i believe it was Jensocial that had that tip...perhaps she will see this and chime in..

[Ryan the CEO of CEO's]

something I would like to know as well... thanks!

[soaringeagle]

i remember a jensocial tip that made the ning search look like the apple search  but dont e=remember any that replaced the ning with google however it shouldnt be too hard

(ill figure out code later when not busy if you cant)

step 1 find the ning search  element i think its something like xn_bar_search

add  this css (whatever the actual elemant class is) {display:none;}

next use jensocials insertion code generator to put the google code :before the ningbar code (before after apend  are options try each to see which fits closest then adjust from there with css)

if you can t figure it out buy later  this afternoon ill take a cfrack at it

[Ceddy J]

Okay I'm going to try that now.

[Ryan the CEO of CEO's]

thanks!

[Ceddy J]

Where I am so far:

- Created My Google Custom Search Last Week

- The code
xn_bar_menu_search {display:none;}
works great to hide the original search

- Created a blank page to dedicate for the rendered search results

Here's where I'm lost:

- I have this code for my search 

<!-- Put the following javascript before the closing </head> tag. -->
<script>
(function() {
var cx = 'partner-pub-6415754826064816:vpzhlm-8bit';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>

<!-- Place this tag where you want the search results to render -->
<gcse:searchresults-only></gcse:searchresults-only>

but I don't know how to place it in the custom code for placement in the ning bar

- What code goes into the blank page for the rendered search results?

I'm doing a lot of the exploring myself before I ask questions, but I'm lost there.

[soaringeagle]

this goes in custom code

<script>
(function() {
var cx = 'partner-pub-6415754826064816:vpzhlm-8bit';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>

this the blank page where u want the search results

<gcse:searchresults-only></gcse:searchresults-only>

wheres the code for the search itself?

thats the code u want to add to the insertion point code generator to place before the ning search

[Ceddy J]

This is the on the fly version I found from another post on here 

<script> x$('#xn_bar #xn_bar_menu_tabs').append('<li><form name="cse" id="searchbox" action="http://www.google.com/cse"><input type="hidden" name="cref" value="" /><input type="hidden" name="ie" value="utf-8" /><input type="hidden" name="hl" value="en" /><input name="q" type="text" size="40" /><input type="submit" class="button" name="sa" value="Search" /></form>'); x$('#xn_bar_menu_more').remove(); </script> <script type="text/javascript" src="http://www.google.com/cse/tools/onthefly?form=searchbox&lang=en"></script>

and it did the place perfectly, it just doesn't render in a separate page. This also isn't the custom one I built. It's a general google search.

[soaringeagle]

ok the code you got for the custk 1 u built

you should have 3 sets of codes 1 the script u put in the custom code

the tags u put in the blank page

and finaly the other code that adds the search itself

that use this  and paste that code where i edited this to say replace-this

<script> x$('#xn_bar #xn_bar_menu_tabs').append('<script> x$('#xn_bar #xn_bar_menu_tabs').append('replace-this'); x$('#xn_bar_menu_more').remove(); </script> <script type="text/javascript" src="http://www.google.com/cse/tools/onthefly?form=searchbox&lang=en"></script>

im not sure about that onthefly part can u gimme all parts of the code u got for the custom 1 ands ill peice it together

[Ceddy J]

are you referring to this page http://www.gmodules.com/ig/creator?hl=en&url=http://www.google....

http://www.google.com/cse/home?cx=partner-pub-6415754826064816:vpzh...

[soaringeagle]

not what i use what i use is the adsense search  its a search of your sites google idexed  pages (and any subdomains or alternate sites u add too)

in adsense add adsense search unit

[Ceddy J]

I'm an idiot. I noticed in my adsense I have a search created there.

Here I only have two codes:

Search box code:

<form action="" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-6415754826064816:vpzhlm-8bit" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>

<script type="text/javascript" src="http://www.http://www.google.com/coop/cse/brand?form=cse-search-box&amp;la..."></script>

Search Results Code:

<div id="cse-search-results"></div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 600;
var googleSearchDomain = "www.www.google.com";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>