Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

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-->

    • NC for Hire

      Hi there, 

      the code is ok. Can you show me your site so I can take a look and solve the problem?

      • Www.Cfaolc.ning.com

        Thanks for taking the time to look at it Bernard.
        • NC for Hire
          Hi Bernadette,
          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;
          }



          3238489?profile=RESIZE_1024x1024

          • 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! 

            • NC for Hire

              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-->

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels