Custom Social Media Icons
When I started this blog I used the Simple Social Widget to display my social media icons. After I started using Bloglovin I found that Simple Social did not have an icon for Bloglovin. Noticed that other blogs had icons for Bloglovin so started looking for a way to add a Bloglovin icon. Ended up finding this great post from Wifessionals (which has since been taken down) that gave great step by step instructions on how to create custom social media icons, and add them to your Blogger Blog.
Creating Social Media Icons
Creating custom social media icons icons can be done easily. You can use whatever photo editing software you like. The post from Wifessionals suggested using Pic Monkey. You simply add the images below and change the color to what you like. Usually I use Photoshop but it was really simple in Pic Monkey to edit the layer to the color I wanted, so I ended up using Pic Monkey.
These are the social media icons you can use.
Now Katelyn from Wifessionals did put a note that she was not sure how to add the custom social media icons on a WordPress blog.
Adding Social Media Icons in WordPress
To add these custom social media icons in WordPress you just use a Text Widget, and add some simple code. Here is the code I used in my text widget to get my social media icons to display. You just simple edit it with the links to your social media accounts and links to the images you created.
<center class="social_buttons">
<a title="Follow Me On Bloglovin" href="http://www.bloglovin.com/blog/10599807"><img alt="Follow Me On Bloglovin" src="/images/social_media_buttons/bloglovin_button.png" height="34" width="34" border="0" /></a>
<a title="Follow Me On Facebook" href="http://facebook.com/lewislanedesigns"><img alt="Follow Me On Facebook" src="/images/social_media_buttons/facebook_button.png" height="34" width="34" border="0" /></a>
<a title="Follow Me On Twitter" href="http://twitter.com/LewisLaneDesign"><img alt="Follow Me On Twitter" src="/images/social_media_buttons/twitter_button.png" height="34" width="34" border="0" /></a>
<a title="Follow Me On Pinterest" href="http://www.pinterest.com/LewisLn/"><img alt="Follow Me On Pinterest" src="/images/social_media_buttons/pinterest_button.png" height="34" width="34" border="0" /></a>
<a title="Follow Me On Instagram" href="http://instagram.com/Lewis_Lane"><img alt="Follow Me On Instagram" src="/images/social_media_buttons/instagram_button.png" height="34" width="34" border="0" /></a>
<a title="Follow Me On Google+" href="https://plus.google.com/115702573885155648416/posts"><img alt="Follow Me On Google+" src="/images/social_media_buttons/google+_button.png" height="34" width="34" border="0" /></a>
<a href="mailto:nicki@lewislanedesigns.com"><img src="/images/social_media_buttons/email_button.png" height="34" width="34" alt="Email Me" /></a>
<a title="Follow Me On RSS" href="http://feeds.feedburner.com/LewisLaneDesigns"><img alt="Follow Me On RSS" src="/images/social_media_buttons/rss_button.png" height="34" width="34" border="0" /></a>
</center>
It really was pretty easy. If you need any help let me know in the comments below.
Have a tutorial you would like to see on a future Tuesday Tutorial? Click here to send a request.
I have been wanting to customize my social media buttons, but had no idea where to start. You make actually sound easy (or at least, not hard 🙂 ). Pinning this on my “Do This” list. Thanks so much sharing this tutorial.
Wendy recently posted…A Birthday Message To My Daughter: Things I Never Expected You To Teach Me
Thanks! Glad to help
Incredibly basic question but I haven’t figured it out. I copied all that code and put in my social media links. But then I can’t figure out how to marry that code to the image of the buttons (?). Any suggestions? Thanks!
Paula Kiger (Big Green Pen) recently posted…Celebrating a #GirlHero
Where you see src=”” you replace that link that is the link to the image. Does that make sense?
It does – I will give that a shot. Thank you so much for taking time to answer a basic question!!
Paula Kiger (Big Green Pen) recently posted…How to Identify Your Disruptive Skills: A Whitney Johnson Guest Post
No problem at all 🙂 Glad to help.