Thursday, 9 April 2015

Blogger Bliss: Improving Your Blog | Share Icons


Today I wanted to talk a little bit about improving your blog (in terms of presentation) and I want to share with you a few things that I went through to get my blog looking more professional. I visited so many websites and help posts and this and that... I figured if I could compile most of what I find helpful, then you'll be off to a great start.

I have a few ideas of things I want to talk about in various blog posts over time, and this list might change. I may remove / add something, but for now these are things I want to write about in this series!

Creating your own share icons
or using some of the ones I made for you!

Getting your own domain name
getting rid of that pesky 'blogspot' in your URL

Getting your own blog template
because a little somethin' prettier will get you feeling great about your blog!

Basic coding principles for editing your template's HTML
because sometimes we want to make bigger changes, and it can get confusing

--------------------------------------------------------------------------------------------------------

In this blog post, I want to talk about share icons. I just finished making some share icons for my blog and I wanted to show you how you could make your own and implement them into your blog. You can find a lot of these anywhere, really, and making your own is very easy to do, but I thought I would touch on it anyway.

Having share icons is a great way to offer your readers the ease of finding you all over your social media accounts, and they're cute, too!

I wanted to teach you how to make your own, because it's nice to be able to fully customize your blog. If you've got a specific colour scheme, or signature 'pattern' theme going in, implementing that into your icons would be a nice way to tie your whole blog together, so let's get into it.

Below are some basic share icons I created that you're welcome to use on your blog if you'd like! I also have an .xcf (gimp) file for you to download where you can make your own. The file is the same template that I used to make these icons, and my tutorial on creating your own will be a million times easier with my template!

Some notes:
I've provided the HTML codes to copy these and put them into your blog template/layout, but you will need to add your own share links into the code so that the images actually link to something. I've also put the sizing of these icons to 32px by 32px. If you'd like an idea of how big that is, that's the size of the share icons on my blog's side banner (underneath my mini bio). You can make them bigger or smaller as you please. I've coded them in the same order as they appear here, switch them around or remove any if you'd like. Other than that, enjoy!

*credit*
You do not need to credit me to use these! They are just share icons, and I'm providing you with the template to create your own anyway. If this post has helped you in any way and you would like to link back to my blog, it is always much appreciated, but do not feel obligated, just enjoy them.
















*For some reason, adding this textarea messes up my blog's home page, SO, I'm just going to let you guys download a text file with the code in it...sigh*

Click here to download the .txt file!

--------------------------------------------------------------------------------------------------------

Yay, share icons! So, now I'm going to give you the .xcf file that I made as a template for these icons. If you choose to download it, it will be set up with the pink-on-grey icons that you see above. The dark checkered background in the file means that that part of the image is transparent. I made an all-white layer at the very bottom so you can see what your icon would look like on a white background, but when you export your icon you should keep the background transparent! (So, hide that layer before you save it-- File > Export as... and then save as either .png or .jpg)

*note: the link above is a direct download, meaning the file will download once you click. It is safe, not to worry.

So now we'll talk about making your own icons. Please refer to either of my other two blog posts about GIMP here to help you understand what I'm talking about. 

In the template I've provided, I have separate layers for each and every social media icon. You will hide/show these as you go along (by clicking the 'eye' button to the left of each layer). Using the magic wand, you can select the icons and paint them any colour you want. Same goes for the circular background-- or, you can remove that if you wish and just have the social media icons by themselves. 

If you want to go a little bit fancy with your icons and do something more than just a colour, you can use a pattern or part of an image to fill in either your icons or your circular background (like I did with the first and last rows!). I wrote a tutorial on doing that here

If there's a share icon you want that I have neglected to include, like Tumblr or LinkedIn, (or you want to use a different icon than the ones I've picked out), here's what you will do: Refer to a website that has all of the typical icons free for you to use, like this one, and edit them as you wish. Remove the background, size it, anything. Share icons are easy because they're everywhere and they're easily accessible. 


--------------------------------------------------------------------------------------------------------

I hope you guys enjoyed this post! I know I haven't been writing a lot about makeup lately, and I'm planning a big makeup haul soon, I've just been working a lot. When I do my makeup posts, I like to take my photos in natural light and since I'm a bartender I typically work afternoons and nights, so I lose the light by the time I'm off work. (And I spend my mornings using the natural light to put my makeup on-- priorities)

Anyway, let me know how you like this post and if you think this series will be a good one. I'm hoping it will be.

Thank you to thenextweb.com for the photo!

Until next time, sunshine!

No Comments Yet, Leave Yours!