I have been blogging for about 3 years now and have learned so many fun ways to design a blogger- powered blog. I wanted to share some of what I have learned because I have been receiving questions from friends recently who are just getting started. I wanted to spare them the hundreds of hours of reading tutorials that may or may not work.
I thought today I would share how I made my new, interactive social media header using PicMonkey, a photo editing website I use every day.
Ok here we go! I am going to use mostly pictures with the instructions at the bottom of each picture.
|This is what your blog will look like when you first start…BORING! I think getting a great header is a first priority when starting out.|
**Before you start making your NEW header, you need to get move or get rid of your old one. Click on the icon below to learn how to do this. Make sure you always back up your HTML for your blog before you edit it.
Instead of deleting my header, I moved my header to the very bottom of my blog so that it would still show up on the Mobile version. I would recommend doing this if you want the Mobile version to show your header.
Ok! Now that the old header is out of the way, it’s time to create our new header with clickable social media icons.
|Go to template on the left menu and click on the customize button.|
|Click on adjust widths in the sidebar and choose the width of your blog. I chose 1000px for my example blog.|
|Now is the time to create your header images. Go to PicMonkey and click on the design image and then choose custom.|
|Under the resize option, choose 1000px (or whatever width you chose) wide and then the height is up to you. I chose 100px tall for my header this time. Click apply.|
Now you need to choose your social media icons. Just google “free social media icons” or buy some on Etsy. I chose my coral pink icons for the example blog from Pure Imagination and they look like this:
The icons I chose are 40 by 40px. So if you want to but six on there, you would adjust the length of the header to 760. If you only wanted three, you would adjust the length to 880. You are basically adding the amount of space the icons will take up and subtracting that from the original length of the blog.
|Once your length is saved, design your header with the title of your blog on the left hand side and the “follow me” or “follow along” on the far right side. This is just one example of what PicMonkey can do but this is totally up to your own creativity. Save this image before continuing because you will want it for later and PicMonkey can’t save images to work on later.|
|Now crop the blog header all the way over to the “follow along” words and then save it for later. Then click back to the image you were working on and click UNDO the last action. Then your full header you designed will come back.|
|Now crop the image to save only the “follow along” image. Save this image and now you’re done with PicMonkey.|
|Upload your blog header and your “follow along” image to Photobucket or your photo hosting site. When you are editing the HTML code I provided in this post, click on the direct link to copy your image source.|
|Upload your social media buttons you are going to want to use as well.|
|Ok, now the fun part. Go back to your blog and click on layout in the sidebar. Click add a gadget in the top part of the blog.|
<div style=”text-align: center;”>
<a href=”your blog’s URL” target=””><img src=”Your Header Image Source” border=”0″ alt=”Home”/></a>
<img src=”Follow Along Image Source” border=”0″ alt=”Follow Along”/>
<a href=”YOUR Facebook URL” title=”Facebook”>
<img alt=”Facebook icon” src=”Facebook Icon Image Source” height=”40″ width=”40″ /></a>
<a href=”YOUR Pinterest URL” title=”Pinterest”><img alt=”Pinterest” src=”Pinterest Icon Image Source” height=”40″ width=”40″ /></a>
<a href=”YOUR Twitter URL” title=”Twitter”><img alt=”Twitter” src=”Twitter Icon Image Source” height=”40″ width=”40″ /></a>
Everything in red is what you need to change to make this code work. The URL is the address you want the person to be directed to when they click the icon. The image source is going to be the direct link from Photobucket or whatever photo hosting site you want to use. I use Photobucket and LOVE it! You can change the image sizes in the code to adjust the look of the icons but don’t erase any “” marks in this code. This is designed so that if a reader clicks on the Header image you designed it will take them back to your home page. If they click on the “Follow Along” image nothing will happen.
**If you want to add more icons for something such as Google + or You Tube just add another line of this code above the </div> at the end of the original code.
<a href=”YOUR URL” title=”Social Media of Your Choice“><img alt=”Social Media” src=”Icon Image Source” height=”40″ width=”40″ /></a>
|Click save once you have changed all of the red words to match your blog’s URL and social media URLS.|
Adjusting the Widths:
If your blog looks like this when you are all done, just go to the template, click customize, and adjust the widths of the blog to make your header all appear in one line across the top.
Here is the finished product! Check it out at The Example Blog!
I hope this helps bloggers who are just starting out. Please share your success! I would love to come check out your work 🙂 Let me know if you have problems. I am not an HTML genius but hopefully I will be able to help!