How should i opened Google results within the same page?

HTML & CSS
1

hi friends i need your help
i wanted to setup the google search box in my website, i m using wordpress. how can i opened the results with in same page…
i put the code on side bar, and then it say the , place next code, where you want to display the results. how i can do that??

help me

kindly identify the code where should i placed it

2

You could use fancybox - scroll down and click on “Iframe (75% width and height)”

3

can u guide me, how should i install this? is it plugin ?

4

THey have a How to Use link :slight_smile:

5

any easy way doing this ?? so much confused me ??? plz help

6

Their instructions are pretty easy to follow, what are you having troubule with? :slight_smile:

7

sir, kindly see this screen shot, i put the

in my sidebar

<form action=“http://www.smashinghub.com” id=“cse-search-box”> <div> <input type=“hidden” name=“cx” value=“partner-pub-4275345795509435:t9w8r8-r2vi” /> <input type=“hidden” name=“cof” value=“FORID:11” /> <input type=“hidden” name=“ie” value=“ISO-8859-1” /> <input type=“text” name=“q” size=“30” /> <input type=“submit” name=“sa” value=“Search” /> </div></form><script type=“text/javascript” src=“http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en”></script>

this code after <div id=“content”>

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

but i wanted to disppeared the content, it only show the search results and the sidebar
any idea

kindly open www.smashinghub.com and search any thing, u will get the idea

8

Hi, for one thing I don’t see the <script>'s included

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.0.pack.js"></script>

Nor do I see the stylseheet linked :slight_smile:

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.0.css" type="text/css" media="screen">

What exactly did you do when you read hte How to Use link?

9

now i put the code, you can see , now

942×345 50 KB

see this screen shot, i wanted to sustain the my sidebar along with the results page, but it moved down and also show the post content of the front page

10

I forgot, I did a tut on that a while back… http://www.visibilityinherit.com/code/jquery-fancybox.php

if you can’t get that going, then a search like this will likely help… http://www.google.com/search?q=widget+maker&ie=UTF-8&oe=UTF-8&hl=en&client=safari

11

If you want the search results to replace the content instead of pushing it down, try placing the second code snippet that you placed after <div id=“content”> on a blank Page instead of in your template.

The Iframe option that you are using allows you to specify the URL the results will display on.

  • Create a new Page in Wordpress and call it ‘Search Results’ or something.
  • add the Search results code into the new page.
  • In your Google custom search settings…go to the Get Code link where you got the other snippets of code…and in the Specify search results details section on top, type in the URL of the new page.

When someone does a search, that should give you just the search results on the left instead of results and content.

12

http://www.visibilityinherit.com/code/jquery-fancybox.php

the link above has 6 steps on how to use it with jquery.

what have been your results so far?

13

hi thanks for the replying

i created the new page name as find.php and placed that code…

in blank page

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

it is not worked still

14

hmm…I’m a little confused as to why the new page would have a .php extension…

just to make sure…

  1. you created a new/blank Wordpress Page?..similar to your About Us Page or Contact Us Page?

  2. you put the URL to that blank page into the Specify search results details section in your Google custom search control panel?

EDIT: make sure you copy the code into the HTML tab of the Wordpress Page and not the Visual tab.

15

now i m little bit getting the point.

i got the control panel of Google in adsense. now last point, i got three options of layouts, compact, fixed and open the frame in new page

now i selected the new page
it given me two codes of search engine right?

first i placed , where i wanted to display the search box right, and second, the results box, where the page show the resutls…

as u suggested the number 1 point, can explain,

i made the new page from wordpress dashboard… can u little give me an examples !!! plx

16

let’s see if images will help then… :slight_smile:

Step 1: In your Wordpress Dashboard, go to the Pages tab and click Add New…just like how you added the About Us and Contact pages to your site.

Step 2: In your new Page, paste the code for the results box. Since it’s code you are pasting in, make sure you are in the HTML tab (circled in red below) and not the Visual tab. Title/Name the page, then Publish it.

Step 3: In your Google custom search control panel, go to the section where you got the two separate code snippets. In the top section (highlighted in yellow below), type in the URL address of the new page for the search results…for example: [I]http://www.www.smashinghub.com/find/[/I]

640×599 65.7 KB

Notice that the URL is added to the search box code (in red box above) as you type it.
You will have to add or change that value in the search box code on your site (red text in the search box code below)…


<form action[COLOR="Red"]="http://www.www.smashinghub.com/find/"[/COLOR] id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="013723053986055911592:k-qc7jh47_g" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>

does that help clear anything up a little?

17

[QUOTE=agarcia831;4506736]let’s see if images will help then… :slight_smile:

thanks a lot
problem solved

last point, how i can create the empty widget , i wanted to insert the facebook gadget below the “connect to us”

where i insert my fan page code
thanks in advance

18

your welcome. glad it worked.

If that whole sidebar is widget-enabled, just go the the Appearance tab in your Wordpress Dashboard…to the Widgets link. In the Available Widgets area, find and drag the Text widget box (circled in red) to the far right…to the Sidebar box…

You will have to look to find the Connect To Us widget in the Sidebar box and drag the Text widget under it. Once placed, the widget will open up a text box so you can paste your code in and save.

19

thanks , can i use my categories in navi menu too. ! replacement of home, about us etc
or just below

20

yes, you can use a list of your categories at the top. you just have to place the right tag (code) in your template where you want it.

There’s the Wordpress documentation page for the template tag to create a category list. Toward the bottom of the page, there are several examples of the code you would add to your template, depending on what you want.