I finally did it.
I finally added social media buttons
or icons to my blog.
or icons to my blog.
What took me so long?
I guess I had assumed it was too
difficult and time consuming to figure out.
But Karen over at
posted a tutorial that inspired me.
Along the way I figured out some shortcuts
to share with you today.
And… in season you can grab these cute
pumpkin shaped social media buttons!
Karen's tutorial involves using photobucket and Word.
I bypassed that and used my blog.
You can, too!
Grab a cup of coffee and let's get to it.
Here's how to add social media buttons:
You can, too!
Grab a cup of coffee and let's get to it.
Here's how to add social media buttons:
Download the icons you like and use.
I chose a variety of colors for a whimsical,
onto your desktop. Or, right-click
and save to a folder.
Then I uploaded the buttons on my
About This Blog page,
About This Blog page,
just as you would for any photo
or image in any other post.
or image in any other post.
I linked the images to the appropriate webpages,
as you would for any other post.
Publish your updated "About" page and
keep the published page open.
Publish your updated "About" page and
keep the published page open.
Now we'll create a Social Media Button gadget
for your sidebar.
Go into Blogger layout and add a Gadget.
{In Wordpress, use the Widgets function.}
You're going to choose the HTML Gadget in Blogger:
{In Wordpress, use the 'text' widget}
Both your HTML Gadget and your published "About" page are open on your computer desktop.
On your "About" page, right-click on a Social Media icon and copy the image address, like this:
Now, paste that image address into your Gadget
on the (img src) line right between the "quote marks" as shown:
for your sidebar.
Go into Blogger layout and add a Gadget.
{In Wordpress, use the Widgets function.}
You're going to choose the HTML Gadget in Blogger:
{In Wordpress, use the 'text' widget}
Put a title on your Gadget and fill it with the pair of tags shown below. You need one tag pair for each social media button.
Basically the first tag (a href) creates your link,
and the second tag (img src) in the pair holds your image.
Keep this HTML Gadget open and proceed to the next step.
Both your HTML Gadget and your published "About" page are open on your computer desktop.
On your "About" page, right-click on a Social Media icon and copy the image address, like this:
Now, paste that image address into your Gadget
on the (img src) line right between the "quote marks" as shown:
Repeat this for each button.
You have now added the image coding
to your Gadget or Widget.
Now it's time to add the actual link
to your social media pages:
You have now added the image coding
to your Gadget or Widget.
Now it's time to add the actual link
to your social media pages:
on the (a href=) line right between the quotation marks.
Just click the buttons on your "About" page
to open each social media site,
copy the address and paste it into your gadget!
Your email button requires different coding.
~Click Here~ for that tutorial.
Now you have a place where all the coding exists
for each one of your social media buttons.
You can easily copy and paste it on any page
or post from now on.
For example, all the buttons above are working ~
click to test!
What do you think? Fun, right?!
Need to resize your buttons?
Here's a tutorial to help you with that:
If you use photobucket or a different platform,
Here's a tutorial to help you with that:
If you use photobucket or a different platform,
Thank you Karen for the inspiration!
56 comments:
Post a Comment