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

[Bernadette Arthur]

Thank you so much!

[Mr. Jim Nayzium]

I have tried and tried to create a search bar that works. I have a very simple Ning 3.0 site with only one or two test members.

I got the search bar installed but any simple word search yields zero results.

site is

http://ccadirectory.ning.com

here is my pasted code:

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

<script>
(function() {
var cx = '004109528266057393512:sb1j8zgbw10';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</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]-->

I NEVER would have paid 300 dollars for a community site that didn't have built in functionality of search for members. THIS was the ONLY thing I was looking for. I somehow previewed a 2.0 site and made my purchase this summer and they stuck me in this 3.0 thing.

I am nervous I just threw away 300 dollars!

[Annabel Gregory]

I found this very useful, thanks, Bernard. Much better than the Ning suggestions even if, as everyone points out, it cannot be as satisfactory as a custom-built Ning search facility. I just have a slight problem - the search button is blank - this happened with Ning's suggested method as well, so I realise that you may not be able to help. I can investigate replacing the button with a custom-made one ...