Aradia's Hand
  • Home
  • About
    • Sacred Creation
  • Shop
    • By Use >
      • Newly Arrived!
      • Accessories
      • Decor
      • Jewelry
      • Kids
      • Wedding
      • Ariadne's Threads
      • Ariadne's Threads (Ravelry Store)
    • By Theme >
      • Adorning Beauty
      • Chakra Wellness
      • Crystal Curiousity
      • Divine Spirit
      • Elemental Energy
      • Ever After
      • Gothic Delight
      • Hooked Up
      • In Stitches
      • Literary Madness
      • Perfectly Pigmented
      • Signature Series
      • Starry Guidance
      • Sticks n String
      • Tribal Fusion
      • Utterly Lovely
      • Wee Ones
    • Custom Order Inquiry
  • Blog
  • Portfolio
    • Accessories Gallery
    • Decor Gallery
    • Jewelry Gallery
    • Adorning Beauty Gallery
    • Chakra Wellness Gallery
    • Crystal Curiousity Gallery
    • Divine Spirit Gallery
    • Elemental Energy Gallery
    • Gothic Delight Gallery
    • Hooked Up Gallery
    • In Stitches Gallery
    • Literary Madness Gallery
    • Perfectly Pigmented Gallery
    • Starry Guidance Gallery
    • Sticks n String Gallery
    • Utterly Lovely Gallery
    • Wee Ones Gallery
  • Contact

June Featured Tutorial: How to Create a Custom Image Link for Weebly

6/5/2013

1 Comment

 
Picture
We all love those pretty fancy little images that are found on the sidebars of blogs or websites - you know the cute little social media icons or "as seen on" buttons.

I found a tutorial on creating such for a Blogger blog, but as I am ceasing use of it I thought I should create a Weebly-specific one!
Picture
First of all, for the purposes of your blog side bar set your image width to 175px.  You can do this easily by using a free photo editor such as Picasa (a Google product) and accessing their "Creative Kit" (once called Picnik).  I recommend you save a copy in case you have to resize the image again.
Picture
Once you have your image as desired log in to Photobucket and upload.  In  your library click on the gear icon and choose "Get Links".
Picture
In Weebly, select the "Custom HTML" widget.  Clicking the widget input the following:

<a href="URL Goes Here"><img src="Image Direct Link Goes Here" /></a>

  • Replace URL GOES HERE with your desired link, make sure you leave the quotations.
  • Replace IMAGE DIRECT LINK GOES HERE with the link you copied from Photobucket, again making sure to leave the quotation marks in place.

Here's what mine looked like:
<a href="http://www.lauracgeorge.com/blog/"><img src="http://i1356.photobucket.com/albums/q723/AradiasHand/LCGBlogButton-001_zps1e3db56f.jpg" /></a>


Additional Edits:  If you're a stickler for design like me in many cases you can further edit your code to center it and have links open in a new page.  Use this edited code with the proper links inputted (know that in some cases these extra edits may not work properly so always check!):

<center><a href="URL Goes Here"> target="_blank" <img src="Image Direct Link Goes Here" /></a></center>


You can now repeat this image loading & linking process to your heart's content!  I also want to give specific thanks to Beautiful Dawn Designs for the original tutorial for Blogger!

Thank you for tuning in to my monthly tutorial (or pattern) feature!  In the comments below let me know how you liked this tutorial!  Was it clear?

I look forward to sharing more great tutorials like this with you in the future!  If you're new to the blog make sure you follow me on Bloglovin' so you never miss a post!  Join my newsletter for those special updates I *only* share with my list.  And connect with me on social media for real time updates!

Related Reading...
Follow on Bloglovin
Picture
1 Comment
Tiffany link
8/16/2013 10:15:48 am

Hi Aradia,

I'm so glad you found the tutorial helpful. Thank you for the link back. :)

Have a great weekend!

Reply

Your comment will be posted after it is approved.


Leave a Reply.

    Picture
    Become a Patron!
    Picture
Picture
Connect with me on all your networks!
Picture
Picture
Picture
Picture
Picture
Picture
Picture
Picture

Archives

June 2019
December 2018
January 2018
March 2017
February 2017
December 2016
June 2016
May 2016
March 2016
July 2015
May 2015
April 2015
March 2015
February 2015
January 2015
December 2014
November 2014
October 2014
September 2014
July 2014
June 2014
April 2014
March 2014
February 2014
January 2014
November 2013
October 2013
September 2013
August 2013
July 2013
June 2013
May 2013
April 2013
March 2013
February 2013
January 2013
December 2012
November 2012
October 2012
September 2012
August 2012
July 2012
June 2012
May 2012
May 2011

Powered by Create your own unique website with customizable templates.