Tips + Tricks - Social Sidebar

I've been in the processing of re-designing my site and while that's taking longer than it should, I had something come out of it I thought others might benefit from! Plus, I'd been wanting to do a design or tips + tricks post FOREVER but didn't know what to post on.


When I redid my sidebar I switched up my Social Media Icons and thought I'd share the little trick I used since maybe you're looking to Do It Yourself on your own blog!

I'm using an image map code from this helpful website and because I've done most of the work for you, all you have to do is grab the code below each social sidebar image below and replace the FIVE (5) YOUR LINK HERE sections with your very own social links as these are dead to the freakin' world at the moment.

Each color has a larger version on top and then a smaller option right below it for your preference.

Don't forget to double click and CTRL + C (copy) the code from the box of whichever image you're using.

GOLD

<img id="Image-Maps-Com-image-maps-2014-03-09-145726" src="http://bit.ly/1h4shfz" border="0" usemap="#image-maps-2014-03-09-145726" alt="" /><br /> <map name="image-maps-2014-03-09-145726" id="ImageMapsCom-image-maps-2014-03-09-145726"><br /> <area shape="rect" coords="2,0,42,38" alt="Bloglovin" title="Bloglovin" style="outline:none;" target="_self" href="YOUR BLOGLOVIN LINK"/><area shape="rect" coords="49,0,94,38" alt="Pinterest" title="Pinterest" style="outline:none;" target="_self" href="YOUR PINTEREST LINK"/><area shape="rect" coords="102,0,154,38" alt="Twitter" title="Twitter" style="outline:none;" target="_self" href="YOUR TWITTER LINK"/><area shape="rect" coords="159,0,197,38" alt="Facebook" title="Facebook" style="outline:none;" target="_self" href="YOUR FACEBOOK LINK"/><area shape="rect" coords="201,0,245,38" alt="Instagram" title="Instagram" style="outline:none;" target="_self" href="OUR INSTAGRAM LINK"/><area shape="rect" coords="-2,-2,," alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" /></map>


<img id="Image-Maps-Com-image-maps-2014-03-09-154211" src="http://bit.ly/1cnSCaS" border="0" usemap="#image-maps-2014-03-09-154211" alt="" /><br /> <map name="image-maps-2014-03-09-154211" id="ImageMapsCom-image-maps-2014-03-09-154211"><br /> <area shape="rect" coords="33,0,65,38" alt="Bloglovin" title="Bloglovin" style="outline:none;" target="_self" href="YOUR BLOGLOVIN LINK" /><area shape="rect" coords="68,0,102,38" alt="Pinterest" title="Pinterest" style="outline:none;" target="_self" href="YOUR PINTEREST LINK" /><area shape="rect" coords="108,0,145,38" alt="Twitter" title="Twitter" style="outline:none;" target="_self" href="YOUR TWITTER LINK" /><area shape="rect" coords="147,0,180,38" alt="Facebook" title="Facebook" style="outline:none;" target="_self" href="YOUR FACEBOOK LINK" /><area shape="rect" coords="180,0,216,38" alt="Insta" title="Insta" style="outline:none;" target="_self" href="YOUR INSTAGRAM LINK" /><area shape="rect" coords="-2,-2,," alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" /></map>

PINK

<img id="Image-Maps-Com-image-maps-2014-03-09-145726" src="http://bit.ly/1fORqy5" border="0" usemap="#image-maps-2014-03-09-145726" alt="" /><br /> <map name="image-maps-2014-03-09-145726" id="ImageMapsCom-image-maps-2014-03-09-145726"><br /> <area shape="rect" coords="2,0,42,38" alt="Bloglovin" title="Bloglovin" style="outline:none;" target="_self" href="YOUR BLOGLOVIN LINK"/><area shape="rect" coords="49,0,94,38" alt="Pinterest" title="Pinterest" style="outline:none;" target="_self" href="YOUR PINTEREST LINK"/><area shape="rect" coords="102,0,154,38" alt="Twitter" title="Twitter" style="outline:none;" target="_self" href="YOUR TWITTER LINK"/><area shape="rect" coords="159,0,197,38" alt="Facebook" title="Facebook" style="outline:none;" target="_self" href="YOUR FACEBOOK LINK"/><area shape="rect" coords="201,0,245,38" alt="Instagram" title="Instagram" style="outline:none;" target="_self" href="OUR INSTAGRAM LINK"/><area shape="rect" coords="-2,-2,," alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" /></map>


<img id="Image-Maps-Com-image-maps-2014-03-09-154211" src="http://bit.ly/1k7YKEy" border="0" usemap="#image-maps-2014-03-09-154211" alt="" /><br /> <map name="image-maps-2014-03-09-154211" id="ImageMapsCom-image-maps-2014-03-09-154211"><br /> <area shape="rect" coords="33,0,65,38" alt="Bloglovin" title="Bloglovin" style="outline:none;" target="_self" href="YOUR BLOGLOVIN LINK" /><area shape="rect" coords="68,0,102,38" alt="Pinterest" title="Pinterest" style="outline:none;" target="_self" href="YOUR PINTEREST LINK" /><area shape="rect" coords="108,0,145,38" alt="Twitter" title="Twitter" style="outline:none;" target="_self" href="YOUR TWITTER LINK" /><area shape="rect" coords="147,0,180,38" alt="Facebook" title="Facebook" style="outline:none;" target="_self" href="YOUR FACEBOOK LINK" /><area shape="rect" coords="180,0,216,38" alt="Insta" title="Insta" style="outline:none;" target="_self" href="YOUR INSTAGRAM LINK" /><area shape="rect" coords="-2,-2,," alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" /></map>

BLACK

<img id="Image-Maps-Com-image-maps-2014-03-09-145726" src="http://bit.ly/1kG4WpX" border="0" usemap="#image-maps-2014-03-09-145726" alt="" /><br /> <map name="image-maps-2014-03-09-145726" id="ImageMapsCom-image-maps-2014-03-09-145726"><br /> <area shape="rect" coords="2,0,42,38" alt="Bloglovin" title="Bloglovin" style="outline:none;" target="_self" href="YOUR BLOGLOVIN LINK"/><area shape="rect" coords="49,0,94,38" alt="Pinterest" title="Pinterest" style="outline:none;" target="_self" href="YOUR PINTEREST LINK"/><area shape="rect" coords="102,0,154,38" alt="Twitter" title="Twitter" style="outline:none;" target="_self" href="YOUR TWITTER LINK"/><area shape="rect" coords="159,0,197,38" alt="Facebook" title="Facebook" style="outline:none;" target="_self" href="YOUR FACEBOOK LINK"/><area shape="rect" coords="201,0,245,38" alt="Instagram" title="Instagram" style="outline:none;" target="_self" href="OUR INSTAGRAM LINK"/><area shape="rect" coords="-2,-2,," alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" /></map>


<img id="Image-Maps-Com-image-maps-2014-03-09-154211" src="http://bit.ly/1cHkck3" border="0" usemap="#image-maps-2014-03-09-154211" alt="" /><br /> <map name="image-maps-2014-03-09-154211" id="ImageMapsCom-image-maps-2014-03-09-154211"><br /> <area shape="rect" coords="33,0,65,38" alt="Bloglovin" title="Bloglovin" style="outline:none;" target="_self" href="YOUR BLOGLOVIN LINK" /><area shape="rect" coords="68,0,102,38" alt="Pinterest" title="Pinterest" style="outline:none;" target="_self" href="YOUR PINTEREST LINK" /><area shape="rect" coords="108,0,145,38" alt="Twitter" title="Twitter" style="outline:none;" target="_self" href="YOUR TWITTER LINK" /><area shape="rect" coords="147,0,180,38" alt="Facebook" title="Facebook" style="outline:none;" target="_self" href="YOUR FACEBOOK LINK" /><area shape="rect" coords="180,0,216,38" alt="Insta" title="Insta" style="outline:none;" target="_self" href="YOUR INSTAGRAM LINK" /><area shape="rect" coords="-2,-2,," alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" /></map>

TEAL

<img id="Image-Maps-Com-image-maps-2014-03-09-145726" src="http://bit.ly/1cGYbSm" border="0" usemap="#image-maps-2014-03-09-145726" alt="" /><br /> <map name="image-maps-2014-03-09-145726" id="ImageMapsCom-image-maps-2014-03-09-145726"><br /> <area shape="rect" coords="2,0,42,38" alt="Bloglovin" title="Bloglovin" style="outline:none;" target="_self" href="YOUR BLOGLOVIN LINK"/><area shape="rect" coords="49,0,94,38" alt="Pinterest" title="Pinterest" style="outline:none;" target="_self" href="YOUR PINTEREST LINK"/><area shape="rect" coords="102,0,154,38" alt="Twitter" title="Twitter" style="outline:none;" target="_self" href="YOUR TWITTER LINK"/><area shape="rect" coords="159,0,197,38" alt="Facebook" title="Facebook" style="outline:none;" target="_self" href="YOUR FACEBOOK LINK"/><area shape="rect" coords="201,0,245,38" alt="Instagram" title="Instagram" style="outline:none;" target="_self" href="OUR INSTAGRAM LINK"/><area shape="rect" coords="-2,-2,," alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" /></map>


<img id="Image-Maps-Com-image-maps-2014-03-09-154211" src="http://bit.ly/1fYh25S" border="0" usemap="#image-maps-2014-03-09-154211" alt="" /><br /> <map name="image-maps-2014-03-09-154211" id="ImageMapsCom-image-maps-2014-03-09-154211"><br /> <area shape="rect" coords="33,0,65,38" alt="Bloglovin" title="Bloglovin" style="outline:none;" target="_self" href="YOUR BLOGLOVIN LINK" /><area shape="rect" coords="68,0,102,38" alt="Pinterest" title="Pinterest" style="outline:none;" target="_self" href="YOUR PINTEREST LINK" /><area shape="rect" coords="108,0,145,38" alt="Twitter" title="Twitter" style="outline:none;" target="_self" href="YOUR TWITTER LINK" /><area shape="rect" coords="147,0,180,38" alt="Facebook" title="Facebook" style="outline:none;" target="_self" href="YOUR FACEBOOK LINK" /><area shape="rect" coords="180,0,216,38" alt="Insta" title="Insta" style="outline:none;" target="_self" href="YOUR INSTAGRAM LINK" /><area shape="rect" coords="-2,-2,," alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" /></map>
Hopefully this was something that helps you in the future, even if I just showed you a new place to get image maps, or that you can do things like this using an image map that's cool. If you don't care and didn't geek out about this then that's okay too...when someone else posts stuff like this that I already have figured out I just move on but when it's new to me I totally geek out!

For some reason it's not wanting to show up on Internet Explorer in my sidebar, boo. Hopefully nobody uses that anymore though. What browser do you use?

Interested in seeing something else with coding or design? I'm always open to ideas and doing some Google research.