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!
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!
(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!)
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.
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.
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).
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.
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:
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:
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:
This is where the image URL you copied comes into play. We add that URL to tag the image:
And finally, we combine the two tags to add a link to the image:
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!
ga(‘create’, ‘UA-42540503-1’, ‘joyosphere.com’);