{"id":343,"date":"2015-05-03T02:24:58","date_gmt":"2015-05-03T02:24:58","guid":{"rendered":"http:\/\/www.cssportal.com\/blog\/?p=343"},"modified":"2024-02-28T23:28:09","modified_gmt":"2024-02-28T23:28:09","slug":"css-social-media-sidebar","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/css-social-media-sidebar\/","title":{"rendered":"CSS Social Media Sidebar"},"content":{"rendered":"<p>Social media is a main part of the internet these days, so today we will show you how to create a simple css social media sidebar using only css code. The example will create a sidebar positioned on the left hand side of the page and the <a href=\"http:\/\/www.cssportal.com\/css-properties\/position.php\">position<\/a> will be fixed, meaning that when the user scrolls the page, the sidebar will remain in the same position.<!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2015\/05\/socialbar.png\" alt=\"socialbar\" width=\"250\" height=\"125\" class=\"aligncenter size-full wp-image-344\" \/><\/p>\n<p>In this example we will be using the entypo font from <a href=\"http:\/\/weloveiconfonts.com\/\">http:\/\/weloveiconfonts.com\/<\/a>, this font has many social media icons. We have used 9 sites, but you can add or remove any social media icon with ease.<\/p>\n<p>Lets get down to the code, first off will be the html code that we have used.<\/p>\n<pre class=\"language-html\"><code><xmp><aside id=\"sticky-social\">\r\n    <ul>\r\n        <li><a href=\"#\" class=\"entypo-facebook\" target=\"_blank\" rel=\"noopener\"><span>Facebook<\/span><\/a><\/li>\r\n        <li><a href=\"#\" class=\"entypo-twitter\" target=\"_blank\" rel=\"noopener\"><span>Twitter<\/span><\/a><\/li>\r\n        <li><a href=\"#\" class=\"entypo-gplus\" target=\"_blank\" rel=\"noopener\"><span>Google+<\/span><\/a><\/li>\r\n        <li><a href=\"#\" class=\"entypo-linkedin\" target=\"_blank\" rel=\"noopener\"><span>LinkedIn<\/span><\/a><\/li>\r\n        <li><a href=\"#\" class=\"entypo-instagrem\" target=\"_blank\" rel=\"noopener\"><span>Instagram<\/span><\/a><\/li>\r\n        <li><a href=\"#\" class=\"entypo-stumbleupon\" target=\"_blank\" rel=\"noopener\"><span>StumbleUpon<\/span><\/a><\/li>\r\n        <li><a href=\"#\" class=\"entypo-pinterest\" target=\"_blank\" rel=\"noopener\"><span>Pinterest<\/span><\/a><\/li>\r\n        <li><a href=\"#\" class=\"entypo-flickr\" target=\"_blank\" rel=\"noopener\"><span>Flickr<\/span><\/a><\/li>\r\n        <li><a href=\"#\" class=\"entypo-tumblr\" target=\"_blank\" rel=\"noopener\"><span>Tumblr<\/span><\/a><\/li>\r\n    <\/ul>\r\n<\/aside>\r\n<\/xmp><\/code><\/pre>\n<p>The code above is pretty straight forward, as can be seen, we have used the <span class=\"code\">ul<\/span> <a href=\"https:\/\/www.cssportal.com\/html-tags\/tag-ul.php\" title=\"Unordered Tag\" target=\"_blank\" rel=\"noopener\">unordered tag<\/a> to display our social media sidebar. We have left off some html code from the project as it&#8217;s not relevant to for the actual sidebar, you can see all the code on our demo page <a href=\"https:\/\/www.cssportal.com\/tryit\/index.php?file=blog\/social-media-sidebar\" title=\"Social Media Sidebar\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p>The following css code will be used to style our page and sidebar.<\/p>\n<pre class=\"language-css\"><code>@import url(http:\/\/weloveiconfonts.com\/api\/?family=entypo);\r\n\r\n\/* entypo *\/\r\n[class*=\"entypo-\"]:before {\r\n   font-family: \"entypo\", sans-serif;\r\n}\r\na { \r\n   text-decoration: none;\r\n}\r\nul {\r\n   list-style: none;\r\n   margin: 0;\r\n   padding: 0;\r\n}\r\n.container {\r\n   margin: 0 auto;\r\n   padding: 20px 50px;\r\n   background: white;\r\n}\r\n#sticky-social {\r\n   left: 0;\r\n   position: fixed;\r\n   top: 150px;\r\n}\r\n#sticky-social a {\r\n   background: #333;\r\n   color: #fff;\r\n   display: block;\r\n   height: 35px;\r\n   font: 16px \"Open Sans\", sans-serif;\r\n   line-height: 35px;\r\n   position: relative;\r\n   text-align: center;\r\n   width: 35px;\r\n}\r\n#sticky-social a span {\r\n   line-height: 35px;\r\n   left: -120px;\r\n   position: absolute;\r\n   text-align:center;\r\n   width:120px;\r\n}\r\n#sticky-social a:hover span {\r\n   left: 100%;\r\n}\r\n#sticky-social a[class*=\"facebook\"],\r\n#sticky-social a[class*=\"facebook\"]:hover,\r\n#sticky-social a[class*=\"facebook\"] span { background: #3b5998; }\r\n\r\n#sticky-social a[class*=\"twitter\"],\r\n#sticky-social a[class*=\"twitter\"]:hover,\r\n#sticky-social a[class*=\"twitter\"] span { background: #00aced; }\r\n\r\n#sticky-social a[class*=\"gplus\"],\r\n#sticky-social a[class*=\"gplus\"]:hover,\r\n#sticky-social a[class*=\"gplus\"] span { background: #dd4b39; }\t\r\n\r\n#sticky-social a[class*=\"linkedin\"],\r\n#sticky-social a[class*=\"linkedin\"]:hover,\r\n#sticky-social a[class*=\"linkedin\"] span { background: #007bb6; }\t\r\n\r\n#sticky-social a[class*=\"instagrem\"],\r\n#sticky-social a[class*=\"instagrem\"]:hover,\r\n#sticky-social a[class*=\"instagrem\"] span { background: #517fa4; }\t\r\n\r\n#sticky-social a[class*=\"stumbleupon\"],\r\n#sticky-social a[class*=\"stumbleupon\"]:hover,\r\n#sticky-social a[class*=\"stumbleupon\"] span { background: #eb4924; }\t\r\n\r\n#sticky-social a[class*=\"pinterest\"],\r\n#sticky-social a[class*=\"pinterest\"]:hover,\r\n#sticky-social a[class*=\"pinterest\"] span { background: #cc2127; }\t\r\n\r\n#sticky-social a[class*=\"flickr\"],\r\n#sticky-social a[class*=\"flickr\"]:hover,\r\n#sticky-social a[class*=\"flickr\"] span { background: #ff0084; }\t\r\n\r\n#sticky-social a[class*=\"tumblr\"],\r\n#sticky-social a[class*=\"tumblr\"]:hover,\r\n#sticky-social a[class*=\"tumblr\"] span { background: #32506d; }<\/code><\/pre>\n<p>We&#8217;ll have a look at a few key points of the above css code to see how it all works.<\/p>\n<p><span class=\"code\">ul<\/span> &#8211; Here will set the <a href=\"https:\/\/www.cssportal.com\/css-properties\/list-style.php\">list-style<\/a> to none to remove bullets.<br \/>\n<span class=\"code\">#sticky-social<\/span> &#8211; This rule will set the position to fixed, display the sidebar on the left and 150px from the top of the page.<br \/>\n<span class=\"code\">#sticky-social a<\/span> &#8211; This is where we style the individual social media site buttons, we have set the width, height and color.<br \/>\n<span class=\"code\">#sticky-social a span<\/span> &#8211; This rule will position the &lt;span&gt; with the name of the social media site off screen until we hover over our button.<br \/>\n<span class=\"code\">#sticky-social a:hover span<\/span> &#8211; Only one property here, but very important, when we hover over our buttons, the &lt;span&gt; with the text of the site will display.<br \/>\n<span class=\"code\">#sticky-social a[class*=&#8221;facebook&#8221;] etc<\/span> &#8211; The remainder of the code displays the background color for each individual social media site, it sets the color for the button, when hovering and the &lt;span&gt;.<\/p>\n<p>That&#8217;s it&#8230;easy wasn&#8217;t it \ud83d\ude42<br \/>\nI hope you have enjoyed this tutorial and that it will help you set up your own social media sidebar on your website.<\/p>\n<p>As usual we have set up a demo of this post, so that you can see the code in action and experiment with it. Just click on the button below to be taken to our code playground.<\/p>\n<p><a target=\"_blank\" class=\"btn btn-primary\" href=\"https:\/\/www.cssportal.com\/tryit\/index.php?file=blog\/social-media-sidebar\" rel=\"noopener\">Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Social media is a main part of the internet these days, so today we will show you how to create a simple css social media sidebar using only css code. The example will create a sidebar positioned on the left hand side of the page and the position will be fixed, meaning that when the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":668,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-343","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=343"}],"version-history":[{"count":4,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/343\/revisions"}],"predecessor-version":[{"id":669,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/343\/revisions\/669"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media\/668"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}