Buttons, buttons, I like the buttons!

So here’s the inside scoop as to what’s going on over here behind the scenes at joyosphere- I have this big, grand, goal to do all of the design work myself. Big dream, right? I know. But I am determined to make it happen ever since I announced it here in this post! And I plan on giving tips, tricks, and lessons learned all along our journey to a custom made design that is true to us!

social media button tips

I know the basics of Photoshop (Thanks, high school photography class!), I have a little more HTML experience from my days on Blogger (or Blogspot or whatever name it goes by now), and a little bit of CSS knowledge I picked up from my programming class in college… so I have the basics sort of outlined, but the problem is, is that the information that I was looking for wasn’t readily available for me to use. And a lot of it was techie mumbo jumbo that I’m not quite fluent in, and the other portion just wouldn’t work for what I was trying to do. So I was stumped. But never one to give up, I found my own path to creating some pretty awesome coding to help dress joyosphere to the nines. Now, it’s still a work in process, and there’s lots of behind the scenes coding going on everywhere you look!

Now that I’ve got a code that works, I would like to share it with you all. But first, I want to walk you through it so that you understand what you’re using. Not to fear, it’s a short little lesson in HTML, but only because my inner-librarian wants to educate you lovely people about what’s going on here in the vast land of coding. But if you want to copy and paste it, I won’t stop you, for all I know you could be light years ahead of me in coding experience!

pantone-colour-of-the-year-icons

(The buttons that I am using in my own sidebar are courtesy of Isa Maria of The Academy, and they are based on the Pantone Color of the year, they were just too perfect for me to pass up!)

media library

So, let’s get started! Once you have found some buttons that you think will fit well on your page and have uploaded the image, you are ready for some coding! For all if my fellow Word Press users you are going to start on the left side of your dashboard with the “Media” tab under the “library” section.

buttons

As you can see, all of my buttons that I would like to use are uploaded and ready to go. Select the first image that you would like to add as a button, and it will take you to an “edit” page.

File URL

On the right hand side of the page, you will see a “File URL” section. Copy that URL and paste it to a notepad (or something you can come back to use again).

Widgets Page

Next, on the left hand side of the dashboard once again, go to “Appearance > Widgets” and click and drag the “Text” widget box into place on the sidebar. This will open up a blank text box.

text box

Now, we get into coding with assigning a basic link. You can actually use this in any sort of blog post, widget, or even email- basically anywhere you can use HTML, you can use this code:

URL of link

This will turn into a basic link to whatever you’re linking to, and will look like this with the page you are linking to:

twitter link

But, that’s not quite what we wanted. We want cute little buttons to take your readers to your Twitter, Facebook, or other social media platform so they can keep up with whatever you have going on. So we have to tag the image, using this code:

image tag

This is where the image URL you copied comes into play. We add that URL to tag the image:

twitter image url

And finally, we combine the two tags to add a link to the image:

button html

And you should get a cute little button like the one below in your side bar:


You can repeat this process to add as many image buttons as you want to the page, but make sure you test all your links to make sure they work correctly! If there is as much as an extra space within the code, it won’t work properly… so make sure you test it!

What have you guys been coding lately? We’re working on a whole lot more here, and can’t wait to share it!

(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-42540503-1’, ‘joyosphere.com’);
ga(‘send’, ‘pageview’);

Advertisements

8 thoughts on “Buttons, buttons, I like the buttons!

    • Wahoo! I’m glad that I’m not the only one who has a hard time translating tech-speak! I think it’s a mission of mine now to make easy to follow tutorials for this sort of stuff! Thanks for dropping by! 🙂

  1. Love the yellow social media icons you’ve added! And I applaud you for doing these tutorials as you give your blog design a makeover bit by bit. There’s really no better way to cement your learning! I was proud to say that I actually knew what you were talking about in this post…though my knowledge of html probably stops here! 😉 Keep the blogging tips a’ comin’!

  2. It worked! It worked! It worked!!!!

    Colour me amazed – I coded something!! Me!!

    I hope you don’t mind, I shared your tutorial with my facebook group. It’s called Cafe Blogger – we support each other’s blogs through social media and provide feedback and discussions. I hope you’ll consider joining us!

    I just sent an invitation to the email address on your contact page, let me know if it didn’t come through!

    • Haha! The link worked out better than the invite did! I’ll have to investigate my email now! By the way, those buttons look fabulous! 😉

  3. Pingback: DIY Back Painted Glass | sketchy styles

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s