If you are currently working on your blog design or you are thinking of adding some social media buttons on the sidebar of your blogger blog, then this is the tutorial you are looking for.
I also wanted to change the social media buttons in my blog but I didn’t have the time to do it. If you fear of tweaking things on your blog, don’t be because adding social media buttons isn’t as hard as you think it is. You don’t have to mess up with your template too because we will just add a gadget for this one. So, no fear at all. Here is the how to:
1. Look for beautiful social media icons for free download. You can search that in Pinterest or even in Google. For the ones I used for my blog, I got it from Verve and Sass while the icons above are from Lil Blue Boo.
2. After you download the icon, upload it to whatever you use to store/ host your photos like Photobucket or Imageshack. I use Photobucket for my images. Upload each photo to it.
3. Then copy this code to a notepad or to a word document:
<!–social media icons—>
<center>
<a href=”RSS FEED URL” target=”_blank”>
<img src=”RSS FEED ICON DIRECT IMAGE URL” width=55px border=”0″
alt=”youtubeicon”/ ></a>
<a href=”FACEBOOK URL” target=”_blank”>
<img src=”FACEBOOK ICON DIRECT IMAGE URL” width=55px border=”0″
alt=” facebookicon”/ ></a>
<a href=”TWITTER URL” target=”_blank”>
<img src=”TWITTER ICON DIRECT IMAGE URL” width=55px border=”0″
alt=” twittericon”/ ></a>
<a href=”PINTEREST URL” target=”_blank”>
<img src=”PINTEREST ICON DIRECT IMAGE URL” width=55px border=”0″
alt=” pinteresticon”/ ></a>
<a href=”GOOGLE PLUS URL” target=”_blank”>
<img src=”GOOGLE PLUS ICON DIRECT IMAGE URL” width=55px border=”0″
alt=” googleplus icon”/ ></a>
<a href=”INSTAGRAM URL” target=”_blank”>
<img src=”INSTAGRAM ICON DIRECT IMAGE URL” width=55px border=”0″
alt=”instagramicon”/ ></a>
<a href=”BLOGLOVIN’ URL” target=”_blank”>
<img src=”BLOGLOVIN’ ICON DIRECT IMAGE URL” width=55px border=”0″
alt=” youtubeicon”/ ></a>
<a href=”TUMBLR URL” target=”_blank”>
<img src=”TUMBLR ICON DIRECT IMAGE URL” width=55px border=”0″
alt=”tumblricon”/ ></a>
<a href=”mailto:EMAIL ADDRESS”>
<img src=”EMAIL ICON DIRECT IMAGE URL” width=55px
alt=”Click to email me” ></a>
</center>
4. Change those in all caps. For example, change FACEBOOK URL to the link of your own Facebook Page. In my case it is https://www.facebook.com/PinkHeartString. Then look for the direct image url you uploaded. It has to be a .png file to make sure that there isn’t any background. In my case, the direct url is http://i273.photobucket.com/albums/jj211/Kareen_Liez_Ecal_Datoy/facebook_zps46e0547d.png. I will change the FACEBOOK ICON DIRECT IMAGE URL to that link. So, the final look of my html code for the Facebook icon is like this:
Do this to every URL and icon in the code.
About the width, you can change it if you want to depending on the size of your sidebar. If it looks big, then try a smaller value like 42px.
5. Once you are done with all the codes, go to your Blogger account. Then go to Layout>Add Gadget>HTML. Paste the code above and then Save. Place it on the area where you want the social media buttons to appear.
6. Check your blog and your new social media buttons are there!
This is my first ever tutorial! Wooot!! I hope you found this tutorial useful. If you have questions, feel free to leavee that in the comment section below. And if there is something that you want me to write about, lemme know.
That's a good tutorial. Helps to make your blog more personal when it's customized.
I remember when I was first learning to tweak my blog's design. Adding social icons was one of the first things I learned. Now, I know how to code the whole layout! 🙂
Wow, thanks for this post, I will try to follow the steps. I've been meaning to do this in my blog and I just don't know where to get the icons.
This is so timely 🙂 Thanks for sharing this idea ♥ a struggling where to get icons 🙂
Wow. Thanks for sharing! I'm still learning the hoops on this whole blogging and looking for ways to customize my site. Does this work in WordPress too? 🙂
Thanks for the tips! 🙂 Will follow this on my other blog. 🙂
Nice post!
Helpful tips u have there.. Will try it later 🙂 thanks for sharing!
great tips! My designer always do the job for me hihi
Thank you! I'm glad you all found this useful. @Ayi: It is only for blogger 🙁
This was very helpful! Thank you for posting. I've tired searching how to do this and thanks to you for presenting it in a very easy manner. I willd definitely try this out my blog now.
xo,
Louise of The Legendary Ukayista
Social Sharing Media Buttons are really an important part of making your website popular and driving traffic, they are an indispensable part of a marketing campaign so I agree they are essential for bloggers, great code suggestions!
This one's a challenge for me. But this could work for me. Thanks!
Your post is very timely and at the same time, it's informative and helpful. These days, social sharing buttons are very important. I'm all for social sharing buttons because it makes passing information a lot easier.
What a great tutorial! I am forever wanting to change mine, so may give this a go over the weekend 🙂 Simone x
very helpful! and BTW the instructions are very clear- thanks for sharing!
Oooh, the code's already supplied, cool! That makes it easier for less techie peeps like me, hehe. Thanks so much!
I just added my social media button this week. I realized I only have three. I should start to develop my google+ page and facebook page. I feel I do not have time to update those so I did not create one.
thanks for this great tips!
Very nice tutorial. I will get back to this and see if your buttons will look good on my blog or not. Thanks!
I'm not using blogspot but the buttons are naise! WordPress has loads of pretty ones too 🙂
I need to bookmark this page because I've been looking for customized share buttons and the way you presented this tutorial is very user friendly. Thanks for sharing.
I was looking for this before when I still hosting my blog in blogger, but i really find tweaking blogger hard so i shifted to wordpress
I am going through some changes to my site right now so this will possible come in handy. It is great to have it nearby.
I used to blog on blogspot and I had a swell time customising everything on my blog.
Thanks for sharing!!
This is so helpful! I've been thing of doing this to shorten my sidebar, so this came at the right timing.
Oh man! That is so cool! Thank you for sharing! 🙂 I've been trying to figure out how to do it in blogger since it's very easy to add in WordPress. Now, here's the solution to my dilemma. Thank you sooo much! 🙂
Does this only work for Blogger or will this work for wordpress too? I really need to change out the social media buttons on our site too, but frankly…. am thinking of just getting someone to do that for me!
Am sure this tutorial will help many out there!
Best,
Ling Tan
kidsonboard.net
Thank you for easy tutorial! I'm thinking about doing a re design on my social buttons. This is great! 🙂
This is just in time. I am about to change my blog layout and I can't find the links to add social media buttons. Thanks.
The good old days of Blogger or Blogspot. It has been years since I last used the platform and this post really gave be a good throwback Thursday. I consider Blogger to be one of the platforms that are not that easy to customize. Almost everyone needs to code it if you really want to customize it. This is so kind of you to share this tutorial!