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

FORUM

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

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

kostasgr posted a discussion
Does my site have a valid.... HTTPS ..certificate, but has it been running unsafe for the last 14 h…
9 hours ago
Walter Cotton updated their profile
14 hours ago
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
NING is now available on Zapier
"Hi there!
We have already requested to change the instruction on the partner`s side, it should be c…"
20 hours ago
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
Important update on social Sign Up & Sign In
"Hello!
I am sorry, I made a mistake in my previous reply, I meant it i snot possible to appoint mul…"
21 hours ago
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
Advanced Search by Members
"Hi there!
Our team is currently working on the new design of the member`s page. Once it is released…"
21 hours ago
Kenneth McLeod, NoName, Donna Maria and 4 more joined Ning Creators Social Network
21 hours ago
⚡JFarrow⌁ replied to Anastasia_Ning_Support's discussion
NING is now available on Zapier
"there isn't a tools menu when logged in as creator..."
yesterday
⚡JFarrow⌁ replied to Anastasia_Ning_Support's discussion
NING is now available on Zapier
"cool but where do we find "Tools""
yesterday
Chris Colvin updated their profile
yesterday
Ana Massien replied to Anastasia_Ning_Support's discussion
Advanced Search by Members
"You can add it via find element in your browser settings if you know how, but you should limit the…"
Monday
Ana Massien replied to Ana Massien's discussion
Network Chat
"Sounds good."
Monday
Ana Massien updated their profile
Monday
More…

Meanwhile, you can check our social media channels