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.
 

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

⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Tip: How to Add an Easy to Manage News Ticker
"View the demo full page here"
10 hours ago
Fabrizio Lavado replied to CJ Coster's discussion
SSL
"Hi Kyril. I have similar issue with my SSL certificate. Same as CJ Coster and J.Ayvar. I have writt…"
13 hours ago
Fabrizio Lavado replied to Fabrizio Lavado's discussion
HTTPS Network
"An error message appears stating that my certificate is invalid. I have been confirmed by Godaddy t…"
13 hours ago
⚡JFarrow⌁ replied to Ceddy J's discussion
GDPR Compliant?
"I tested several Ning sites using this tooland they all seem to have the same issues with GDPR
Wond…"
14 hours ago
Fabrizio Lavado replied to Fabrizio Lavado's discussion
HTTPS Network
"Hi. I have uploaded certificate and key, and activated SSL on my network. But it failed to show my…"
18 hours ago
Suzie Nielsen replied to Suzie Nielsen's discussion
Leaderboards
"Thanks!! You have been so helpful! I appreciate you!"
yesterday
Annabel Gregory replied to Annabel Gregory's discussion
Broadcast message not received
"Sorry, I've just spoken to somebody else at Virgin Media who gave me a totally different story. It'…"
yesterday
Laszlo Czinege replied to Kyryl_Ning_Support's discussion
SSL certificate feature release
"Thank you Kyryl, you are very kind."
yesterday
Annabel Gregory replied to Annabel Gregory's discussion
Broadcast message not received
"Virgin Media say that these IP addresses are not blocked by them.
 "
yesterday
Annabel Gregory replied to Annabel Gregory's discussion
Broadcast message not received
"Many thanks for your explanations, Kyryl. I will check the first issue out (and it was useful to ha…"
yesterday
Kyryl_Ning_Support replied to Annabel Gregory's discussion
Broadcast message not received
"Hi there!
The broadcast messages and regular notifications could be sent from different mailing ser…"
yesterday
Kyryl_Ning_Support replied to Suzie Nielsen's discussion
It's a disappearing act!
"Hi there!
Please check my reply here.
Best wishes,
Ning Team."
Friday
More…

Meanwhile, you can check our social media channels