Add a help button next to "Share this Page Now"

This tip is related to the tip that adds the social links that are here above the sign-in box in JenSocial.  The full tip is in VIP...so sign up :).  You could probably adapt this for other locations and uses.

 

I wasn't sure that the average member of my network would be familiar with all the social links and their purpose on our site, so I wanted to add an unobtrusive help menu.

 

This is what the link looks like (the blue and white question mark):

When you hover it, it says "Share Buttons Explained". When you click it, this screen pops up: 

 

Here is how to make this happen:

1.  Find an icon you like.  I found this question mark for free and sized it to 20x20 pixels. A .png work best because of their transparent background.

2. Save that icon somewhere you can reference online, like Ning or your file server.

3. Write your help text in an html editor (I use Coffee Cup) or in Notepad.  You can use mine as inspiration, only, thanks.

Here is a template:

<HTML>
<HEAD>
<TITLE>Share Button Help</TITLE>
</HEAD>
<BODY>
<div align="center"><u>How and Why Should I Share this Page?</u><br />
Some text about your site here.
</div>
<p><b>Button 1</b> explain</p>
<p><b>Button 2</b> explain</p>
<p><b>Button 3</b> explain</p>
<p><b>Button 4</b> explain</p>

<p>Sum it up or add more </p>
</BODY>
</HTML>

 

4. Now also upload that .html file to your server.

5. Go to your custom code box.

Find this code you inserted for the original tip:

<div style="padding: 3px; background-color: #000000; font-size: 0.9em; color: #FFFFFF; margin-bottom: 6px;"><strong>Share This Page Now</strong></div>

 

Change to:

<div style="padding: 3px; background-color: #000000; font-size: 0.9em; color: #FFFFFF; margin-bottom: 6px;"><strong>Share This Page Now <a href="javascript:void(0)" onclick="window.open('http://yourpage.html','linkname','height=600, width=550,scrollbars=yes, resizable=yes')"><img src="your_image.png" title="Share Buttons Explained" alt="Share help" align=absmiddle></a></strong></div>

Now change the colors for your site. Add your file locations. Adjust the height and width of the pop-up window if needed. Edit the title and alt text.

 

There you go!!  Another way to get people to share your site!

Views: 122

Replies to This Discussion

Permalink Reply by Tips by Alex/JenSocial on June 28, 2011 at 9:36pm
Very sweet to explain why to share it. I don't know how to explain all these in Chinese is better yet.
Permalink Reply by GirlRiders on June 30, 2011 at 8:06pm

I changed the font and added some color on the help screen, I think its easier to read.

Permalink Reply by Daisy Lois on July 20, 2011 at 9:52am
Hello!
could share the example code samples. For people like me do not understand much ofcodes and at the same time we are interested. thanks
Permalink Reply by JenSocial on July 20, 2011 at 10:46am

Vanesa,

Not sure what you are requesting. The 4 button layout with the Like, Google +, Twitter, etc... comes from the VIP Group.

Best Regards,

Jen

Permalink Reply by GirlRiders on July 20, 2011 at 4:52pm
Vanesa, I'm also not sure what you are asking for, can you explain?
Permalink Reply by Daisy Lois on July 20, 2011 at 9:51am
Hello!
could share the example code samples. For people like me do not understand much ofcodes and at the same time we are interested. thanks
Permalink Reply by JenSocial on July 20, 2011 at 11:09am

Wow GirlRiders! You have such unique and helpful ideas. Great stuff!

Thank you for sharing,

Jen

Permalink Reply by GirlRiders on July 20, 2011 at 4:51pm
Thanks and you're welcome!

RSS

Latest VIP Ning Tips!

Hover Links for Preview

» shhhh, Huge Ning Designer Secret - - Insert Simple HTML at Top of List Pages: Blogs, Events, Forums, Groups, Photos, and Videos.

» Make Home Page Photo Module Stand Out

» Professional Splash Page Template (Landing Page) - Pro Accounts

» Beautiful Coda Content Slider for Ning Networks

» Move Group Pages Module To Top

Blog Posts

Hi Everyone!

Posted by JenSocial on May 7, 2018 at 8:35pm 9 Comments

Message from Ning CEO - January 4, 2017

Posted by JenSocial on January 6, 2017 at 4:00pm 10 Comments

New Ning 3.0 Feature! Add Slideshow to Photo Module

Posted by JenSocial on October 22, 2016 at 1:05am 0 Comments

Good Riddance Mode Media! Exciting News About Ning + Cyndx LLC

Posted by JenSocial on September 17, 2016 at 12:00am 26 Comments

Ning RAISING RATES for Ning 2.0 sites

Posted by JenSocial on August 31, 2016 at 3:30pm 13 Comments

Members

Latest Ning Tip

Blogcentric Sites - Add "Read More" to Blog Titles - Ning 2.0

Ning 3.0 Tip - Add Buttons/Links Below Status Update (Quick Links to Add Photos, Posts, Discussions)

Lucid Car

Discussion Forum

Mp3 player for Ning 3.0 - created by me

Started by Themes - Rosas Negras Mar 20, 2021. 0 Replies

Add Member Account Box Links/Notifications to NingBar and Hide Account Box - - Saving Space Above Fold (Collaborative Efforts: Jen and Elson)

Started by JenSocial. Last reply by Kos Dec 6, 2016. 64 Replies

Add Footer like Creators.ning.com (Great example of a JenSocial VIP Tip!)

Started by JenSocial. Last reply by JenSocial Jul 26, 2016. 41 Replies

Trending on JenSocial 

1 Hi Everyone!

Hi Everyone!
2 Mantra for healing | Om Tare Tuttare with Katja

Mantra for healing | Om Tare Tuttare with Katja

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips