The blog just got new social media buttons. The colour is the Solsken Design signature grey and while I made them round at first, this theme makes a hovering effect under pictures. Even though the pictures were specifically made round (with this PicMonkey tutorial), the theme still added a square due to the hover effect. What a nuisance. At least I know how to make these buttons now, because I’ve made quite a few of them by now. It takes several steps, but isn’t horribly difficult and I’ve used the same method to add buttons to the side column before, so read along!
I started with a blank template, a grey circle, of the size 72×72 pixels. In PicMonkey, I then added the silhouettes (found here for free) as layers on top of the grey circle (with the help found in the same silhouette article). A tip is to upload the background picture only once, because after you’ve tweaked the silhouette to your liking – size, placement, and colour – you can save the button and then remove the silhouette only. Add the next one, tweak, save, and repeat. Finally I had six buttons 72×72 pixels large, so I resized them to 36×36 pixels. Once I noticed the white square underneath the grey button, I repeated all these steps with a grey 72×72 square.
Now the fun begins. I did exactly like in this video for WordPress blogs (Blogger blogs have their own video) until the stage of trying to center all the buttons at once. What happened wasn’t a neat row of buttons centered next to one another, but only the first one remained on the uppermost row with the rest jumping down a row.
Miraculously I clicked the same stuff, but with magic hands, and thereafter everything worked as it should. In the Text pane, you can see this opening code at the beginning, before the first a href thingy: <p style=”text-align:center;”> After all the button code, to close the centering code, there’s this: </p> Once I copy-pasted the whole text into a Text widget, all were aligned and centered. Neat.
Once you’ve uploaded media and added it to the post, all you have to do is click on the image edit button to see stuff viewer friendly, but it really pays off to look at the Text pane with its code, too. That’s how I learned how to open a linked page in a new window when clicking on a button. You need to add this: target=”_blank” But you won’t know where unless you compare what happens when checking versus leaving unchecked the box in the advanced image editing settings.
Also notice what happens when you add a link to the button, because if you leave it unlinked, it will show its own archiving URL on the WordPress server when a reader clicks on it and opens the image. That’s a bit silly, isn’t it.
It takes some time to learn these things, but it isn’t very difficult. If you can’t figure it out even after having watched the wonderful YouTube tutorial, ask a question in the comment and I’ll see if I can help you somehow.
Do you make your own buttons? If you don’t have time right now, maybe you can use some of these free and very lovely buttons?
Solsken Design 