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

FORUM

NC for Hire

A couple of night ago a fellow creator asked if there was a way to have a hovering/flying Twitter follow button to inspire members to follow them.  I found a solution and now I am sharing it with you.  This is what it will look like in top right corner of your site:

You need this image: 

and this one (which is optional and replacable)

Here is the code you'll need to add to your design studio custom CSS:

.follow-wrapper {  height: 44px;  overflow: hidden;  position: absolute;  top: 0;  width: 100%;}
.follow-button { background-image: url(https://storage.ning.com/topology/rest/1.0/file/get/14644626);
background-repeat: no-repeat;
background-position: 0 0;
cursor: pointer;
display: block;
padding: 7px 0 7px 40px;
position: absolute;
right: -168px;
top: 5px; -webkit-transition: right 0.3s; -moz-transition: right 0.3s; transition: right 0.3s; width: 168px;}
.follow-button:hover {-webkit-animation: fly 0.2s steps(4) 0 10; -moz-animation: fly 0.2s steps(4) 0 10; animation: fly 0.2s steps(4) 0 10; right: 0;}
@-webkit-keyframes fly { from { background-position: 0 0; } to { background-position: 0 -140px; }}
@-moz-keyframes fly { from { background-position: 0 0; } to { background-position: 0 -140px; }}
@keyframes fly { from { background-position: 0 0; } to { background-position: 0 -140px; }}
.hover-me { background-image: url(https://storage.ning.com/topology/rest/1.0/file/get/14644708); height: 184px; position: absolute; right: 5px; top: -5px; width: 274px;}


And here is the code you'll want to add to a HTML module or a page footer (change the bold underline parts with your own):

 

<div class="hover-me"></div>

<div class="follow-wrapper">
<div class="follow-button">
<a href="https://twitter.com/jbirds_co" class="twitter-follow-button" data-show-count="false">Follow @jbirds_co</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>

And here is a demo:

Let me know if you need help with your Ning Community

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

Join Ning Creators Social Network

Email me when people reply –

Replies

This reply was deleted.

Announcements

 

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

Suki Winthrop commented on Steve C's blog post To Ning's CEO
"I too am uncomfortable with this secretive ownership of Ning. We only know there is a Ukrainian co…"
5 hours ago
Ceddy J replied to Ceddy J's discussion
Disk Usage Enforcement
"Thank you for checking into it. "
9 hours ago
Sheshdhar Tiwari posted a discussion
My network's home page got deleted accidentally. Can Ning restore it?sukhanvar.ning.comsukhanvar.co…
13 hours ago
Bobby Morelli, Jeffrey Gross, Magdalena and 4 more joined Ning Creators Social Network
15 hours ago
⚡JFarrow⌁ replied to Fabricio Giugni's discussion
integrate Builderall with Ning
"I don't see how that would be possible.."
yesterday
⚡JFarrow⌁ replied to Fabricio Giugni's discussion
How can I add video from Youtube on landing page?
"wow... ok..glad it worked for you.."
yesterday
Grace Shaki, Martin, Git Along and 16 more joined Ning Creators Social Network
yesterday
Kos replied to Suzie Nielsen's discussion
How to hold a Contest? Thumbs up- on 2.0
"It's been a year.  Has anyone come up with a thumbs up/down script?????"
Sunday
Fabricio Giugni posted a discussion
Hi there,  Can we integrate the Builderall with Ning? The only thing I want from Ning is the abilit…
Saturday
Fabricio Giugni replied to Fabricio Giugni's discussion
How can I add video from Youtube on landing page?
"Hi,
    Thanks, it did work. But I will create this page in some other place. I spend a Thousand do…"
Saturday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
TRICK: Host Your External CSS and JS Files using Dropbox
"I no longer use Dropbox for this...   I use Github....  ask me how if it is too complicated for you…"
Friday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Create a More Exciting "Featured" Email With Language Editor

still one of the most powerful tools and one of the first things I change when I start a new comm…"
Thursday
More…

Meanwhile, you can check our social media channels