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 bernardmax2@gmail.com-->
<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 bernardmax2@gmail.com-->
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 @ bernardmax2@gmail.com
Follow me on facebook https://www.facebook.com/ningtips
Replies
I think that is my problem too and would love to know a fix.
Muchas Gracias, I like it!
This doesn't apply to private sites though right?
I was able to get my Google Search bar up. Thanks! The magnify glass is not showing though, could you kindly tell me how to make the magnify glass visible? Thanks!
So I can see the search bar, as I explained above, but each search yields no result???
Here's what the code I pasted in the Custom Code (End) box looks like... Help please! :)
<!--CUSTOM GOOGLE SEARCH BAR by bernardmax2@gmail.com-->
<div id="BL_search_bar" style="display:none;">
<p style="text-align:left;">
<script>
(function() {
var cx = '003519427498970298752:kdwpl56sgws';
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 bernardmax2@gmail.com-->
Hi there,
the code is ok. Can you show me your site so I can take a look and solve the problem?
Thanks for taking the time to look at it Bernard.
When I tried to search Bernadette then it worked perfectly. The following screenshot is the result of my search.
And about magnify glass, you can remove the old code and use the following or new code
');var within_headerCode = document.getElementById('BL_search_bar');
var insideheaderCode = document.getElementById('inside_header');
insideheaderCode.innerHTML = within_headerCode.innerHTML;
}
Thanks for checking Bernard! I promise it didn't work before! LOL!
Where's the code that I can replace with the existing one for the invisible magnify glass?
THANK YOU SO MUCH!
You are most welcome buddy. And I'm sorry I forgot to attach the code. Here you go :D
<!--CUSTOM GOOGLE SEARCH BAR by bernardmax2@gmail.com-->
<div id="BL_search_bar" style="display:none;">
<p style="text-align:left;">
<script>
(function() {
var cx = '003519427498970298752:kdwpl56sgws';
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;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
border-color: hsla(0, 0%, 40%, 0);
background-color: hsla(92, 21%, 16%, 0);
background-image: url("http://www.google.com/uds/css/v2/search_box_icon.png");
background-repeat: no-repeat;
margin-top: 5px;
}
</style>
<!--CUSTOM GOOGLE SEARCH BAR by bernardmax2@gmail.com-->