pinkheartstring

How to (Really) Get Your Toddler to Sleep

Let your little one sleep with the easy tips I'll give you!

How to Make a Mosaic Heart Box

Making a heart box is easy! Check out how you can make one.

Dads Don't Just Wear Ties

Dads play a vital role for child development. Find out how so you'll get to love your Dad even more!

Earth Needs Moms

We love our moms but let us find out what they can really do for us and why Earth needs moms.

20 DIY Loom Bands Bracelet + 15 Creative Ideas

Still can't move on from the loom band craze? Get some more ideas here.

DIY Foodie: Sleepy Bear Breakfast

Your kids will be very excited for breakfast if you serve the simple egg and rice in a creative manner like this!

You have reached everything lovely for: blogging
Showing posts with label blogging. Show all posts

Monday, October 27, 2014

How to Add Social Media Buttons on the Sidebar


how to add social media buttons

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.

social media icons

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:

how to add social media buttons

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.

how to add social media buttons

6. Check your blog and your new social media buttons are there!

how to add social media buttons


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.