Content and graphics © Fiona Brianne. Powered by Blogger.

Social icons

Tuesday, October 07, 2014

Blogging Secrets #4: How to make CLICKABLE Social Media Icons for your Blog! -BLOGtober #1

 


It's been a while since I have made a blogpost so this month, I have set myself a challenge which I hope I will be able to complete. I have heard bloggers that some bloggers have decided to get involved in Blogtober, which is blogging throughout the entire month of October. I saw that my sister had already began posting for her own Blogtober challenge andd I have to say, I was immediately up for the challenge! Personally, I think a blog post ever day is a little ambitious, so I will be aiming to produce a blog post every 2-3 days.

So Blogtober post #1 is actually post #4 in my Blogging Secrets series, where I share the biggest need to know tricks for video blogging and blogging. So far I have shared how to make a Youtube thumbnail, where to get 'that' music used by 'that' Youtuber in their video an how to make a Youtube channel banner.
Today, I will sharing how to make your social media icons/ buttons clickable so that you can add cute handmade buttons to your blog banner or sidebar and give your layout a bit of a makeover.
I will not be showing you how to actually make the buttons because to be honest, its a pretty straight forward process which you can probably find how online in no time.

First open up the website Image Maps.

Thankfully, this website is extremely easy to navigate. Select the big orange box ( it is really big so you can't miss it) which says 'Browse for file'.

 It will open up your personal folders; navigate through your files and select your image.
Once opened, select ' Start Mapping' and your image should upload onto a blank space. My picture currently has three icons and for each icon we are going to create a separate link. 
Start with the first link, hover over the icon and right click.

A menu should pop up, select the ' Create Rect' option which will allow you to draw a rectangular link over your icons. You can use the Circle and Poly options if you like, but the rectangle option fits most icons. Draw a rectangle.

 In the next box, add your personal URL.
To make sure the link opens up in a new tab, select the 'Events' tab and change the 'Target' drop down to 'Blank'.


  
Repeat for each icon, you will know which icon you have edited as it will turn red.


Once you are finished right click the image. The same pop up menu will appear; select 'Get Code'.

In the 'HTML Code' tab at the very bottom you will find a long code; this is the code you need to copy and paste to your website. Copy the code.

Open your websites layout ( for Blogger accounts, select 'Layouts' If you haven't already, add a new HTML/ Java script  gadget for your social media icons). Paste the code in the content box. You can name the element if you want to make it easier to find in the future ( you can see that I have named mine ' Connect with Me!')

That is it!
 However, Image Maps stores your personal HTML code for only 24 hours so you will need to move the picture to a permanent location. For this you can upload your image to a phot hosting website, the best sites are places linked to your blog account so they can be found again should something go wrong, e.g. Google Pictures, Wordpress and Photobucket. 
Once done, copy the new image location and replace the old location; the code goes between  src=" and another " ( I have highlighted this in the picture). 

 
Save and then your ready to use your clickable links!
 Ta- da!


~

 I really hope this series is helping you guys with your channels and blogs.
 Let me know if you need help with anything else and also if this series has helped you boost your blog.
If you want to read the other posts in the series, I will link them below.

And....lastly, I have a series going on on my Youtube channel called #fihasFALLen which is everything Autumn inspired including makeup, outfts and baking. So far I have three videos live, so make sure you check them out. If you do comment "Elena and Damon sent me!"

OTHER POSTS IN THE SERIES


Thanks for reading,
God Bless
post signature

1 comment

  1. Ah! So that's how you do it! :D thanks for sharing!

    ReplyDelete

Tuesday, October 07, 2014

Blogging Secrets #4: How to make CLICKABLE Social Media Icons for your Blog! -BLOGtober #1

 


It's been a while since I have made a blogpost so this month, I have set myself a challenge which I hope I will be able to complete. I have heard bloggers that some bloggers have decided to get involved in Blogtober, which is blogging throughout the entire month of October. I saw that my sister had already began posting for her own Blogtober challenge andd I have to say, I was immediately up for the challenge! Personally, I think a blog post ever day is a little ambitious, so I will be aiming to produce a blog post every 2-3 days.

So Blogtober post #1 is actually post #4 in my Blogging Secrets series, where I share the biggest need to know tricks for video blogging and blogging. So far I have shared how to make a Youtube thumbnail, where to get 'that' music used by 'that' Youtuber in their video an how to make a Youtube channel banner.
Today, I will sharing how to make your social media icons/ buttons clickable so that you can add cute handmade buttons to your blog banner or sidebar and give your layout a bit of a makeover.
I will not be showing you how to actually make the buttons because to be honest, its a pretty straight forward process which you can probably find how online in no time.

First open up the website Image Maps.

Thankfully, this website is extremely easy to navigate. Select the big orange box ( it is really big so you can't miss it) which says 'Browse for file'.

 It will open up your personal folders; navigate through your files and select your image.
Once opened, select ' Start Mapping' and your image should upload onto a blank space. My picture currently has three icons and for each icon we are going to create a separate link. 
Start with the first link, hover over the icon and right click.

A menu should pop up, select the ' Create Rect' option which will allow you to draw a rectangular link over your icons. You can use the Circle and Poly options if you like, but the rectangle option fits most icons. Draw a rectangle.

 In the next box, add your personal URL.
To make sure the link opens up in a new tab, select the 'Events' tab and change the 'Target' drop down to 'Blank'.


  
Repeat for each icon, you will know which icon you have edited as it will turn red.


Once you are finished right click the image. The same pop up menu will appear; select 'Get Code'.

In the 'HTML Code' tab at the very bottom you will find a long code; this is the code you need to copy and paste to your website. Copy the code.

Open your websites layout ( for Blogger accounts, select 'Layouts' If you haven't already, add a new HTML/ Java script  gadget for your social media icons). Paste the code in the content box. You can name the element if you want to make it easier to find in the future ( you can see that I have named mine ' Connect with Me!')

That is it!
 However, Image Maps stores your personal HTML code for only 24 hours so you will need to move the picture to a permanent location. For this you can upload your image to a phot hosting website, the best sites are places linked to your blog account so they can be found again should something go wrong, e.g. Google Pictures, Wordpress and Photobucket. 
Once done, copy the new image location and replace the old location; the code goes between  src=" and another " ( I have highlighted this in the picture). 

 
Save and then your ready to use your clickable links!
 Ta- da!


~

 I really hope this series is helping you guys with your channels and blogs.
 Let me know if you need help with anything else and also if this series has helped you boost your blog.
If you want to read the other posts in the series, I will link them below.

And....lastly, I have a series going on on my Youtube channel called #fihasFALLen which is everything Autumn inspired including makeup, outfts and baking. So far I have three videos live, so make sure you check them out. If you do comment "Elena and Damon sent me!"

OTHER POSTS IN THE SERIES


Thanks for reading,
God Bless
post signature

1 comment

  1. Ah! So that's how you do it! :D thanks for sharing!

    ReplyDelete