Jan
31

Getting From HTML to PHProxy – Advanced

,

I’ve explained the basics of taking an HTML template and turning it into a PHProxy theme. Now, I’ll teach you advanced things such as adding a popular sites list, javascript effects, a proxy enabled Google search bar, and more.

Take a look at Quick Proxy, a free PHProxy theme I created. Click on the “Popular Sites” link to see the list appear. When you click on one of the links, you’ll then see the advanced options. Once those are set, click on “Hide me!,” and the design will do just that (the proxy feature is disabled in the preview). The Google search feature is also straightforward. Type in a search term, and click on “Search Google.”

You’ve just seen what it’s like, and now I’ll explain how it works and how to do the same on your PHProxy site.

Javascript in the <head></head>

Add the following lines of code in the tags of your design, and download this bit of javascript. Place it in the same folder as your design.

The line above simply links the javascript file you just downloaded to your design.

The lines above make the Google search possible.

Javascript Effects

To get the animated parts to work, you need to create two div’s. Set the id of the first div to “advancedoptions” and the second to “popularsites.” Make sure to add the following in the div tag so the div is hidden by default.

style="display:none; overflow: hidden; height: 275px;"

Advanced Options

This is the code for the advanced options div. You won’t see it at first. Make sure that you change the height in the div tag if the advanced options are getting cut off.

The following line of code creates a link that toggles the advanced options.

	Advanced Options

Popular Sites

The popular sites list should look like the code below. Of course, the list can be changed, but this is a good start.

Notice that once a link is clicked, the site’s URL goes in form and the advanced options are toggled. Also, change the height attribute in the beginning of the div tag.

Popular Sites

The line above displays a link used to toggle the popularsites div.

Google Search

You already added the code in the head tags that make the Google search possible. For that code to work, you need to change the name of the URL form to ‘a’. The beginning of the form tag would look like this:

The code below is used to create the Google search button.

Conclusion

That should cover everything. If I missed something or if you have any questions, just leave a comment.

Heart

3 Responses to “Getting From HTML to PHProxy – Advanced”

  1. Getting From HTML to PHProxy - The Basics - doDesign says:
    January 31, 2009 at 8:46 pm

    [...] Take a look at the next post in this series, Getting From HTML to PHProxy – Advanced [...]

    Reply
  2. Proxy Blog says:
    April 9, 2009 at 11:57 pm

    Nice tutorial.

    Reply
  3. Skinet says:
    June 29, 2009 at 5:43 am

    Hello ,
    Thank you so so much , i searched over the net before but nothing.. you are so great in my eyes ..
    i will try it ,i wish i will success ..
    Thank you again

    Reply

Leave a Reply