Choose from our various pricing plans. There is a package for everyone!


Add floating social icons on your forum

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

Tutorial Add floating social icons on your forum

Post by Mati™ on Sun Jul 29, 2012 10:38 pm

First topic message reminder :

Hello,

This tutorial shows you how to add a floating Social icons on your forum.

HTML code that will display the icons, and will link to the required locations. Just make sure you put the html in your Homepage message.

The HTML:
Code:
<ul id="social_side">
<li><a href="#" title="Like Us"><img src="http://cdn5.iconfinder.com/data/icons/Mighty_Social_Icons/32/facebook_32.png"></a></li>
<li><a href="#" title="Follow Us"><img src="http://cdn3.iconfinder.com/data/icons/socialmediabookmark/32/twitter.png"></a></li>
<li><a href="#" title="Subscribe"><img src="http://cdn1.iconfinder.com/data/icons/socialmediabookmark/32/youtube.png"></a></li>
<li><a href="#" title="Rules"><img src="http://cdn5.iconfinder.com/data/icons/Absolute%2032-PNG/32/Warning.png"></a></li>
<li><a href="#" title="Help"><img src="http://cdn1.iconfinder.com/data/icons/Aristocracy_WebDesignTuts/32/Lifebuoy.png"></a></li>
</ul>

CSS code that will make sure the icons stick to the right side of the forum.

You need to add the following code to the stylesheet.

The CSS:
Code:
#social_side{
list-style:none;
position:fixed;
z-index:5;
right:0;
top:130px;
width:40px;
padding:8px 5px;
border:2px solid #fff;
border-right:none;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
-moz-box-shadow:0 0 7px rgba(0,0,0,.6);
-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);
box-shadow:0 0 7px rgba(0,0,0,.6);
background: #fff;
}
#social_side li{
margin:9px 0 0 0;
line-height:0;
}
#social_side li:first-child{
margin-top:0;
}

The Icons
These icons are from Iconfinder. Please visit the site for more icons.

If you have any problems be sure to post them and I will get back to you A.S.A.P.

The Demo!


Last edited by Mati™ on Sat Nov 15, 2014 2:14 am; edited 3 times in total
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down


Tutorial Re: Add floating social icons on your forum

Post by unleashed on Sat Sep 07, 2013 10:39 am

wow  u are awsome this wot i need cheers 
can u do it plssssssssssssssssssss
it not appear at where do i need to put this code ?
Thank you soooooooooo much
avatar
unleashed
Member
Member

Age : 31
Posts : 22
Join date : 2013-08-24
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Th1nK on Sat Sep 07, 2013 2:49 pm

Ready.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by unleashed on Sat Sep 07, 2013 2:58 pm

omg this is awsome thanks alot mate for helping me sorry for bothering u Razz

at last thing on this

how do i redirect for example to facebook ?

i mean where should i edit is it in ( title ) ?Very Happy 
avatar
unleashed
Member
Member

Age : 31
Posts : 22
Join date : 2013-08-24
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Th1nK on Sat Sep 07, 2013 4:29 pm

Code:
 <li><a href="#" title="Like Us"><img src="http://cdn5.iconfinder.com/data/icons/Mighty_Social_Icons/32/facebook_32.png"></a></li>
This is the link on click:
Code:
<a href="YOUR LINK HERE" title="TITLE HERE">
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Sponsored content


Sponsored content


Back to top Go down

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum