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="" target="_blank" title="facebook">
<div class="tooltip"><span>Facebook</span></div>
<li class="googleplus">
<a rel="nofollow" href="" target="_blank" title="googleplus"></a>
<li class="pinterest">
<a rel="nofollow" href="" target="_blank" title="pinterest"></a>
<li class="twitter">
<a rel="nofollow" href="" target="_blank" title="twitter"></a>
<li class="rss">
<a rel="nofollow" href="" target="_blank" title="rss"></a>
<li class="skype">
<a rel="nofollow" href="" target="_blank" title="Skype"></a>
<li class="vimeo">
<a rel="nofollow" href="" target="_blank" title="vimeo"></a>
<li class="dribbble">
<a rel="nofollow" href="" target="_blank" title="dribble"></a>
<li class="flickr">
<a rel="nofollow" href="" target="_blank" title="flickr"></a>
<li class="linkedin">
<a rel="nofollow" href="" target="_blank" title="linkedin">
<li class="youtube">
<a rel="nofollow" href="" target="_blank" title="youtube"></a>

CSS (Goes in your Design Studio Advanced CSS)

ul.spicesocialwidget {
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 {
list-style:none outside none;
display: inline-block;
ul.spicesocialwidget li a {
background-size:auto 96px;
border:0 none;
/*transition:all 0.2s ease 0s;*/
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 {
ul.spicesocialwidget li.facebook a { background-position:0 0; }
ul.spicesocialwidget 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 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 a { background-position:-320px 0; }

ul.spicesocialwidget li.facebook a:hover { background-position:0 -32px}
ul.spicesocialwidget 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 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 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 –


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⌁ posted a discussion
Last week I made a tool for converting Jquery into Ning compatible jquery which you can find…
⚡JFarrow⌁ posted a discussion
So I've been wrestling with ways to monetize my community for years, including most recently,…
Sep 19
⚡JFarrow⌁ replied to Mark Thorpe's discussion
Creating a Footer with the Tools Given?
"I've got hundreds of footers...i can show you how to work them in..
Sep 13
⚡JFarrow⌁ replied to Mark Thorpe's discussion
External links to new tabs?
"Hey mark... i can show you how to do this but i need a better idea of what you are ultimately…"
Sep 13
crypto bulls updated their profile
Sep 5
Film Fashion updated their profile
Sep 4
⚡JFarrow⌁ posted a discussion
For those who have ever tried to integrate Jquery code into your Ning community, you know that in…
Aug 25
ABS Conveyancing updated their profile
Aug 23
⚡JFarrow⌁ replied to Andrew Harvey's discussion
An Ode to NING - The De-centralized Solution
"Nice work!"
Aug 22
Hinch and Associates PLC updated their profile
Aug 21
Andrew Harvey posted a discussion
Leveling the Economic Playing Field with NING Networks By Andrew Harvey, Creator of the Djemini…
Aug 20
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Silly Simple Solutions #5: Inject Youtube Subscribe Button under Videos in Ning
"Love it!
Aug 19

Meanwhile, you can check our social media channels