I’m bringing something to you guys from left-field today, a blogging how to!! As I just passed the one-year mark I thought it was about time I’ve shared a few things I’ve learned. One of my pet peeves when reading blogs are links that don’t open into new windows, I hate when I click on a link and the page I’m reading gets replaced. HATE IT! For the longest time my social media buttons did just that. It did not occur to me to simply “Google” how to fix said problem, until I took a coding class. Whether you are new or old to blogging, I highly recommend taking a HTML and CSS class. Do I think you need to learn to code your whole site? No, but learning the basic concepts of how the pieces fit together to run your blog is SO helpful and makes tackling small changes much less scary. Today, I’m sharing how to make your social media links open into their own windows. It’s so simple!
To get your links to open in a new window, you just need to add the code:
target="_blank"
This code will make any link open in a new window, not just your social media buttons. 🙂 Of course when you are linking within your post it is much easier to just check the “open in new window” box when you use the link tool.
Since I use WordPress I’m detailing that process. Regardless of your platform you should be able to find your social media coding and add this snippet of code into the same place in that string of code.
Go to Appearance →Widgets
Find your social media widget and add in target=”_blank” after your destination code (where the clicked link leads to).
Here is the code used to link to my Twitter account:
<a href="https://twitter.com/foodboozebags" target="_blank" ><img title="Twitter" src="http://www.foodboozeandbaggage.com/wp-content/uploads/2014/10/Twitter.png" alt="" width="45" height="45"/>
Prior to adding in the new code it looked like:
<img title="Twitter" src="http://www.foodboozeandbaggage.com/wp-content/uploads/2014/10/Twitter.png" alt="" width="45" height="45"/>
You will need to add this code to each of your social media code lines:
If you are completely new to blogging and do not have social media buttons yet, you can easily add them:
1. Upload your social media icon files
2. Go to Appearance →Widgets
Drag the “Text” widget over to the right-hand side, under your sidebar
3. Name the Text Widget whatever you want to. Mine is “Connect”, you may want to name your’s “Get Social” or “Stalk Me”…whatever. What you put in the “Title” field, will show on your sidebar.
4. Now add in the code! Just copy and paste the below, and add in your information to the areas in red. The width and height settings are up to you, depending on how large or small you want your icons.
<img title="Twitter" src="http://www.foodboozeandbaggage.com/wp-content/uploads/2014/10/Twitter.png" alt="" width="45" height="45"/>
The href should be the url that the button opens to.
Img Title should be what you are linking to or what you want people to see when they hover over the button.
The src should be the url that links to your uploaded image
5. Save to see it displayed on your page!
6. Now do this for each of your social media buttons by copying the code to the next line in the same widget and updating the information accordingly.
Do your social media buttons open in a new window?
