6.04.2015

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps

This weeks Blogger tutorial is on how to create social media icons for your blogger sidebar using simple technique which includes PicMonkey and Image-Maps.

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


1. Before you create your socila media icon bar for your sidebar, let us check how big your image on the sidebar should be (this technique can be applied for any sidebar image gadget you add). Go to your Blogger Dashboard. Click Layout --> Add a Gadget.


Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


2. Select the Image option. 

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


3. Scroll down to see the 'Shrink to fit' option. Below this you will see the pixel size. This is the size you want your sidebar images to be. Not more than this, but can be smaller. 


Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


4. Before designing the social media icons, you need to have the icons vector/ silhoutte images of the icon. There are various websites offering free social media icons and just the silhoutte. Download the icons from the website to your computer. This will further be used in Picmonkey to design your own icons. 

Some websites offering free social media icons:
  • http://theblogdesignernetwork.com/2011/08/free-social-icon-silhouettes/
  • http://www.pixelfrau.com/black-social-media-icons/
  • http://visionwidget.com/free-social-media-icons.html


5. Go to PicMonkey --> Design --> Custom

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


6. Enter the Pixel size (250) for length and height as > or < 100 (your choice). 

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


7. Add Overlay. I am adding circles for the base. Change the color and size to match your blog. (You can skip this step if you do not want a background for the icons).

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


8. Select 'Your Own' in Overlays tab, browse for the icons you downloaded and select one. 

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


9. Change the color, bring it above the circle and position it well. Now Right click on the circle to Duplicate Overlay for the rest of the icons (to have consistent color and size). 

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


10. Add a line or a rectangle above and below the icons to keep them aligned in a straight line.

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


11. Keep adding your social media icons and then remove the lines added.

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


12. Now you can crop the excess region above and below. (optional)

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


13. Save the file as .png. (Very important step)

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


14. Upload the image in an image hosting website (eg: Photobucket) Get the link of the image. (should end in .png)


15. Go to Image-Maps. Enter the image URL and select Start Mapping.

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


16. Check your image and then select click to Continue.

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


17. Right click on the first icon and select Create Rect.

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps
18. Draw a Rectangle around the icon and you will get a box like this to fill the details.
  • Enter the URL you want to visit when clicked on that image. 
  • enter Title (this will be displayed when the mouse is hovered above that icon)
  • Enter Alt

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


19. Go to Settings Tab
  • Change the Background color to White #fff
  • Opacity --> 0 to make it clear.
  •  Border color to white #fff

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


20. Continue for all other icons. Finally, right click outside and select Get code.

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


21. Select HTML Code. Scroll down and copy the code.

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


22. Go back to blogger. go to Dashboard and select Layout --> Add a Gadget --> HTML/Javascript.

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


23. Enter the title and paste the code. Then save.

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


24. Rearrange the position of these icons if ypu want and then click Save Arrangement.

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps


25. Now View Blog to see the icons on your sidebar. Click on each and check if its working. Or check if you have entered the right URL for each.  

If your sidebar is towards the left, you can center align it by adding:
<div align="center">  before the code and </div> after the code.

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps



Image used:  (You can use this image for your blog/website. Rigth click and save image. Upload it in image hosting website. Copy URL and use it in Image-Maps)



Code:

<div align="center">
<img id="Image-Maps-Com-image-maps-2015-05-29-062705" src="imagelink.png" border="0" width="250" height="66" orgWidth="250" orgHeight="66" usemap="#image-maps-2015-05-29-062705" alt="" />
<map name="image-maps-2015-05-29-062705" id="ImageMapsCom-image-maps-2015-05-29-062705">
<area  alt="Facebook" title="Facebook" href="http://www.yourfacebookpage.com/" shape="rect" coords="4,10,49,57" style="outline:none;" target="_self"     />
<area  alt="Twitter" title="Twitter" href="http://www.yourtwitterpage.com/" shape="rect" coords="49,10,100,58" style="outline:none;" target="_self"     />
<area  alt="Instagram" title="Instagram" href="http://www.yourinstapage.com/" shape="rect" coords="96,9,149,59" style="outline:none;" target="_self"     />
<area  alt="Pinterest" title="Pinterest" href="http://www.yourpinitpage.com/" shape="rect" coords="150,3,197,58" style="outline:none;" target="_self"     />
<area  alt="Google+" title="Google+" href="http://www.yourgpluspage.com/" shape="rect" coords="200,5,249,58" style="outline:none;" target="_self"     />
<area shape="rect" coords="248,64,250,66" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
</map>
</div>


(Enter the respective URL instead of the red text. Use the image, map and get the code. Use the code in HTML/Javascript Gadget)




1 comment:

  1. This is a wonderful post! Thanks for sharing your knowledge with us!

    ReplyDelete

Thank you for taking time to stop by. I would love if you leave some inspiring comments about the post. To avoid spam and unwanted users from leaving a comment, your comment will be verified and posted in sometime. Thank you :)