Killer Tip : How to add seach bar to your ning 3.0 network ?

[Bernard Lama]

Hi NCs,

As you know Ning 3.0 doesn't have search bar like ning 2.0 yet. May be some people are desperately looking for a solution. So today I'm gonna show you few simple steps to add  google custom search bar to your ning 3.0 network (Ning 2.0 has search bar at the top right corner within ning bar) and it works as good as default ning 2.0 search bar. So here we go.

Step one: Click on this lick http://www.google.com/cse/manage/all and sign in to your Google or Gmail account, or create one if you don’t already have one. Once you’ve done that, head over to the Google Custom Search management page. Click on ADD button> Enter your network link under "Sites to search" and hit CREATE button> now go to step two.

Step Two: Copy and paste the following code into notepad. Go back to the google page you just created google custom search bar code and Click on GET CODE and copy the code. Now go back to the notepad and paste the google custom search bar code within <p style="text-align:left;"> and </p>. 

<!--CUSTOM GOOGLE SEARCH BAR by [e-mail]-->
<div id="BL_search_bar" style="display:none;">
<p style="text-align:left;">

YOUR GOOGLE CUSTOM SEARCH BAR CODE GOES HERE

</p>
</div>
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$(".ningbar").prepend('<div id="inside_header"></div>');
var within_headerCode = document.getElementById('BL_search_bar');
var insideheaderCode = document.getElementById('inside_header');
insideheaderCode.innerHTML = within_headerCode.innerHTML;
}
</script>
<style>
input.gsc-search-button-v2 {
padding: 6px 20px 7px 20px;
}
.gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right: 0px;
}
.gsc-control-cse {
background-color: hsla(0, 100%, 100%, 0);
border-color: transparent;
height: 33px;
padding: 0px 3px;
}
#inside_header {
width: 300px;
float:right;
}
</style>
<!--CUSTOM GOOGLE SEARCH BAR by [e-mail]-->

Step Three: Now copy and paste the entire code into custom code (End of Page Code) and save the page. You are done.

Live preview here

 

If you are looking for more than this tip or want to hire me for any kind of Ning custom job or ning re-designing jobs, you can directly contact me @ [e-mail]

Follow me on facebook https://www.facebook.com/ningtips

[OMGEDSON]

Incorrect, when you create a google search bar you tell it to search only your site.

[Gwynnyth]

Not true, I've had this search bar on my site since June it does not search my site at all.

[Gwynnyth]

This google search bar works exactly like google it does not search my site exclusively.

[Ben Carr]

You can set up the google search to search only your site.

[Ben Carr]

I had been using a search like this but Google links back to my 2.0 site and the links are all broken. Is there a way to force the search to actually use my 3.0 site instead?

[Gwynnyth]

Because it doesn't work that way lol. You can't use the code from ning 2 to use on ning 3 lol

[Ben Carr]

Just make a new CSE for your new site. It doesnt take long to create a new search.

[Jeffrey Haskins]

Google Search bar doesn't pick up on the groups however

[Strumelia]

In contrast, the native Ning Search function on 2.0 has not only a site-wide search window, but also has separate search windows within each feature: a Video Search, Blog Search, Group Search, Forum search, Photo Search, and Member Search.  It's awesome and is so useful, I love it!  That's what 3.0 should have at the very least, or else something even better.

[Gwynnyth]

I'll be honest, I'll feel cheated, I will never recommend Ning to anyone ever! They refuse to let me back into the Ning 2 format because they claim they can't. I'm so disappointed, I have poured my sweat Into my site, I only have the one site. It's my life and I'm ready to abandon it because without the search feature and chat I might as well run a tomb.