Monday, October 15, 2012

Blogging 101 - Part Eight

This month's my Blogging 101 series is actually also part of a cool Blog Hop put on by Lissa Marie of SoManyCrafts.com. The hop is several days long and each participant is showcasing a technique blog post. (I'm actually doing two days in a row, today and tomorrow, my post was that long, lol.) In this exciting blog hop you'll be able to go to several blogs and learn how to use Photoshop to make your own social media & blog buttons, how to code those buttons so they're functional on your site and how to make your very own blog button that your friends can grab! You'll learn how to use digital stamps and pictures in your artwork and even how to manipulate them before printing. You'll also learn about cutting tools like the Cricut and Sillouette and different techniques to improve your artwork. 

My first post for "Teach Me That Digi Technique" Blog Hop will use the social media buttons that you make using Photoshop or another editor and add HTML code so they are functional on your blog. Lissa's post yesterday taught you how to make your own buttons using Photoshop, click here if you missed that tutorial. Tomorrow, I'll be showing you how to make your very own copy and paste-able blog button that your friends can grab and display on their blogs! (for those of you following my Bogging 101 series, this is Part 8, parts 1-7 can be had by clicking here. Go forth and beautify your blog people!)

Who knew I'd get to Part Eight?? I'm thrilled that so many people like this series and I'm also thrilled that you all find it easy to follow! Of course if you'd like to grab my button and proudly display it on your own sidebar, making clicking through to Blogging 101 posts easy peasy that would be great. Hint, hint, ;o)

So, let me teach you how to add Social Media buttons to your sidebar, kinda like the ones I have right there --->  We'll add and Twitter button, a Pinterest button, an Email Me button, a Bloglovin' button and a Facebook button. Next time, in a future blogging 101 I'll teach you how to burn your feed so we can use what we learned here and add a Feedburner button and a Subscription button.

So, here we go!
First we need pretty little buttons. I find it's easier to purchase them off of Etsy (though you may have just made your own using Lissa's tutorial!). They're ridiculously inexpensive so I've found it easier to purchase the color and shape you want. I also found it difficult to find a set of free buttons that had all the social media options I wanted to use. You may not have that problem so it's worth it to see if you can find free buttons on the internet. Here are two Etsy shops I've used:
  1. Moxitonic - general blog buttons for $2 or upgrade to custom for an extra $5
  2. Twenty Three Oh One - custom blog buttons for $6
We'll use buttons that I've purchased previously for this tutorial. Let's start with a simple one. We want a Twitter button to go to our Twitter page when clicked. First you have to upload your button so it has a URL. You can use any picture uploader you like. I use Skitch but it's just for Macbook computers. Once you have the URL for your button then you can add the functionality.

My Twitter button's URL is:

https://img.skitch.com/20120603-k2jkf7g3tp1ra5m3tarsb6qu2y.jpg

Now we build the functionality in. If you haven't read Blogging 101 Part 2 (all about making your own blog button), I suggest you read that before going further. First, let's find our personal Twitter page. Go to twitter.com and sign in if you're not already. Click on your name beside your avatar. This brings you to the page where people would click to follow you. Grab the URL out of the address bar of your browser. My twitter personal page is:

https://twitter.com/#!/addwatersilly

So what we want to do is connect the button and the twitter page. We use similar code as we did for making the blog buttons... This is what it looks like.

<a href="https://twitter.com/#!/addwatersilly"><img src="https://img.skitch.com/20120603-k2jkf7g3tp1ra5m3tarsb6qu2y.jpg" /></a>

This will look and work like this... (go ahead, click it!)





If you want your social media button to open in a new tab or window when clicked then add the target="_blank" optional function just after the twitter page URL. (taught in the Blogging 101 part 2)

Use the above steps to also make your Facebook, Pinterest and Bloglovin' buttons. For finding your personal Facebook page go to Facebook and sign in if you aren't already. When you get into Facebook just click on your name and you'll be on your front page. Then grab the URL again, it'll look something like this:

http://www.facebook.com/profile.php?id=57952750

For Pinterest, once again, sign in and click on your name. Grab the URL of your personal page, it'll look something like this:

http://pinterest.com/addwatersilly/

These links to your pages go just where Twitter's link went, just replace one with the other. REMEMBER, don't delete any quotation marks or your button won't function!

Bloglovin' is a little different. Sign in if you haven't already. Click "Account" in the upper right hand corner which brings a drop down menu. Choose "Blogs By Me" then when your stats page comes up click your blog title. This page is the one you want to grab the link from... it looks like this:

http://www.bloglovin.com/en/blog/3485371/just-add-water-silly/follow

For each of the above you obviously have to upload their buttons using a picture uploader like you did for the Twitter button. All of the tweaks that you can add to your blog button  you can add to your social media buttons, like mouse over text and height/width changes. See Blogging 101 Part 2 for those instructions.

Our last social media button we want to make functional is the "Email Me" button. This takes a slightly different set of codes. First, upload your "Email Me" button with the picture uploader and grab it's URL. Here's mine:

https://img.skitch.com/20120603-m6b2mjjqiga2fyyrqnmkeqir2e.jpg

It looks like this:



Now we need the code to add the functionality to this button. We want it to open the clicker's email program and add our email address in the "To" section. The code looks like this:

<a href="mailto:oilandwater@telus.net" target="_blank" title="Click to write me a Letter!"><img src="https://img.skitch.com/20120603-m6b2mjjqiga2fyyrqnmkeqir2e.jpg" /></a>

The pink section is the slight change to get the email program to open. Instead of putting our Facebook or Twitter page URL right after the href=  we instead put "mailto:YOUR EMAIL ADDRESS". Don't Forget the quotes around the the pink part or it won't work. I coded the button above so you can see what happens when you click it. Go ahead, I'll wait for you! :o)

Notice that I've added the small tweaks I mentioned above, the target="_blank" opens the email program in a new window and the title="Write what you want here" will show when you mouse over the social media button. Once again, DON'T forget the quotes nothing works without the quotes!

Once you have all your buttons finished you want to add the code to an HTML/Javascript gadget in your sidebar. I suggest putting your social media buttons as close to the top as you can, maybe right under your "About Me" section. So, we want to put the code for each button, just as you wrote it, into the gadget. If you want them all to be centered then put <center> before all the code and </center> after all the code. This blogging 101 tip and it's explanation can be found in Part 1. If you want them to line up horizontally then just put the code in one after the other, they'll line up automatically. If, on the other hand, you'd like your buttons to line up right under one another then on the next line after each piece of code put <br />  It'll look like this in the gadget:

<a href="https://twitter.com/#!/addwatersilly"><img src="https://img.skitch.com/20120603-k2jkf7g3tp1ra5m3tarsb6qu2y.jpg" /></a>
<br />
<a href="mailto:oilandwater@telus.net" target="_blank" title="Click to write me a Letter!"><img src="https://img.skitch.com/20120603-m6b2mjjqiga2fyyrqnmkeqir2e.jpg" /></a>

The <br /> will put the next button on a new line and if you've added the <center></center> around all the code then all buttons will be centered under one another. This would be perfect for buttons like this one:

Putting these buttons one under another would look awesome on a blog. NOTICE that directly after the <br there is a space before the /> (Oh, and I got the button from ShabbyBlogs.com button section)

That's about it for this section of how to improve and beautify your blog. Next time maybe I'll teach you how to burn your feed and set up email subscriptions.

Until then, I'm out. Look for the latest APR by clicking my Artist's Play Room Button in the sidebar, it will always pull up the currently running APR (I taught you that in Blogging 101 Part 4, just click the Blogging 101 button to bring all the parts up for your perusal!!)

Now I need a hazelnut coffee and some chocolate. Hey, they say it's good for you!
:o) Come back tomorrow for another tutorial on coding your very own blog button!! See you then!
Later,


If you didn't notice the banner at the top of my blog announcing it, I'm doing a Big Giveaway!! I'm the Canadian Contributing Editor of FEATURING Magazine, a new International english language Art magazine. I'm giving away to one lucky winner, both Issue One & the newly out, Issue Two!! You'll also receive an original handmade bookmark (made by me and signed), to help you keep your place while you read your new magazines. CLICK HERE to read all about the giveaway and enter. Good luck!!
I'm reading: Blogging 101 - Part EightTweet this Post

2 Comments / Click to Comment:

Tracey Fletcher King said...

Great post and you make it sound so accessible and easy... love that it makes me at least think that I can do it...xx

Marianne said...

i have always wondered how to do this, and though i will have to save this in a prominent place so i can find it as i try and try again, i will try.


marianneDOTwanhamATgmailDOTcom

Related Posts with Thumbnails
blog links
Arts blog

Members

 
^ Scroll to Top