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.
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.
2. Select the Image option.
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.
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
6. Enter the Pixel size (250) for length and height as > or < 100 (your choice).
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).
8. Select 'Your Own' in Overlays tab, browse for the icons you downloaded and select one.
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).
10. Add a line or a rectangle above and below the icons to keep them aligned in a straight line.
11. Keep adding your social media icons and then remove the lines added.
12. Now you can crop the excess region above and below. (optional)
13. Save the file as .png. (Very important step)
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.
16. Check your image and then select click to Continue.
17. Right click on the first icon and select Create Rect.
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
19. Go to Settings Tab.
- Change the Background color to White #fff
- Opacity --> 0 to make it clear.
- Border color to white #fff
20. Continue for all other icons. Finally, right click outside and select Get code.
21. Select HTML Code. Scroll down and copy the code.
22. Go back to blogger. go to Dashboard and select Layout --> Add a Gadget --> HTML/Javascript.
23. Enter the title and paste the code. Then save.
24. Rearrange the position of these icons if ypu want and then click Save Arrangement.
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.
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)
This is a wonderful post! Thanks for sharing your knowledge with us!
ReplyDelete