Slide show

How To Add Social Media Icons To Your Blog...

Hi everyone. I hope you are up for a little blogging tutorial....Adding social media icons to your blog!! You know I love picture tutorials, so this one will be loaded too.
What are social media icons? They are the little cute buttons you see on other blog that, if clicked on, will direct you to their Pinterest page, Facebook page, Twitter account, contact info etc...
Here are my new ones. Aren't they cute?



My old social icons were round with red and white polka dots. I made them my self a long time ago with Picnik, but never liked the fonts for each icon. Now that I belong to more sites like Pinterest etc, I just don't have the design programs or the skills to get fancy!!


Well, I found a fabulous website where you can chose from 15 different colors for each set social media icons...and they're FREE. Click HERE to visit Carrie Loves and see the beautiful social media icons she is sharing.

Here's just a peek...a set of 12 icons in 15 colors!!





Now let's get started...

How To Add social Media Icons To Your Blog


First, you will need to do a few preliminary things.
  • down load the icons to your computer
  • then upload them to Photobucket...this will give us the Direct Link address for each icon
  • open a Word Document for the HTML code

STEP 1.

Down load any social media icons you like or icons you have designed yourself to your computer. Here is the set of icons in the color Fire that I picked for my blog from Carries site.



STEP 2.

Select the individual icons that you want on your blog and upload them to Photobucket. I've always used Photobucket to find linking codes for my images. Here are the icons I uploaded to my Photobucket account.


STEP 3.

Now open up a Word Document...this step just makes it easier to copy and paste the whole code into your dashboard. You will be copying and pasting THIS code for EACH icon you will be adding.



<a href="WebsiteAddressHere"><img src="ImageDirectLinkHere" /></a>


WebsiteAddressHere...this is the URL http address for each of YOUR websites like your facebook, twitter, pinterest etc.

My example for MY Pinterest account is...http://pinterest.com/sewmanyways/

ImageDirectLinkHere...this is the Direct Link address from each image on Photobucket. Just hover over each image and then click on the Direct Link and it will automatically copy it for you



STEP 4

Open a Word Document and copy that original code.

Here is a screen shot of the Word Document. I've added spaces between each one just to make it easier to see. 

When you are finished, delete the spaces before copying the whole code. 


STEP 5

Before you copy and paste all YOUR addresses and Direct Link codes into each space, make sure you delete my words that are highlighted...just don't delete the quotation marks. 

Here's MY example...


STEP 6

Next, remove the spaces and copy the whole code.


STEP 7

Now go to your Dashboard...click on
  • Layout
  • then Add Gadget
  • then add HTML/JavaScript Code


STEP 8

PASTE your whole code you copied from the Word Document into the HTML box.

Click SAVE. 

To move your icons, drag and drop them where ever you want your icons to be on your side bar and click save again

That's it...Your Done!!!


Here are the sample icons I made for this tutorial...



I really hope you give this a try. I know the word CODE can be scary for some, but you are just copying and pasting. If you make a mistake and the icons don't work, just remove them and start over. 

UPDATE...I did a post specifically about the address for the email button. Click HERE for that.
Have fun with it!!

Happy Blogging,
~Karen~



Hi everyone. I hope you are up for a little blogging tutorial....Adding social media icons to your blog!! You know I love picture tutorials, so this one will be loaded too.

What are social media icons? They are the little cute buttons you see on other blog that, if clicked on, will direct you to their Pinterest page, Facebook page, Twitter account, contact info etc...

Here are my new ones. Aren't they cute?





My old social icons were round with red and white polka dots. I made them my self a long time ago with Picnik, but never liked the fonts for each icon. Now that I belong to more sites like Pinterest etc, I just don't have the design programs or the skills to get fancy!!

Well, I found a fabulous website where you can chose from 15 different colors for each set social media icons...and they're FREE. Click HERE to visit Carrie Loves and see the beautiful social media icons she is sharing.

Here's just a peek...a set of 12 icons in 15 colors!!





Now let's get started...

How To Add social Media Icons To Your Blog


First, you will need to do a few preliminary things.
  • down load the icons to your computer
  • then upload them to Photobucket...this will give us the Direct Link address for each icon
  • open a Word Document for the HTML code

STEP 1.

Down load any social media icons you like or icons you have designed yourself to your computer. Here is the set of icons in the color Fire that I picked for my blog from Carries site.



STEP 2.

Select the individual icons that you want on your blog and upload them to Photobucket. I've always used Photobucket to find linking codes for my images. Here are the icons I uploaded to my Photobucket account.


STEP 3.

Now open up a Word Document...this step just makes it easier to copy and paste the whole code into your dashboard. You will be copying and pasting THIS code for EACH icon you will be adding.



<a href="WebsiteAddressHere"><img src="ImageDirectLinkHere" /></a>


WebsiteAddressHere...this is the URL http address for each of YOUR websites like your facebook, twitter, pinterest etc.

My example for MY Pinterest account is...http://pinterest.com/sewmanyways/

ImageDirectLinkHere...this is the Direct Link address from each image on Photobucket. Just hover over each image and then click on the Direct Link and it will automatically copy it for you



STEP 4

Open a Word Document and copy that original code.

Here is a screen shot of the Word Document. I've added spaces between each one just to make it easier to see. 

When you are finished, delete the spaces before copying the whole code. 


STEP 5

Before you copy and paste all YOUR addresses and Direct Link codes into each space, make sure you delete my words that are highlighted...just don't delete the quotation marks. 

Here's MY example...


STEP 6

Next, remove the spaces and copy the whole code.


STEP 7

Now go to your Dashboard...click on
  • Layout
  • then Add Gadget
  • then add HTML/JavaScript Code


STEP 8

PASTE your whole code you copied from the Word Document into the HTML box.

Click SAVE. 

To move your icons, drag and drop them where ever you want your icons to be on your side bar and click save again

That's it...Your Done!!!


Here are the sample icons I made for this tutorial...



I really hope you give this a try. I know the word CODE can be scary for some, but you are just copying and pasting. If you make a mistake and the icons don't work, just remove them and start over. 

UPDATE...I did a post specifically about the address for the email button. Click HERE for that.
Have fun with it!! 
Happy Blogging,
~Karen~


NEW !!! You can actively participate in the wordpress911 team to ask and answer questions to upload articles and videos register » Here

Links: You can download the best WordPress Woocommerce templates HERE


6 comments:

  1. I admire your unique way of writing especially the style of using the idioms and phrases which is mind-blowing. I hope you will not mind if I adopt this style of your. Many thanks.

    Custom CMS Development

    ReplyDelete
  2. thanks for shared wonderful information of giving best information.its more useful and more helpful. great doing keep sharing
    seo company in india

    ReplyDelete
  3. In particular, this is an extraordinary place to figure out how to make an intelligent social media blog group.

    ReplyDelete
  4. Here's a link to our share buttons: https://shareaholic.com/pub...
    You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
    For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
    http://www.thesocialmediaha...
    Of course, you can customize your buttons in a variety of ways in your Settings.
    If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help

    ReplyDelete
  5. It's very nice of you to share your knowledge through posts. I like to read stories about your experiences. They are very useful and interesting. I am excited to read the next posts. I'm so grateful for all that you've done. Keep plugging. Many viewers like me fancy your writing. Thank you for sharing precious information with us. email with love online, email with love free, https://autoketing.com

    ReplyDelete
  6. are everyone looking for ways online to get help solving their pregnancy and infertility problems when most of every native American is talking online about the help of Dr Mandaker Alamun. I checked him out when my husband who could not get me pregnant for over 9 years of marriage as a result of low sperm count became fertile and now, I am 5 months pregnant and it is this man known as Dr Mandaker who helped my husband solve his problem. My name is Alecia from CA USA. I would advise anyone and everyone who needs the help of any spell caster in love marriage,finance, job promotion,lottery spell,poker spell,golf spell,Law & Court case Spells,money spell,weigh loss spell,diabetic spell,hypertensive spell,high cholesterol spell,Trouble in marriage,Barrenness(need spiritual marriage separation),good Luck, Money Spells,it's all he does or looking for breakthrough in your political career to meet this Dr Mandaker the link to his website copy this link (witch-doctor.page4.me)His email contact witchhealing@outlook.com for He is a Reliable and trustworthy. I and my husband have gone to different hospitals having the thinking that I was at fault for not getting pregnant. But at the Federal hospital, they examined him too and his sperm count was low and unable to get a woman pregnant as a result of male infertility. It was then I sort out,thanks to Dr Mandaker.

    ReplyDelete