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

Hugh replied to Hugh's discussion
Who Owns Ning Now?
"It's odd isn't it. A very short answer from Ning Support would do the trick for me. "
4 hours ago
Hugh replied to Hugh's discussion
Ning Failures Continue to Mount up
"Thanks Anastasia. I do hope you're able to get a fix soon. 
(By the way, I never get any notificati…"
4 hours ago
Hugh replied to Hugh's discussion
Ning Failures Continue to Mount up
"Should anyone else stumble across this thread when looking for an answer about randomly rotated pho…"
4 hours ago
Scott Bishop posted a discussion
Why is it that when members upload videos from Youtube via url or iframe it just shows the thumbnai…
5 hours ago
⚡JFarrow⌁ replied to Fabricio Giugni's discussion
Css code help please
"in order to relocate your Like button you would have most likely had to install some javascript int…"
7 hours ago
⚡JFarrow⌁ replied to Hugh's discussion
Who Owns Ning Now?
"I believe the last company i heard about was called Ning Interactive but that has been a while.."
8 hours ago
Sir Gissachance liked Anastasia_Ning_Support's discussion Welcome Landing Page Builder
8 hours ago
Naveen Jain replied to Hugh's discussion
Who Owns Ning Now?
"Surprised that there is no response."
9 hours ago
Naveen Jain posted a discussion
Hi, I need to set up conversion tracking of my website https://culytics.com/ . for this purpose I h…
9 hours ago
Tony19 replied to Greg Pond's discussion
Ning help = No help. On the way out?
"Ciao Anastasia. 
Anche sui miei network c'è lo stesso problema. E' impossibile caricare le foto:
"S…"
12 hours ago
Anastasia_Ning_Support replied to Hugh's discussion
Ning Failures Continue to Mount up
"Hello Hugh!
The issue with photo upload is already in the process of solving, so I believe the fix…"
16 hours ago
Anastasia_Ning_Support replied to Greg Pond's discussion
Ning help = No help. On the way out?
"Hello Greg! 
Please let me express my sincere apologies. 
I see that the list of the recent issues…"
16 hours ago
More…

Meanwhile, you can check our social media channels