[Tut] Social Sidebar

17 posts Page 1 of 2
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

[Tut] Social Sidebar
mikethedj4
Today what we're going to do is create a "Social Sidebar" example preview displayed below.
Image

Step 1: Getting Started
Before we begin make a new folder on your desktop, and name it "social sidebar" inside that folder make another folder called "images" (This is where you should save all your images in Step 2) Inside your "social sidebar" folder make two text documents, 1 being index.html and the other being style.css.

NOTE: When/If you download the sidebar we created make sure you view it in Chrome, Firefox, Safari, or Opera for the best results.

Additionally we'll be using the GNU Image Manipulation Program (aka Gimp) in this tutorial, you can use the same, or any other image editor you may have, all you need is gradients, layers, rectangle curves, and opacity changing on your layers.

Step 2: Sidebar Design
To make things easier take a screenshot of your website by going to your website, and pressing the PrtSC button by your backspace button on your keyboard.

Then open up Gimp and set the dimensions of the project to the dimensions of your desktop.
Paste the screenshot (CTRL-V) and then anchor the layer (CTRL+H)

Make 3 new layers, and name then from this order from bottom to top, "borderblur", "border", "insidegradient"

Now we're going to have our sidebar on the right side of our website, so lets grab our Rectangle Select Tool "R" and make a good selection you think would be decent for a sidebar, and fill that in with black "#000000".
Image

Do the same for the "borderblur" layer and then go to Select/None (SHIFT+CTRL+A) and then Filters/Blur/Gaussian Blur and give it a 16px blur.
Image

Now right click your border layer and select "Alpha to Selection" then go to Select/Shrink and shrink it by 4px now grab your rectangle select tool, or your free select tool and change the mode (in the tools options) and choose "Add to the current selection" and make sure you fill in that part that got shrunk on the edge of our sidebar then grab your gradient tool and choose the gradient "FG to Transparent" and fill that selection from right to left as seen in the screenshot below.
Image

Before we go ahead make sure to save the top part of the sidebar as 1 image, the middle as it's own (the width of all 3 of these should be the same, and the height of this middle image set it as 1px), and the bottom as it's own with all 3 having a transparent background. Our sidebar is nearly complete in designing, yet we still need to add in the social networking icons like facebook, twitter, etc:

So do a Google Image search for the social networking icons you're looking for, and add them into Gimp. Grab your scale tool (Shift+T) and make sure the width of the icons are all the same, and somewhat small. (I made mine all 30px in width)

Then set one icon by one below the other one with some space left between it, then merge all the social networking icons together (make sure they're separated though) then change the name of that layer to "socialicons" and set the opacity of that layer to 45%.
Image

[optional] Now give the "socialicons" a Drop Shadow (Filters/Light and Shadow/Drop Shadow) (I set my X offset to 0, Y offset to 4, and the blur radius can be whatever you want, just make sure it's small. 8px should be good for this project) then change the opacity of the "socialicons" layer back to 100% merge it down to the newly created "Drop Shadow" layer and set the opacity back to 45%, and change the name from "Drop Shadow" to "socialicons" if not already done so.

Now duplicate the "socialicons" and set the name of the duplicated layer to "socialicons2" and set the opacity of this layer to 75%.
Image

Now click on the "socialicons" layer and go to Layer/Autocrop Layer and do the same with the "socialicons2" layer. Now delete all the other layers, but thoughs two. Then go to Image/Autocrop Image.
Image

As you guys can see in the screenshot above I chose RSS, Facebook, and Twitter so grab your Rectangle Select Tool "R" and delete the facebook, and twitter icons in each layer then go to Layer/Autocrop Layer and on each layer then Image/Autocrop Image. Go to Image/Canvas Size and make the height x2 of what it is, but the width the same. For example if the image is 30x30 set it to 30x60. Then move the "socialicon2" layer right below the "socialicon" layer then save that image as name.png (I save my rss image as rss.png) Then do that to the rest of the social networking icons. (Don't forget to undo (Edit/Undo or CTRL+Z) so you can do this same process for the other social networking icons)

[optional] Now I decided to make a background image so we don't have a plain background color, if you wanna do this, just open the warning pattern into Gimp select the yellow line with your Color Select Tool "O" and change it from Yellow to #3b3b3b, and save it as bg.png.

Step 3: The Stylesheet
Now open up your style.css file you created when starting this tutorial.
Code: Select all
body {
	height:2000px;
	background-image:url('images/bg.png');
	background-attachment:top left;
	background-repeat:repeat;}
This code tells us our body (aka background) will be at 2000px in height, that way we have a scrollbar, it also tells us we set the bg.png image we made above as our background image, and that it's displayed in the top left, and that it'll repeat for the whole website.
Code: Select all
#sidebar {
	position:fixed;
	top:100px;
	right:0px;
	width:82px;}
This is the code that's gonna position our images so that they stay in the same spot, so what it's telling us is that we called this div sidebar, it's position is set to fixed, so that it'll stay put when we scroll, it'll go down 100px from the top, aligned directly on the right side of the browser, and the width is set to 82px (this should be the width of the sidebar you created when we began).
Code: Select all
#topsidebar {
	width:82px;
	height:42px;
	background-image:url('images/topsidebar.png');}
This part of the code tells us that the div we created is called topsidebar, it's width is 82px (width of the sidebar, remember), the height is 42px (this is the height of the top sidebar we saved), and we also embedded the topsidebar image we created earlier as it's background image.
Code: Select all
#midsidebar {
	margin-left:2px;
	width:82px;
	background-image:url('images/midsidebar.png');
	background-repeat:repeat-y;}
Here we created a div for the middle part of the sidebar, now it actually went 2px to the left instead of staying directly on the right side, so I fixed that with margin-left:2px; so it'll stay on the right, we then gave it's width, set it's background image, and had it repeat vertically so each time we add a social networking site, our sidebar will expand :)
Code: Select all
#socialmedia {
	margin-left:31px;}
We create this div so that our social networking icons will be right in the middle of the sidebar, as without this div, they'll be positioned a little on the left of our sidebar, and we want them in the middle, which is why we created this div.
Code: Select all
#bottomsidebar {
	width:82px;
	height:42px;
	background-image:url('images/bottomsidebar.png');}
This div is to display out bottom sidebar, as you can see the width, and height of this div is of our bottom siderbar image we saved, and we set that as the background color of this div.
Code: Select all
a.rss {
	display:block;
	width:45px;
	height:45px;
	background-image:url(images/rss.png);
	background-position:top left;}

a.rss:hover {
	background-position:bottom left;}
Now here we created an image rollover, the class for this rollover is named RSS, which here we set the width of the RSS image we created, but the height is half the size of the original image, as we set the background image, and it's positioned on the top left, but when overed over it shows the bottom left. For a better understanding of css image rollovers view my video tutorial here on one image rollovers in CSS.
Code: Select all
a.facebook {
	display:block;
	width:43px;
	height:43px;
	background-image:url(images/facebook.png);
	background-position:top left;}

a.facebook:hover {
	background-position:bottom left;}

a.twitter {
	display:block;
	width:43px;
	height:43px;
	background-image:url(images/twitter.png);
	background-position:top left;}

a.twitter:hover {
	background-position:bottom left;}
This is just the rest of the code for the class of the image rollovers for the facebook, and twitter links.

Here's our the full CSS code.
Code: Select all
body {
height:2000px;
background-image:url('images/bg.png');
background-attachment:top left;
background-repeat:repeat;}
#sidebar {
position:fixed;
top:100px;
right:0px;
width:82px;}

#topsidebar {
width:82px;
height:42px;
background-image:url('images/topsidebar.png');}

#midsidebar {
margin-left:2px;
width:82px;
background-image:url('images/midsidebar.png');
background-repeat:repeat-y;}

#socialmedia {
margin-left:31px;}

#bottomsidebar {
width:82px;
height:42px;
background-image:url('images/bottomsidebar.png');}

a.rss {
display:block;
width:45px;
height:45px;
background-image:url(images/rss.png);
background-position:top left;}

a.rss:hover {
background-position:bottom left;}

a.facebook {
display:block;
width:43px;
height:43px;
background-image:url(images/facebook.png);
background-position:top left;}

a.facebook:hover {
background-position:bottom left;}

a.twitter {
display:block;
width:43px;
height:43px;
background-image:url(images/twitter.png);
background-position:top left;}

a.twitter:hover {
background-position:bottom left;}
Step 4: The HTML
Now open your index.html file and lets begin marking everything up.

First we need to startout with our HTML tags
Code: Select all
<html>

</html>
We then need to add our head and title tags for the name of the page.
Code: Select all
<html>
<head>
<title>Social Sidebar</title>
</head>
</html>
Now lets add in our style sheet we created earlier.
Code: Select all
<html>
<head>
<title>Social Sidebar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
Now lets add in our body tags, and then lets get our sidebar in here.
Code: Select all
<html>
<head>
<title>Social Sidebar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sidebar">

</div>
</body>
</html>
Now we add in our topsidebar div. (Notice the sidebar div it's self is going to be the last to close with the sidebar, the reason for this is to make sure everything is positioned right, and inside that div, cause remember that's the div we used for positioning. the top sidebar will be put in first, and closed to display that as the top sidebar)
Code: Select all
<html>
<head>
<title>Social Sidebar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sidebar">
<div id="topsidebar"></div>
</div>
</body>
</html>
Now here we added in out midsidebar div.
Code: Select all
<html>
<head>
<title>Social Sidebar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sidebar">
<div id="topsidebar"></div>
<div id="midsidebar">

</div>
</div>
</body>
</html>
Now here we added our socialmedia div inside the midsidebar div so that how many rollovers you have you can embed all thoughs inside (like I did) and it'll keep expanding.
Code: Select all
<html>
<head>
<title>Social Sidebar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sidebar">
<div id="topsidebar"></div>
<div id="midsidebar">
<div id="socialmedia">

<a title="Subscribe To My RSS Feed!" href="http://officialspeed.tk/?feed=rss" class="rss"></a>
<a title="Become a Fan on FaceBook!" href="http://officialspeed.tk/facebook" class="facebook"></a>
<a title="Follow me on Twitter!" href="http://officialspeed.tk/twitter" class="twitter"></a>

</div>
</div>
</div>
</body>
</html>
Now here all we need to do is put our bottomsidebar div outside of the midsidebar, and socialmedia div's so it'll display on the bottom of our siderbar div.
Code: Select all
<html>
<head>
<title>Social Sidebar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sidebar">
<div id="topsidebar"></div>
<div id="midsidebar">
<div id="socialmedia">

<a title="Subscribe To My RSS Feed!" href="http://officialspeed.tk/?feed=rss" class="rss"></a>
<a title="Become a Fan on FaceBook!" href="http://officialspeed.tk/facebook" class="facebook"></a>
<a title="Follow me on Twitter!" href="http://officialspeed.tk/twitter" class="twitter"></a>

</div>
</div>
<div id="bottomsidebar"></div>
</div>
</body>
</html>
There you guys go on how to create the Social Sidebar :)

TIP: If you click and drag the index.html file we created into a web browser you'll be able to see the social sidebar we created in action.
Last edited by mikethedj4 on Sat Apr 23, 2011 2:11 pm, edited 2 times in total.
User avatar
Snyper345
VIP - Donator
VIP - Donator
Posts: 471
Joined: Mon Nov 01, 2010 1:53 am

Re: Social Sidebar
Snyper345
Nice one mike , i'll try it out when i get back home :D i only had a skim through but it sounds promising :P
Image
Image
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Social Sidebar
mikethedj4
Thanks :) (Spent about 3-4 hours just writing the tutorial, to make it nice, and user friendly for beginners)
User avatar
Axel
Coding God
Coding God
Posts: 1928
Joined: Sun Jun 27, 2010 9:15 pm

Re: Social Sidebar
Axel
Nice tutorial and user friendly ! but I don't have a website to try it on :(
http://vagex.com/?ref=25000
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Social Sidebar
mikethedj4
No need to you can download the zip (or make the whole creation as done in the tutorial) and move the index.html file into your web browser to test it out.
User avatar
Kieken72
VIP - Donator
VIP - Donator
Posts: 231
Joined: Sun May 02, 2010 10:38 am

Re: Social Sidebar
Kieken72
is it also possible to trurn it CCW 90° ?
and how? :s
User avatar
Danny
VIP - Donator
VIP - Donator
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm

Re: Social Sidebar
Danny
wow I like it I gonna try it on my website =D thanks
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Social Sidebar
mikethedj4
Kieken72 wrote:
is it also possible to trurn it CCW 90° ?
and how? :s
Yes just go to Image/Transform/Rotate 90° CCW That will rotate your whole project 90° CCW.
himeji-jo wrote:
wow I like it I gonna try it on my website =D thanks
Thanks, and No Problem
User avatar
Usman55
VIP - Site Partner
VIP - Site Partner
Posts: 2821
Joined: Thu Dec 24, 2009 7:52 pm

Re: Social Sidebar
Usman55
User-friendly tutorial, which I like! Thanks!
Image
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Social Sidebar
mikethedj4
No +rep :( lol

Of course it's user friendly, it's me :)
17 posts Page 1 of 2
Return to “Tutorials”