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

NC for Hire

Tip 3.0: Simple Social Bar (HTML+CSS)

So you want a simple bar which takes your members to your social profiles.  Here it is..

What we are creating:

HTML (can go in your ABOVE FOOTER HTML box on any page- change to your links)

<ul class="spicesocialwidget">
<li class="facebook">
<a rel="nofollow" href="https://www.facebook.com/" target="_blank" title="facebook">
<div class="tooltip"><span>Facebook</span></div>
</a>
</li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus"></a>
</li>
<li class="pinterest">
<a rel="nofollow" href="https://pinterest.com/" target="_blank" title="pinterest"></a>
</li>
<li class="twitter">
<a rel="nofollow" href="https://twitter.com/" target="_blank" title="twitter"></a>
</li>
<li class="rss">
<a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss"></a>
</li>
<li class="skype">
<a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype"></a>
</li>
<li class="vimeo">
<a rel="nofollow" href="https://www.vimeo.com/" target="_blank" title="vimeo"></a>
</li>
<li class="dribbble">
<a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble"></a>
</li>
<li class="flickr">
<a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr"></a>
</li>
<li class="linkedin">
<a rel="nofollow" href="https://www.linkedin.com/" target="_blank" title="linkedin">
</a>
</li>
<li class="youtube">
<a rel="nofollow" href="https://www.youtube.com/" target="_blank" title="youtube"></a>
</li>
</ul>

CSS (Goes in your Design Studio Advanced CSS)

ul.spicesocialwidget {
/*float:right;*/
margin: 140px 0;
padding: 0;
width: auto;
height: 32px;
border: 1px solid rgba(0,0,0,0.1);
text-align: center;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
ul.spicesocialwidget li {
/*float:left;*/
list-style:none outside none;
border:none;
display: inline-block;
}
ul.spicesocialwidget li a {
background-color:transparent;
background-image:url('https://goo.gl/FxfviT');
background-repeat:no-repeat;
background-size:auto 96px;
border:0 none;
display:block;
height:32px;
/*overflow:hidden;*/
text-align:left;
text-decoration:none;
/*transition:all 0.2s ease 0s;*/
width:32px;
position: relative;
display: flex;
}


.tooltip {
visibility: hidden;
opacity: 0;
position: absolute;
top: -25px;
left: 50%;
z-index: 1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

}
.tooltip span {
position: relative;
left: -50%;
padding: 6px 8px 5px 8px;
border-radius: 3px;
font-size: .7rem;
z-index: 1;
line-height: 1;
}
.tooltip span:after {
position: absolute;
content: " ";
width: 0;
height: 0;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
}
.spicesocialwidget a:hover .tooltip {
display: block;
visibility: visible;
opacity: 1;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px);
}

.ie7 ul.spicesocialwidget li a,
.ie8 ul.spicesocialwidget li a {
background-image:url('https://goo.gl/FxfviT');
}
ul.spicesocialwidget li.facebook a { background-position:0 0; }
ul.spicesocialwidget li.flickr a { background-position:-32px 0; }
ul.spicesocialwidget li.dribbble a { background-position:-64px 0; }
ul.spicesocialwidget li.googleplus a { background-position:-96px 0; }
ul.spicesocialwidget li.linkedin a { background-position:-128px 0; }
ul.spicesocialwidget li.pinterest a { background-position:-160px 0; }
ul.spicesocialwidget li.rss a { background-position:-192px 0; }
ul.spicesocialwidget li.skype a { background-position:-224px 0; }
ul.spicesocialwidget li.twitter a { background-position:-256px 0; }
ul.spicesocialwidget li.vimeo a { background-position:-288px 0; }
ul.spicesocialwidget li.youtube a { background-position:-320px 0; }

ul.spicesocialwidget li.facebook a:hover { background-position:0 -32px}
ul.spicesocialwidget li.flickr a:hover { background-position:-32px -32px}
ul.spicesocialwidget li.dribbble a:hover { background-position:-64px -32px}
ul.spicesocialwidget li.googleplus a:hover { background-position:-96px -32px}
ul.spicesocialwidget li.linkedin a:hover { background-position:-128px -32px}
ul.spicesocialwidget li.pinterest a:hover { background-position:-160px -32px}
ul.spicesocialwidget li.rss a:hover { background-position:-192px -32px}
ul.spicesocialwidget li.skype a:hover { background-position:-224px -32px}
ul.spicesocialwidget li.twitter a:hover { background-position:-256px -32px}
ul.spicesocialwidget li.vimeo a:hover { background-position:-288px -32px}
ul.spicesocialwidget li.youtube a:hover { background-position:-320px -32px}

.spicesocialwidget .facebook span { background: #3b5a9b; color: #dce5ed; text-shadow: 0px 1px 0px #2f487c; }
.spicesocialwidget .facebook span:after { border-top-color: #3b5a9b; }

Happy Holidays!  Let me know if you need help with your Ning Community design or custom ideas! ..

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

Join Ning Creators Social Network

Votes: 0
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

Lady updated their profile photo
12 hours ago
bryant tutas posted a discussion
Cant figure out how to add playlists. All my loaded songs are in the same list and I don't see an …
Tuesday
Angie Breidenbach updated their profile
Monday
Ning Support posted a discussion
 
We’ve expanded Group Admin capabilities with a new permission: Delete Comments
Where to find it…
Sunday
kostasgr liked Alex - Rosas † Negras's discussion I managed to add group video calling, if anyone is interested I will post the codes
Jul 8
Steve C replied to ⚡JFarrow⌁'s discussion
What is going on with Ning? What Do We have to Look Forward To?
"Ning is based in California but operations are in Kyiv, Ukraine. Due to the war, operations may…"
Jul 6
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"⚡JFarrow⌁  
I'm working on the stories and I don't have time to work on the video call you just…"
Jun 28
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"if you want I'll give you the codes privately and we'll see if the two of us can make it perfect"
Jun 27
Eva and ⚡JFarrow⌁ are now friends
NC for Hire
Jun 25
⚡JFarrow⌁ replied to Eva's discussion
For three days now, my networks, Ning 2.0 and Ning 3.0, are incorrectly visible
"Ug... thats not right..  ill send you my phone number in messages and we'll talk it over."
Jun 24
Eva replied to Eva's discussion
Help Help Help
" I just started a test network on Ning. I'm having the same problems there too! No photos, in…"
Jun 21
Eva posted a discussion
Jun 21
More…

Meanwhile, you can check our social media channels